Довольно известным является приложение "карты Google". Это вовсе даже не игральные карты, не пасьянс какой-нибудь,
а наоборот географические. Можно ввести адрес точки и получить карту её окрестностей, если она конечно есть в базе.
Иногда воникает желание отобразить карту прямо у себя на сайте, например если вы хотите чтобы пользователь лучше
понял как до вас доехать, а самому рисовать картинки неохота. Для такого случая есть специальное API. Попробуем с ним
разобраться.
Прежде чем воспользоваться API нужно получить к нему ключ, который будет связан с адресом сайта на котором предполагается
размещать карту. Сделать это можно тут. После получения ключа можно приступать собственно к написанию скрипта отображения
карты. В простейшем случае он будет таков:
<script src="http://maps.google.ru/maps?file=api&v=2&key=Полученныйключ&hl=ru" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map;
var marker;
//Эта функция будет вызвана при загрузке страницы
function load()
{
//Найдем на странице html элемент в котором будет размещаться карта
map = new GMap2(document.getElementById("map"));
// Создадим новый объект для геокодирования
geocoder = new GClientGeocoder();
//Получим информацию о местоположении и передадим её в функцию addToMap()
geocoder.getLocations("Санкт-Петербург, Политехническая ул., 29", addToMap);
}
//Эта функция добавляет точку на карту
function addToMap(response)
{
//Получаем переданную информацию
place = response.Placemark[0];
//Вычисляем координаты точки
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
//Центрируем по точке и задаем масштаб. Чем больше число (тут 15), тем крупнее масштаб
map.setCenter(point, 15);
//Добавляем кнопки для изменения масштаба
map.addControl(new GSmallMapControl());
//Добавляем кнопки для изменения типа карты (карта/спутник/гибрид)
map.addControl(new GMapTypeControl());
//Создадим маркер
marker = new GMarker(point);
//Добавим маркер к карте
map.addOverlay(marker);
//Добавим к маркеру пояснение
marker.openInfoWindowHtml("СПбГПУ");
}
//]]>
</script>
|
Для того чтобы скрипт отрисовки карты запускался при загрузке страницы, нужно добавить соответствующие атрибуты в
тэг body на странице.
<body onload="load()" onunload="GUnload()">
|
Кроме того в место на странице где должна быть карта нужно добавить тэг в котором она собственно и будет размещена.
Обычно это тэг div с заданной шириной и высотой
<div id="map" class="map" style="width: 450px;height: 250px"></div>
|
Если адрес единственный и постоянный, тогда вся эта морока ни к чему. Можно прямо на странице карт Гугла ввести адрес
места, и получить код для вставки на сайт. Но если адрес подгружается динамически, тогда имеет смысл воспользоваться API.
Например PHP скрипт читает из базы адрес, и этот адрес отображается на карте. Для этого в вышеприведенном коде нужно
видоизменить всего одну строку. Вместо жестко вбитого адреса
geocoder.getLocations("Санкт-Петербург, Политехническая ул., 29", addToMap);
|
поставим динамический ( в переменной $address хранится адрес прочитанный из базы)
geocoder.getLocations("<?php print($address); ?>", addToMap);
|
Ещё одна любопытная возможность которая открывается при использовании API, это отображение на карте сразу нескольких
точек. Для этого нужно узнать координаты каждой точки, и для каждой поставить маркер на карту. Изменим немного скрипт,
добавим к нему два массива, один будет содержать адреса точек, второй их названия, и счётчик для прохода по массиву:
var addresses = new Array("Политехническая ул., 29", "Гражданский пр., 28 ", "Гжатская ул., 10");
var names = new Array("СПбГПУ, Главное здание", "ИМОП", "Третья точка");
var counter=0;
|
Вызов функции добавления точки (addToMap()) поместим внутрь цикла (Название города вынесено отдельно чтобы не дублировать
его в каждом адресе):
for (i=0; i < addresses.length; i++)
geocoder.getLocations("Санкт-Петербург, "+addresses[i], addToMap);
|
Создание маркера нужно вынести в отдельную функцию, чтобы для каждого маркера был свой обрабочик. (Сделаем так чтобы при
наведении на маркер всплывало его название).
function createMarker(point,html)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function(){marker.openInfoWindowHtml(html);});
return marker;
}
|
Изменим немного саму функцию addToMap():
function addToMap(response)
{
//Определяем координаты точки. Тут всё как прежде.
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
//Берем название из массива. Возможна вставка html в текст всплывающего названия
htmlText="<b>"+names[counter]+"</b>";
//Создаем маркер новой функцией
marker=createMarker(point, htmlText);
//Как прежде, добавляем маркер на карту и добавляем пояснение
map.addOverlay(marker);
marker.openInfoWindowHtml(htmlText);
//Не нужно создавать кнопки управления каждый раз, достаточно одного.
if (counter==0)
{
map.setCenter(point, 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
//Не забываем продвинуть счетчик, чтобы в следующий раз было взято другое название.
counter++;
}
|
А вот так будет выглядеть результат:
Вот собственно и всё. Есть правда ещё Яндекс.Карты, но о них как нибудь в другой раз. |
