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

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

  • Гость: Привет! Пример заработал сразу. Только поправь пожалуйста кавычки в HTML коде. Да и вообще цитаты очень плохо отображаются. Вылазят в FireFox под Linux Я думаю нужно поставить какой-то плагин который цитаты с HTML кодом подсвечивает по человечески и не заменяет обычные кавычки на типографские. Спасибо!
  • Гость: Подскажите, пожалуйста, как изменить размер выноски, которая появляется при клике по маркеру , иначе текст не помещается.
  • Гость: У инфо-окна есть свойство maxWidth, которое позволяет задавать максимальную ширину окна.
  • Гость: Не смогла создать ключ :(
  • Гость: Смотрите <a href="http://webmap-blog.ru/google-maps/problema-polucheniya-klyucha-dlya-ispolzovaniya-api-google-maps-v2" rel="nofollow">заметку</a>
  • Гость: Добрый день. Не могу найти раздел, где надо ввести домен и получить API ключ. У них,по моему, что-то изменилось. И по вашей ссылке тоже не смог найти. Подскажите пожалуйста. С ув.Гоша
  • Гость: Написал небольшую <a href="http://webmap-blog.ru/google-maps/problema-polucheniya-klyucha-dlya-ispolzovaniya-api-google-maps-v2" rel="nofollow">заметку</a>, по этому вопросу.
  • Гость: Огромное спасибо автору этой статьи за его труд. Очень помог с изучением основ работы с картами Google. Хотелось бы высказать несколько моментов, которые как мне кажется кому-то упростят жизнь. 1. ключ генерировать не обязательно. Можно использовать так: src="https://maps.google.com/maps/api/js?sensor=true"&gt; 2. Не притендуя на оригинальность скажу, что возможно центрировать карту (а также добавлять метки и пр.) без использования XMLKML. Т.е. мы не создаем никакой парсер, а используем только JavaScript встроенный в PHP. У меня все работает так: &lt;? switch($go) { default: search($ln, $lg); break; /*еще несколько функций, которые я еще не написал*/ } function search ($ln, $lt) { echo &quot; 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); } "; } ?&gt; Еще раз, огромное спасибо автору статьи!
  • Гость: Извините, но рабочий код, который я пытался опубликовать выше был жестоко изуродован. Если кому-то нужно, пишите на Mr.Ritm[собака]mail.ru с темой "гео-кодинг". Обязательно отвечу и пришлю то, что у меня получилось.