«
»

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

С этой заметки я начинаю рассказывать об использовании 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 Яндекс.Карт на домашнем компьютере Вам будет необходимо установит локальный веб-сервер.

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

Похожие статьи:

Запись опубликована 20 марта 2009 в 23:47 Категория: Google Maps. Вы можете следить за комментариями с помощью RSS 2.0-ленты. Вы можете оставить комментарий или трекбэк с вашего сайта.

Комментарии (7) to “Начинаем использование API-карт Google”

  1. vitaly
    15 августа 2011 в 1:16

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

    Спасибо!

  2. Виталий
    13 ноября 2011 в 0:59

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

  3. admin
    13 ноября 2011 в 10:50

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

  4. Татьяна
    3 марта 2012 в 10:25

    Не смогла создать ключ :(

  5. Гоша
    6 марта 2012 в 0:59

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

  6. admin
    6 марта 2012 в 10:19

    Написал небольшую заметку, по этому вопросу.

  7. admin
    6 марта 2012 в 10:20

    Смотрите заметку

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