ОПЫТЫ: Где были, мы не скажем, на Google Maps покажем! Как разместить карту путешествия на своем сайте

1. <marker name=”п.1 55.753/37.620” message=”Всем из вестно, что Земля начинается с Кремля!” lat=”55.75392” lng=”37.62001”/>

А текст странички принимает следующий вид:

1. var baseIcon = new GIcon();

2. baseIcon.iconSize=new GSize(20,20);

3. baseIcon.iconAnchor=new GPoint(10,20);

4. baseIcon.infoWindowAnchor=new GPoint(10,0);

5. Var gmarkers = [];

6. Var i = 0;

7. function createMarker(point,name,message,micon) {

8. var marker = new GMarker(point, {icon:micon, title:name});

9. GEvent.addListener(marker, “click”, function() {

10. Marker.openInfoWindowHtml(“<b>”+name+”</b><br>”+ message);

11. });

12. gmarkers[i] = marker;

13. i++;

14. Return marker;

15. }

16. GDownloadUrl(“t2006.xml”, function(data) {

17. var xml = GXml.parse(data);

18. var markers = xml.documentElement.getElementsByTagName(«marker»);

19. for (var k = 0; k < markers.length; k++) {

20. var point = new GLatLng(parseFloat(markers[k].getAttribute(«lat»)), parseFloat

(mark ers[k].getAttribute(“lng”)));

21. var name = markers[k].getAttribute(“name”);

22. var message = markers[k].getAttribute(“message”);

23. var micon = new GIcon(baseIcon);

24. var icon_number = k + 1;

25. micon.image = “http://www.vkph.com/t2006/i” + icon_number + “.png”;

26. var marker = createMarker(point,name,message,micon);

27. map.addOverlay(marker);

28. }

29. });

После загрузки всех данных из файла в память, массив записей перебирается в цикле (строки 19—28). Для каждого элемента осуществляется выборка и присвоение значений необходимым переменным. В строке 20 функции GLatLng передаются полученные значения lat и lng, результат присваивается переменной point (функция parseFloat служебная — используется для преобразования числового значения к плавающей точке).

Значения переменных name и message переносятся в соответствии с их «тезками» из XML-файла (21—22).

В строках 23—25 создается новый объект-иконка, наследующий свойства ранее объявленного baseIcon (23), со своей уникальной картинкой (25). В нашем случае картинки — это просто цифры, которые должны помочь посетителю странички понять, в какой последовательности нужно обходить метки на карте, но вы можете назначать любые картинки. В следующей строке вызывается функция createMarker, результат действия которой присваивается переменной-метке marker. В строке 27 очередная метка добавляется на карту (рис. 4).

Функция createMarker (26) выполняет те действия, что мы разбирали ранее: объявление метки с определенной иконкой (в нашем случае одна на все города — флаг Российской Федерации) и всплывающей подсказкой, а также обработчика мышиного клика для вывода комментариев (см. строки 8—15).

Выложив XML— и HTML-файлы на сайт и дав на них ссылку с главной странички, можете считать, что карта «кругокремлевского» путешествия готова (пример www.vkph.com/t2006/t2006_04.html).

Стартовая страница со всеми примерами, разобранными в статье, находится по адресу www.vkph.com/t2006. Вопросы, касающиеся описанной технологии, можно без стеснения задавать по указанному там адресу электронной почты.

Cправка

В отношении отладки кода и выявления возможных ошибок GMaps трудно назвать дружелюбным — сервис просто остановит выполнение кода на первой же ошибке, не выдав никакого сообщения. Поэтому внимательно следите за «чистотой» кода! Со своей стороны могу посоветовать использовать функцию GLog.write(var_name), которая позволяет выводить заданную информацию (например, имя переменной) во всплывающем окошке браузера. Расставляя вызовы этой функции в «контрольных точках» HTML-файла, вы сможете понять, где останавливается обработка и что происходит с вашими данными.

Оглавление