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

22.04.2009

Для того чтобы использовать карты 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.

Tags:
Share  
Автор: Mihalytch Рубрики: JavaScript
Комментарии (4) »

Комментарии (4) на запись “Знакомство с Google Maps API. Часть #1”

  1. Spoofi пишет:
    15.05.2009 в 15:14

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

    [Ответить]

  2. Знакомство с Google Maps API. Часть #2 | Mihalytch personal blog пишет:
    10.02.2010 в 22:35

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

  3. proglammer пишет:
    03.06.2010 в 15:33

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

    [Ответить]

    Mihalytch Reply:
    Июнь 3rd, 2010 at 16:13

    Всегда пожалуйста)

    [Ответить]

Оставить комментарий