Осваиваем 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: перемещение карты и маркеров.


0
Цитировать