С этой заметки я начинаю рассказывать об использовании 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:
...
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false &key=ABQIAAAACHCJdlgAEGcD_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="ABQIAAAACHCJdlgAEGcD_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=ABQIAAAACHCJdlgAEGcD_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&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
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 Яндекс.Карт на домашнем компьютере Вам будет необходимо установит локальный веб-сервер. Как это проще всего сделать я описал в специальной заметке в разделе База знаний.
Комментариев нет:
Отправить комментарий