Даник Ковалевский aka DarkEol







Рифмы  |  Проза  |  Отчеты  |  Фото  |  Web  |  Гостевая  | Автор English / עברית

Статьи | Сайты | Скрипты | Ссылки

Использование карт Google на сайте

Довольно известным является приложение "карты 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++;
}


А вот так будет выглядеть результат:


Вот собственно и всё. Есть правда ещё Яндекс.Карты, но о них как нибудь в другой раз.







Valid XHTML 1.0 © DarkEol, 2002–2017 Valid CSS