Google Maps

Думаю, стоит заметить, что до написания этого проекта я ни разу не использовал карты google в работе. Я, конечно же, работал с сервисами на их основе, но никогда не использовал их сам.

Начало работы

Прежде всего идем на домашнюю страницу api гуглокарт. Чтобы использовать карты на своем сайте, вам необходимо зарегистрироваться и получить специальный ключ (он уникален для каждого домена). Стоит отметить, что если вы пока работаете на локалхосте, то ключ необязателен.

Далее нужно подключить скрипт google карт к вашей странице и вывести карту в определенный блок. Делается это следующим образом:

<!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>Гугокарты</title> 
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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(59.94, 30.3), 13);
 }
 } 
 </script> 
 </head> 
 <body onload="initialize()" onunload="GUnload()"> 
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 </body>
 </html>

Функция initialize() проверяет, справится ли браузер с картами, и, если да, то помещает карту в блок с id="map_canvas". Далее центр карты (map.setCenter(...)) ставится в точку c широтой 59.94 и долготой 30.3. Масштаб карты — 13.

Еще парочка моментов. На google картах есть подписи, язык которых по умолчанию зависит от языка вашего браузера. Если вы хотите, чтобы карты всегда были на каком-то одном языке и не зависили от языка браузера, то подключать google карту к странице нужно вот так (параметр hl отвечает за язык):

 <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdef&amp;hl=ru"></script>

Контролы

Есть дефолтные (их положение и внешний вид фиксированы), а есть свои.

Дефолтные можно подключить вот так (модифицированная функция initialize()):

 function initialize() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map_canvas")); 
 map.addControl(new GSmallMapControl()); // масштаб и перемещение карты
 map.addControl(new GMapTypeControl()); // переключение типов карты
 map.setCenter(new GLatLng(59.94, 30.3), 13);
 }
 }

Дефолтные контролы нас не устраивали, поэтому я стал искать, как сделать свои. В итоге я нашел вот такой клевый мануал по google картам на русском (перевод официальных мануалов от гугла):

Документация по Google Maps на русском
PDF, 960КБ

Среди методов изменения google карты есть и нужные нам:

map.getZoom() — значение текущего зума;
map.setZoom(zoomVal) — уставливает значение зума google карты равным zoomVal;
map.zoomIn() и map.zoomOut() соответственно приближают и удаляют карту.

Эти действия можно повесить на любой элемент вашей страницы, который потом можно стилизовать по своему вкусу.

Маркеры и иконки

Это отметки на карте. На любой маркер можно повесить любой действие. Вот так добавляется маркер на google карту:

var point = new GLatLng(point_lat, point_long);
 var marker = new GMarker(point);
 map.addOverlay(marker);

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

 var point = new GLatLng(point_lat, point_long);
 var marker = new GMarker(point, {draggable: true});

  GEvent.addListener(marker, "dragstart", function() {
   alert('Начали перетаскивать')
   });

  GEvent.addListener(marker, "dragend", function() {
   alert('Перетащили');
   });

  map.addOverlay(marker);

На месте алертов можно вставить свои функции.

Теперь будем ставить свои иконки на маркеры (гугловские тоже ничего, но свои-то лучше ;-). Определяем объект tinyIcon, который и будет отвечать за иконку маркера:

 var tinyIcon = new GIcon();
 tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; // путь к иконке
 tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; // к тени (если она вам нужна)
 tinyIcon.iconSize = new GSize(12, 20); //размеры иконки
 tinyIcon.shadowSize = new GSize(22, 20); // размеры тени
 tinyIcon.iconAnchor = new GPoint(6, 20); // "центр" иконки
 tinyIcon.infoWindowAnchor = new GPoint(5, 1); // точка привязки инфоокна

И чтобы сделать маркер с иконкой tinyIcon:

 markerOptions = { icon:tinyIcon };
 var marker = new GMarker(point, markerOptions);

Инфоокна

Опять же, можно использовать встроенные инфоокна (что проще) и свои (которые можно сделать по своему вкусу). Стандартные инфоокна вызываются вот так:

 GEvent.addListener(marker, "click", function() {
     marker.openInfoWindowHtml("Здесь текст окна в HTML");
   });

Мы решили пойти сложным и красивым путем и начали искать библиотеки для реализации собственных окон. В итоге нашли набор вспомогательных утилит для google карт и среди них ExtInfoWindow.

Штука довольно хорошая (хотя тяжелая) — все просто и понятно. После подключения скрипта к странице само окошко вызывается вот так:

 GEvent.addListener(marker, 'click', function(){ 
     marker.openExtInfoWindow(
       map,
       "simple_example_window", // это префикс классов css элементов инфоокна
       "Опять же ваш html.",
       {beakOffset: 3}
     ); 
   });

А что делать, если много маркеров?

Мы задали себе этот вопрос когда на карте Москвы у нас было около 700 точек. При таких количествах Ослик (и 6-ой, и 7-ой) вис в лучшем случае минуты на 2 (в худшем вис намертво), после чего дико тормозил. Сначала мы попробовали выводить точки по очереди (по несколько штук с таймаутом). Получилось красиво, но так же долго и фатально для Осла.

Затем я нашел на Хабре статью, в которой приводились разные способы оптимизации. Надо сказать, что все они, конечно, интересные, но довольно запарные.

В ходе поисков я нашел отличный скрипт под названием кластерер. Вот, что умеет эта хитрая штука:

группировка близко расположенных маркеров в один (миникальное кол-во в группе можно установить самому);
показ только тех точек, которые находятся в зоне видимости.

