С этой заметки я начинаю рассказывать об использовании 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&v=2&sensor=true_or_false&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&v=2&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, которое позволяет задавать максимальную ширину окна.
Не смогла создать ключ 🙁
Смотрите заметку
Добрый день. Не могу найти раздел, где надо ввести домен и получить API ключ. У них,по моему, что-то изменилось. И по вашей ссылке тоже не смог найти. Подскажите пожалуйста.
С ув.Гоша
Написал небольшую заметку, по этому вопросу.
Огромное спасибо автору этой статьи за его труд. Очень помог с изучением основ работы с картами 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);
}
«;
}
?>
Еще раз, огромное спасибо автору статьи!
Извините, но рабочий код, который я пытался опубликовать выше был жестоко изуродован.
Если кому-то нужно, пишите на Mr.Ritm[собака]mail.ru с темой «гео-кодинг». Обязательно отвечу и пришлю то, что у меня получилось.
Они лучше, чем яндекс карты???