22 декабря 2015
8 мая 2009
9
Маркеры в Google Maps
Привет, ребята и девчата!
Когда-то давно я написал статью о том, как я делал «карточную» часть сайта точек wi-fi. Так вот, там я все описал вкратце — думал, что материала в сети и так много и вроде все не так сложно (за исключением нескольких моментов ;-). Оказывается, что это не так, и судя по вашим комментариям (статья стала чуть ли не самой комментируемой на сайте), было бы неплохо раскрыть тему более подробно.
В общем, с этой статьи я начну раскрытие вопроса. Сегодня я покажу, как добавлять маркеры на карту учитывая адрес, как этот маркер перетаскивать и как работать с координатами.
Воспоминания
Напомню для начала, что у нас есть такое понятие как маркер. Маркер делается вот так (не считая оформления):
var marker = new GMarker(точка, { прочие параметры }); // объявление
map.addOverlay(marker); // вывод на картуТеперь точка. Это просто пара широта-долгота. Где ее взять? Либо прописать вручную (например, из базы), либо получить из других функция апишки. В частности, для работы с адресами (строками типа «страна, город, адрес») есть замечательный объект geocoder. Его и рассмотрим.
Работа с адресами
Сегодня мы рассмотрим простейший вариант, в котором в ответ на предоставляемый адрес возвращаются соответствующие координаты, либо выводится ошибка, что адрес не верен.
Давайте представим себе такую ситуацию (это всегдя проще и удобнее, чем делать что-то абстрактное). У нас есть поле, где пользователь указывает свой адрес. Мы же хотим вывести этот адрес на карту и сохранить его потом куда-то (в базу, файл, куки, еще что-то). Верстка будет какой-то такой:
<body onload="initialize()" onunload="GUnload()">
<h1>Выставление маркера на карте по адресу места</h1>
<p>Реализация простейшего применения объекта <code>geocoder</code> — пользователь указывает адрес, скрипт ставит маркер на карте в соответствующем месте.</p>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="Россия, Санкт-Петербург, Невский пр., д. 15" />
<input type="submit" value="Показать на карте" />
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<p>
<input type="text" name="lat" id="spot-lat" value="" />
<input type="text" name="longi" id="spot-longi" value="" />
</p>
</form>
</body>Теперь самое интересное — javascript.
<script type="text/javascript">
// объявление переменных
var map = null; // карта
var geocoder = null; // объект геокодинга
// инициализация карты
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas")); // делаем карту в таком диве
map.setCenter(new GLatLng(59.94, 30.3), 13); // устанавливаем центр карты и приближение
geocoder = new GClientGeocoder(); // создаем объект геокодера
}
}
// функция, выводящая маркер,
// соответсвующий указанному адресу
// ее аргумент — адрес места
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address, // сообщаем объекту адрес
function(point) { // объект вызывает функцию, аргумент которой точка, соответствующая адресу
if (!point) { // если точка не определена (то есть адрес не правильный или Гугл не нашел его)
alert(address + " не найден"); // выводим ошибку
} else { // если же все круто, то
map.setCenter(point, 15); // центром карты делаем эту точку
var marker = new GMarker(point); // создаем в ней маркер
map.addOverlay(marker); // и добавляем его на карту
marker.openInfoWindowHtml(address); // открываем у него инфоокно
document.getElementById('spot-lat').value = point.y; // и добавляем в поля широту
document.getElementById('spot-longi').value = point.x; // и долготу
}
}
);
}
}
</script>Смотрим примерчик. Как мы видим, при клике на кнопку «Показать на карте» мы спрашиваем у гугла координаты этого адреса, если все замечательно, то выводим их на карту и записываем координаты в соответствующие поля формы (для дальнейшего сохранения). Классно? А то. Просто? Конечно.
Теперь немного усложним себе жизнь и дадим пользователю возможность этот маркер перетаскивать — а вдруг он в другом подъезде живет? Собственно, исходный код будет различаться лишь дополнительными событиями для маркера. Вот их и рассмотрим более подробно:
<script type="text/javascript"> ...
var marker = new GMarker(point, {draggable: true}); // создаем в ней маркер (с перетаскиванием)
GEvent.addListener(marker, "dragend", function() { // как только перетащили
document.getElementById('spot-lat').value = marker.getPoint().lat(); // переписываем широту
document.getElementById('spot-longi').value = marker.getPoint().lng(); // и долготу
}); ...
</script>
Опять же, пробуем и смотрим. Как видно, координаты в полях меняются.
Теперь обратимся к вопросу сохранения этих координат. Это уже зависит от вашего серверного решения, но, думаю, что сохранение полей формы ни у кого не должно вызвать проблем.
О том, как выводить маркеры на карту по их координатам мы поговорим в следующий раз, а заодно более подробно рассмотрим вывод большого количества маркеров.
Все ваши вопросы можно (даже нужно) оставлять в вопросах и ответах. Замечания по статье пишите в комментарии. До встречи!
p.s. Паш, ты крутой чел, но некоторым до тебя еще надо рости ))))
В первом случае любой юзер может посмотреть html код (либо javascript), затем открыть xml и скопировать точки себе. А это не гуд, может у меня сайт секретный и на этом тока держится :)))
А на Яндекс картах можно узнать широту и долготу конкретного объекта?
Я нигде не смогла найти эту информацию((
http://api.yandex.ru/maps/jsapi/doc/ref/reference/geocoder.xml#constructor