Посмотрим, как это добро использовать:

 var clusterer = new Clusterer(map);
 clusterer.AddMarker(marker, title); // это вместо map.addOverlay(marker);

Да, это все. Вы просто добавляете маркер не сразу на карту, а пропускаете его через кластерер.

Единственное, что я переделал в скрипте кластерера это событие при клике на сгруппированный маркер. По умолчанию выводится окошко со списком маркеров в этой группе. Это мне показалось не очень удобным, поэтому я сделал так, что при клике карта увеличивается на 1 деление и центр карты ставится на центр группы.

Ссылки в тему

Mapki.com — вики по google картам;
Уроки от Майка Вильямса — куча интересных примеров;
Блог Андре — много интересных записей.

Спасибо за внимание и до новых встреч!

Обычно я норовлю добавить что-то умное, типа "а вот такая фича еще делает это еще лучше и проще", однако тут добавить нечего - очень краткий, но емкий туториал, огромное спасибо, как раз планирую один сервис с гуглокартами! В букмарки, и страничку сохраню на всяк случай :))

kikaha, 4 октября 2008, 2:13

Слушайте, вот это вещь. Я конечно прбовал через PHP с гул-картами общаться, но через JS ещё интересней получается. Спасибо. Отлично написано.

GIN, 4 октября 2008, 12:06

Очень интересный проект! И познавательная статья! Спасибо!

Rodriguez, 8 октября 2008, 9:48

Отлично. Просто. Тэнькс!!!

Пацаны с Ботсада, 10 октября 2008, 8:06

Тоже приходилось работать с гуглокартами, только была маленькая проблемка решения которой я тут не нашел. Добавляя свои картинки на карту, при уменьшении и увеличении масштаба карты, размер картинок не меняется, а при малом размере карты это иногда выглядит очень не красиво. Как с этим можно бороться??

KELiON, 28 октября 2008, 14:27

KELiON, ты можешь отслеживать изменение масштаба карты соответсвенно с ним изменять размер картинок

Grin, 28 октября 2008, 18:49

Суперская статья! Спасибо огромнейшее.

ьпки, 28 октября 2008, 19:20

Респект за статью! Оказался здесь в поисках решения своей задачи, нужно определить центр карты пересечением линий, может вы подскажите как это реализовать

alexs, 10 ноября 2008, 13:42

alexs, расскажи подробнее про задачу, пока что не совсем понятно.

Grin, 10 ноября 2008, 13:54

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

alexs, 10 ноября 2008, 14:45

так сделай маркер, скажем в виде кружка, который бы всегда располагался точно по центру карты (при загрузке карты понятно как сделать, на окончание перетягивания карты вешаешь функцию, которая бы этот маркер ставила по центру)

Grin, 10 ноября 2008, 15:14

спасибо Grin, да, я обдумывал такой вариант...

alexs, 10 ноября 2008, 15:50

как работает поиск улиц ? по какому принципу, есть автоматизированная система, или много ручного гемороя ?

Earth, 10 ноября 2008, 17:35

Earth, что вы имеете в виду? Есть специальная функция, аргументом которой является строка-адрес (особых ограничений нет, но все же лучше задавать так: "страна, город, улица, дом). Или вы что-то другое имели в виду?

Grin, 10 ноября 2008, 17:56

Я делаю карту с нуля, тоисть есть спутник, на него рисую каждую улицу, название улици, из бази идет select по названию, но если я хочу делать select по конкретному адресу, то надо для каждого домика указивать его номер ?

Earth, 10 ноября 2008, 20:23

Мая в шоке! Так интересно.

za-games, 14 ноября 2008, 21:57

Grin, куда пропали?

Earth, 16 ноября 2008, 23:57

Earth, Я думаю, что вам все-таки придется для каждого дома указывать его номер вручную. Только зачем вам изобретать велосипед - чем плохи карты гугла или яндекса?

Grin, 17 ноября 2008, 10:21

Для города, которий я обрал для себя етих карт не существует (

Earth, 21 ноября 2008, 0:02

Спасибо за статью! Все действительно очень понятно и полезно:) Есть вопрос: нужно реализовать следующее при вводе в текстовое поле города должна появляться подсказка со списком городов (как реализовать подсказку понятно - ajax) а можно как-то список городов подгружать из базы Google Maps?

kate, 19 декабря 2008, 17:49

Kate, насколько я знаю, гугл просто так не дает список городов по запросу. Но можно посмотреть куда и как идет запрос когда печатаешь город в строку поиска на сайте карт Гугла

Grin, 19 декабря 2008, 18:47

Брат, спасибо тебе ну просто ппц, какое. Еще не испробовал, но судя по отзывам, ты еще тот отморозок! :) Еще раз спасибо. Буду делать серьезный проект, используя твои рекомендации.

j0hndoe, 4 января 2009, 15:33

Google Maps

Начало работы

Контролы

Маркеры и иконки

Инфоокна

А что делать, если много маркеров?

Ссылки в тему

Автор статьи: Павел Марковнин

Похожие статьи

Понравилась статья?

Комментарии

Спонсоры

Популярные статьи

Случайные статьи

Последние комментарии

Блогорол

Google Maps

Начало работы

Контролы

Маркеры и иконки

Инфоокна

А что делать, если много маркеров?

Ссылки в тему

Автор статьи: Павел Марковнин

Похожие статьи

Понравилась статья?

Комментарии

Поиск по сайту

Спонсоры

Популярные статьи

Случайные статьи

Последние комментарии

Блогорол