Спутниковые карты на Вашем сайте
Многие из Вас видели на некоторых сайтах удобные спутниковые карты, на которых отмечены или магазины или кинотеатры или маршруты. Причем карту эту можно двигать мышкой, приближать, удалять, изменять внешний вид. Вот, например, здесь. Хотелось бы Вам организовать у себя на сайте нечто подобное? Это гораздо проще, чем может показаться на первый взгляд.
На данный момент API спутниковых карт предоставляют три крупных игрока: Яndex , Google и Microsoft . Возможно, есть и другие сервисы, имеющие собственные географические и спутниковые карты, но я не уверен, что они предоставляют полноценный API для использования карт в своих веб-приложениях.
Если сравнивать карты от Google и от Яndex, так мне больше нравятся буржуйские карты, на мой взгляд, у них и оптика лучше, и охват территории – шире.
Лужники, как их видит Google
Лужники, как их видит Яndex
В сегодняшней статье я расскажу о том, как без особых хлопот внедрить в свой сайт такую карту.
Итак, вашим первым шагом будет посещение вот этого адреса http://code.google.com/intl/ru/apis/maps/ . В принципе там все написано, но если читать не хочется, то я расскажу, что делать дальше.
Итак, для начала вам нужно иметь аккаунт на google.com. Чтобы создать аккаунт, нужно зайти на https://www.google.com/accounts/NewAccount/, заполнить необходимые поля (причем, адрес почты может быть на любом почтовом сервере) и нажать «Создайте мой аккаунт». Затем на указанный адрес будет выслано письмо с подтверждением, в котором нужно пройти по предложенной ссылке. Поздравляю! Теперь у вас есть аккаунт google и вы можете переходить к следующему шагу.
Теперь на странице http://code.google.com/intl/ru/apis/maps/signup.html вам необходимо получить ключ API для работы с картами google. Здесь вы ставите галочку «Я ознакомлен и согласен с условиями и положениями», а в поле «URL-адрес моего веб-сайта» прописываете именно тот URL, на котором вы собираетесь использовать карты от google. Вводить весь путь к странице необязательно, достаточно указать доменное имя сайта. Если вы собираетесь для начала отлаживать тестовую версию на локальном веб-сервере, то можете со спокойной душой ввести в этом поле «http://localhost», вообще, вы можете на один google-аккаунт получить несколько API-ключей для работы с различными урлами. Не стесняйтесь, денег за это никто с вас не возьмет.
В результате этих операций вы получите длинную символьную строку, нечто вроде этого: ABQIAAAA0O8WpTAV74EwpOYF7DnLmxT2yXp_ZAY8_ufC3 CFXhHIE1NvwkxTqolPNY6dTVRyrkNKATBVv2oLB1A, которую сохраните пока в какой-нибудь текстовый файл, она вам еще пригодится.
На той же странице, где вы получили свой API, ниже можно увидеть текст JavaScript’а, который вы можете использовать на ваших страницах, на которых планируете отображать карты google. Он выглядит приблизительно так:
key=ABQIAAAA0O8WpTAV74EwpOYF7DnLmxT2yXp_ZAY8_ufC3CFXhHIE1N vwkxTqolPNY6dTVRyrkNKATBVv2oLB1A type=”text/javascript”></script>
Этот скрипт загружает сам движок maps.google. Его нужно вставить в секции <head> тех страниц, на которых вы планируете отображать карты.
Ну а вот собственно разметка страницы со встроенной в нее картой:
<!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=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
На этой странице присутствуют следующие элементы:
- DIV map_canvas, который собственно и будет содержать карту. Карта будет иметь ровно те размеры, что были заданы этому DIV’у до инициализации карты. Кстати, размер карты можно изменить и после инициализации, но при этом после изменения размера контейнера нужно вызвать для объекта map метод checkResize().
- Как видим в событии onload объекта BODY стоит вызов функции initialize(), которая объявлена выше.
- Функция initialize() сначала проверяет, совместима ли версия браузера пользователя с картами google и если все в порядке, то создается объект map типа GMap2, в конструктор которого в качестве параметра передается объект-контейнер, то есть тот самый DIV, о котором шла речь в пункте 1. Затем центр карты устанавливается в некоторые координаты, чтобы пользователь увидел перед собой не бескрайнее синее море, а некий осмысленный объект. В функцию setCenter передаются два параметра: координаты центра в виде объекта GlatLng(широта, долгота) и начальный масштаб карты, чем ближе это число у нулю, тем большая часть мира поместится на экране пользователя, чем больше это число тем подробнее пользователь увидит требуемый район карты. Максимальное значение масштаба 19.
- В методе onunload объекта BODY вызывается функция GUnload(), которая корректно освобождает все ресурсы браузера, занятые под отображение карт.
- И не забудьте вместо значения key=abcdefg вставить свой собственный API key, иначе работать ваша карта не будет.
Ну что ж. В результате выполнения этого урока вы создали веб-страницу с внедренной в нее картой google, которую вы можете просмотреть при помощи мыши, используя обычный Drag’n’Drop, изменение масштаба карты осуществляется с помощью двойного щелчка на карте: левой кнопкой – приближение, правой кнопкой – отдаление.
В следующем уроке мы узнаем, как сделать работу с картой более удобной, научимся менять ее вид (спутниковая, географическая) и кое-что еще.
В тему:
А если лень самому ковыряться с API Янедкс Карт – то можно воспльзоваться скриптом конструктором для яндекс карт – http://www.websmith.ru/script/16.php
Сергей, August 10, 2009 1:51 pm
“В следующем уроке мы узнаем, как сделать работу с картой более удобной, научимся менять ее вид (спутниковая, географическая) и кое-что еще.”
Пожайлуста подскажите как найти следующий ваш урок работы с картой.
Юрий Матвийчук, June 28, 2010 3:40 pm
Вот и получилось что обещанного три года ждут. Нету больше уроков по картам. 🙂 Читать Вам придется вот здесь http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html и читать придется по английски.
admin, June 28, 2010 3:57 pm
проверю на http://www.Tolyattinec.ru работает ЛИ ?
Oleg, November 1, 2015 1:09 pm