Июл

Карту на сайт? Легко!

Написал Максим Крентовский в Деятельность

Ну, что такое Google Maps API, думаю, объяснять не надо. Как ими пользоваться — давно и хорошо написано на сайте самого Google. Потому приведу простое и удобное решение для создания карты с большим числом объектов.

Итак, у нас есть список объектов. Желательно в чем-нибудь весьма удобном, типа XML. Например, такой

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="UTF-8"?>
<objects>
<item lat="55.737648" lng="37.620407" title="Туса на Большой ордне">
<info><![CDATA[Большая Ордынка, 10 
нереально мажорное место!]]></info>
</item>
<item lat="55.738459" lng="37.625403" title="Туса на Малой ордне">
<info><![CDATA[Малая Ордынка, 10 
нереально немажорное место!]]></info>
</item>
</objects>

Далее, используем средства по разбору XML, встроенные в Google Maps API: выдернем все описания объектов, создадим сои собственные маркеры и добавим их на карту. К маркерам подвесим события, показывающие облако с дополнительной информацией при наведении.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

GDownloadUrl("points.xml", function(data) {
var xml = GXml.parse(data);
var items = xml.documentElement.getElementsByTagName("item");

var iconItem = new GIcon();
iconItem.image = 'i/point.png';
iconItem.iconSize = new GSize(30, 58);
iconItem.iconAnchor = new GPoint(15, 58);
iconItem.infoWindowAnchor = new GPoint(15, 58);

$.GM.p.markers = [];

for (var j = 0; j < items.length; j++) {
var title = items[j].getAttribute("title");
var point = new GLatLng(parseFloat(items[j].getAttribute("lat")),
parseFloat(items[j].getAttribute("lng")));

$.GM.p.markers[j] = new GMarker(point, { icon: iconItem, title: title });
$.GM.p.markers[j].infoData = GXml.value(items[j].getElementsByTagName("info")[0]);

$.GM.p.map.addOverlay($.GM.p.markers[j]);
GEvent.addListener($.GM.p.markers[j],"mouseover", function() {
this.openInfoWindowHtml(this.infoData);
});
GEvent.addListener($.GM.p.markers[j],"mouseout", function() {
this.closeInfoWindow();
});
};
});

Разумеется, ворочать мышкой по карте в поисках любимой улицы пользователю будет неудобно, поэтому добавим небольшую возможность гео-поиска. Процедура будет выглядеть весьма тривиально — в Google уже об этом позаботились.

1
2
3
4
5
6

var geo = new GClientGeocoder();
geo.getLatLng("Russia Moscow " + $('#address').val(), function (point) {
if(point) {
$.GM.p.map.setCenter(point, 16);
}
});

Если все получилось правильно, результат будет соответствовать демо-карте. Для тренировки рекомендую использовать исходный код примера, там для удобства код представлен в виде класса jQuery. Только не забудьте получить собственный API key.

2 ком.

Игорь:

29.07.2008 в 6:42

Скажите, а можно сделать так, чтобы маркер мышкой добавлять? Если да, то подскажите, как?

mkrentovskiy
Там все достаточно нехитро: у объекта класса GMap2 есть событие click, которое инициирует вызов функции с двумя параметрами. Первый будет объектом, на который кликнули (в случае, если кликали действительно на объект), второй — координатами клика. Зная координаты, добавить новый маркер не представляет никакой сложности.

Примерно это выглядит так:

1
GEvent.addListener($.GM.p.map,"click", function(obj, point) { new GMarker(point, { icon: iconItem }); });

Код не тестировался, так что возможны ошибки.

Максим Крентовский

системный архитектор

E-mail / GTalk: mkrentovskiy@gmail.com

Skype: mkrentovskiy

Карту на сайт? Легко!

Тэги

RSS

Архив

Метадата