Начинаем использование API-карт Google

Автор: | 20.03.2009

С этой заметки я начинаю рассказывать об использовании API-карт Google на Ваших сайтах.

Описание API-карт Google расположено по адресу http://code.google.com/intl/ru/apis/maps/

С начала необходимо получить специальный ключ.

Для получения ключа к API Карт требуется аккаунт Google, поскольку ваш ключ API будет связан с вашим аккаунтом.

Получить собственный аккаунт можно по адресу https://www.google.com/accounts/ManageAccount

На данной странице выбрать ссылку Создайте аккаунт прямо сейчас.

И пройти процедуру регистрации

После этого войти в Ваш аккаунт введя полученные при регистрации логин и пароль (с этого шага начинают все те, кто уже зарегистрирован на Google).

Необходимо перейти по адресу http://code.google.com/intl/ru/apis/maps/signup.html для получения ключа к API-карт Google.

На данной странице необходимо прочитать и согласиться с условиями и положениями службы и ввести url-адрес Вашего сайта.

Лучше всего в качестве адреса сайта указывать только его домен (например, mysayt.ru).

Тогда ключ, зарегистрированный на отдельный домен, будет действителен для всех url внутри этого домена и для специальных поддоменов (например для «www»).

Ключ, зарегистрированный на домен http:// mysayt.ru /, будет действителен для:

http:// mysayt.ru /

http://www. mysayt.ru /

http://www. mysayt.ru /page/

http://host1. mysayt.ru /

http://host2. mysayt.ru /page/

Обратите внимание, что ключ, зарегистрированный на домен http://www. mysayt.ru / будет действителен только для домена http://www. mysayt.ru и его разделов (например, http://www. mysayt.ru /page/).

Для работы на локальном компьютере с именем localhost, Вым необходимо зарегистрировать ключ для сайта с адресом http://localhost.

После нажатия на кнопку Сгенерировать ключ к API будет выполнена автоматическая генерация ключа и сформированы примеры использования данного ключа.

Например, ключ :

BQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ

Код JavaScript Maps API Example:

...
  // Note: you will need to replace the sensor parameter below with either an explicit true or false value.
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=BQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ" type="text/javascript"></script>
...

Код Maps API for Flash Example:

...
  <maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
    key="BQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"/>
...

Код HTTP Service Example:

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&oe=utf8
&sensor=true_or_false&key=BQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ

Приведу простейший код для использования API-карт Google:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Пример API Карт Google на языке JavaScript</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ&sensor=true_or_false"
            type="text/javascript"></script>
    <script type="text/javascript">
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(56.32811,44.0), 10);
      }
    }
 
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

Центр карты задается командой map.setCenter(new GLatLng(56.32811,44.0), 10); , где 10 — означает уровень масштаба.

Для тестирования и выполнения различных упражнений с API Яндекс.Карт на домашнем компьютере Вам будет необходимо установит локальный веб-сервер.

Как это проще всего сделать я описал в специальной заметке в разделе База знаний.

Начинаем использование API-карт Google: 10 комментариев

  1. vitaly

    Привет!
    Пример заработал сразу.
    Только поправь пожалуйста кавычки в HTML коде.
    Да и вообще цитаты очень плохо отображаются. Вылазят в FireFox под Linux
    Я думаю нужно поставить какой-то плагин который цитаты с HTML кодом подсвечивает по человечески и не заменяет обычные кавычки на типографские.

    Спасибо!

  2. Виталий

    Подскажите, пожалуйста, как изменить размер выноски, которая появляется при клике по маркеру , иначе текст не помещается.

    1. admin Автор записи

      У инфо-окна есть свойство maxWidth, которое позволяет задавать максимальную ширину окна.

  3. Гоша

    Добрый день. Не могу найти раздел, где надо ввести домен и получить API ключ. У них,по моему, что-то изменилось. И по вашей ссылке тоже не смог найти. Подскажите пожалуйста.
    С ув.Гоша

  4. Александр

    Огромное спасибо автору этой статьи за его труд. Очень помог с изучением основ работы с картами Google.
    Хотелось бы высказать несколько моментов, которые как мне кажется кому-то упростят жизнь.
    1. ключ генерировать не обязательно. Можно использовать так: src=»https://maps.google.com/maps/api/js?sensor=true»>
    2. Не притендуя на оригинальность скажу, что возможно центрировать карту (а также добавлять метки и пр.) без использования XMLKML. Т.е. мы не создаем никакой парсер, а используем только JavaScript встроенный в PHP. У меня все работает так:
    <?

    switch($go) {

    default:
    search($ln, $lg);
    break;
    /*еще несколько функций, которые я еще не написал*/
    }

    function search ($ln, $lt)
    {
    echo "

    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }

    function initialize() {
    var latlng = new google.maps.LatLng(‘» . $_REQUEST[‘xln’] . «‘,'» . $_REQUEST[‘xlt’] . «‘,20);
    var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById(«map_canvas»),
    myOptions);
    }

    «;
    }
    ?>
    Еще раз, огромное спасибо автору статьи!

  5. Александр

    Извините, но рабочий код, который я пытался опубликовать выше был жестоко изуродован.
    Если кому-то нужно, пишите на Mr.Ritm[собака]mail.ru с темой «гео-кодинг». Обязательно отвечу и пришлю то, что у меня получилось.

Добавить комментарий для vitaly Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *