Осваиваем Google Maps API
Сегодня начал осваивать API Google Maps. Потребовалось сделать карту Москвы с метками, при щелчках по которым будет происходить переход на страницы, описывающие находящиеся там объекты. Как выяснилось, все предельно просто. Но расскажу по порядку.
Шаг 1. Загружаем скрипт Google Map API:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
В официальной документации рекомендуется делать это внутри head, однако если загрузить скрипт из body (в моем случае это было предпочтительнее), все работает. Параметр sensor=false означает, что не требуется поддержка устройств GPS для определения текущего местонахождения пользователя.
Шаг 2. Создаем область для отображения карты
<div id="map_canvas" style="width:500px; height:500px"></div>
Как видим, это может быть обычный div. Если нужно показать карту на все окно, то можно прописать в стилях такое:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
Шаг 3. Включаем показ карты
Для этого сначала создадим объект LatLng с координатами точки, которая будет показываться в центре карты:
<script type="text/javascript"><!--
var map;
function initialize() {
var moscow = new google.maps.LatLng(55.763585,37.560883);
В качестве координат используются географическая долгота и широта. Узнать их можно с помощью обычной карты Google: найти на карте нужное место, щелкнуть по нему правой кнопкой и выбрать "что здесь находится". Координаты появятся в строке поиска.
Теперь зададим другие свойства карты:
var myOptions = {
zoom: 10,
center: moscow,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Здесь zoom — начальный машстаб (10 как раз подходит для того, чтобы показать часть Москвы внутри МКАД), в center указывается объект с координатами центральной точки, а mapTypeId задает начальный вид карты (в данном случае выбрана обычная карта, так же могут быть варианты SATELLITE — вид со спутника, HYBRID и TERRAIN).
И наконец загружаем саму карту:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);Первый параметр здесь — это DOM-объект, в котором будет отрисовываться карта, второй — настройки, заданные выше.
Шаг 4. Добавляем маркер
Опять создаем объект с точкой, на которую будет указывать маркер:
var point1 = new google.maps.LatLng(55.763525,37.560893);
И добавляем маркер на загруженную на предыдущем шаге карту:
var marker = new google.maps.Marker({
position: point1, map: map, title: 'Пробная точка!'
});
Здесь position — объект с координатами, map — карта, на которую нужно его добавить, а title — подсказка, которая будет появляться при наведении на маркер.
Шаг 5. Добавляем переход по щелчку
Для щелчков, двойных щелчков, изменения масштаба карты и прочих подобных событий обработчики добавляются с помощью объекта google.maps.event:
google.maps.event.addListener(marker, 'click', function() {
document.location='http://4xpro.ru';
});Здесь первым параметром метода addListener указывается объект, для которого добавляется событие (таким объектом может быть как маркер, так и сама карта), вторым — тип события (одиночный щелчок в данном случае), а третьим — функция-обработчик.
Вот и все! Осталось только закрыть функцию и тег script:
}
--></script>
А так же добавить вызов функции initialize на событие onLoad:
<body onload="initialize()">
См. также Google Maps: перемещение карты и маркеров.
не могу найти на просторах интернета, как теперь по таймеру обновлять координаты этой точки с перемещением/дорисовкой карты? (рефреш всей страницы делать не хочется, планирую делать ajax запрос на сервер за получением обновленных координат. api что у яндекса, что у гугля - слишком объемное, и с наскоку найти нужный метод не получается)
и чтобы два раза не вставать: если использовать свою иконку-стрелку, можно ли изменять ее угол (у меня есть азимут направления)