Знакомство с Google Maps API. Часть #1

Для того чтобы использовать карты Google на своем веб-ресурсе, необходимо получить ключ к API карте гугла. Для этого идем по этому адресу, соглашаемся с условиями использования, вводим URL своего сайта и жмем “Сгенерировать ключ к API”. На следующей странице получаем ключ.

Следующим шагом нам необходимо подключить саму библиотеку Google:

<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=[здесь_код_к_API]" type="text/javascript"></script>

Затем в HTML коде страницы необходимо определить блок, в котором будет отображаться карта и стили для него.

<style>
div#google_canvas {
 height:300px;
 width: 500px;
 margin:0px auto;
}
</style>
<div id="google_canvas"></div>

Теперь пишем функцию инициализации карты Google:

 /* Если браузер совместим */
 if (GBrowserIsCompatible()) {
 /* Создадим объект карты */
 var map = new GMap2(document.getElementById("google_canvas"));

 /* Установим координаты центра карты и начальный масштаб */
 map.setCenter(new GLatLng(37.4419, -122.1419), 5);

 /* Добавим элементы управления картой воспользовавшись конструктором GLargeMapControl из класса GControl  */
 map.addControl(new GLargeMapControl());

 /* Добавим мини-карту обзора в углу основной карты */
 map.addControl(new GOverviewMapControl());
 }

И самое главное, нам нужно запустить эту функцию при загрузке страницы и выгрузить при закрытии:

<body onload=“initialize_map()” onunload=“GUnload()”>

Сейчас у нас получилось отобразить карту следующим образом. В следующей статье мы научим нашу карту взаимодействовать с пользователем в интерактивном режиме.

P.S. Для самостоятельного изучения рекомендую к прочтению справочные материалы по API карт Google.

5 Responses to “Знакомство с Google Maps API. Часть #1”

  1. Spoofi says:

    Видимо этот цикл статей будет мне очень полезен, так как в одном проекте без карт гугла не обойтись 🙁 Жду следующих статей.

  2. […] я и обещал в первой части Знакомства с Google Maps API этого цикла, мы сейчас познакомимся с обработкой […]

  3. proglammer says:

    Спасибо за статейку… поду, пока, почитаю вторую часть! 🙂

  4. Денис says:

    Спасибо, очень помогло!

Leave a Reply




*