Добавляем маркер на карту используюя API Google Maps

В предыдущих двух заметках об использовании APIGoogle Maps мы рассмотрели как создать простейшую карту и добавить на нее элементы управления.

В этой части мы научимся добавлять маркеры на карту для обозначения точек.

Возьмем код из предыдущей заметки «Добавляем элементы управления на карту Google Maps».

Повторяю его здесь.

<!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>Пример API Карт Google на языке JavaScript </title>

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

<script type=”text/javascript”>

function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(”map_canvas”));map.setCenter(new GLatLng(56.32811,44.0), 10);

map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());

}

}

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>

<div id=”map_canvas” style=”width: 500px; height: 300px”></div>

</body></html>

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

Для этого необходимо заменить строку map.addControl(new GLargeMapControl()); на map.addControl(new GSmallMapControl ());

Теперь добавим обозначение маркера на нашу карту.

В начале нам нужно узнать координаты точки,  в которую мы собираемся размещать маркер.

Это можно сделать зайдя на сайт Google Maps по адресу http://maps.google.ru

В строке поиска ввести нужны нам адрес, а затем получить ссылку на карту из которой необходимо взять два числа после параметра sll=  значения широты (Latitude) и долготаы (Longitude)соответственно. И значение уровня масштаба z=.

Подробнее см. «Показ местоположения на Google Maps без программирования».

После этого нужно добавить строку кода var point = new GLatLng(56.293557,43.99898);, где вместо чисел 56.293557 и 43.99898 нужно подставить ваши значения.

Для добавления маркера на карту служит строка map.addOverlay(new GMarker(point));

По умолчанию для обозначения маркера используется значок G_DEFAULT_ICON, но можно задать и пользовательский значок.

В качестве аргументов конструктора GMarker используются GLatLng и необязательный объект GMarkerOptions.

Маркеры являются интерактивными  элементами. По умолчанию они получают, например, события click и служат для вывода информационных окон в приемниках событий.

И так в наш код после задания элементов управления мы добавили две строки

point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));

Загрузим страницу с примером в браузере и мы увидим следующее
Пример карты с маркером
Привожу полный код примера:
<!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>Пример API Карт Google на языке JavaScript </title>

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

<script type=»text/javascript»>

function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(«map_canvas»));map.setCenter(new GLatLng(56.32811,44.0), 10);

map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());

point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));

}}

</script></head>

<body onload=»initialize()» onunload=»GUnload()»>

<div id=»map_canvas» style=»width: 500px; height: 300px»></div>

</body>

</html>

Теперь давайте попробуем добавить собственный значок в качестве маркера на карту.

Для создания значка нам потребуется два изображения – самого значка и его тень (значек для тени в нашем примере мы не используем).

Теневое изображение необходимо создавать под углом 45 градусов (вверх и вправо) от основного изображения, а левый нижний угол теневого изображения должен располагаться на одной прямой с левым нижним углом основного. Теневые изображения должны быть 24-разрядными PNG-изображениями с альфа-прозрачностью, чтобы передача границ изображения на карте была корректной.

Сначала мы должны определить сам новый значок .

Это делается следующим кодом.

var myexIcon = new GIcon();myexIcon.image = » files/cek_logo.png «;  —  задаем файл с изображением значка

myexIcon.iconSize = new GSize(38, 29); — размер значка

myexIcon.iconAnchor = new GPoint(19, 14); — смещение значка от точки

myexIcon.infoWindowAnchor = new GPoint(5, 5); — смещение информационного окна

После этого мы определяем объект GMarkerOptions

markerOptions = { icon:myexIcon };

И в строку map.addOverlay (new GMarker(point)); после point через запятую дописываем , markerOptions.

В результате у нас получается следующий код:

<!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>Пример API Карт Google на языке JavaScript </title>

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

<script type=»text/javascript»>

function initialize() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById(«map_canvas»));

map.setCenter(new GLatLng(56.32811,44.0), 10);

map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());

var myexIcon = new GIcon();myexIcon.image = «files/cek_logo.png»;

myexIcon.iconSize = new GSize(38, 29);

myexIcon.iconAnchor = new GPoint(19, 14);

myexIcon.infoWindowAnchor = new GPoint(5, 5);

markerOptions = { icon:myexIcon };

point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point, markerOptions));

}

}

</script></head>

<body onload=»initialize()» onunload=»GUnload()»>

<div id=»map_canvas» style=»width: 500px; height: 300px»></div>

</body></html>
Загружаем страницу в браузере и наблюдаемПример карты с марером пользователя

  • Гость: Спасибо большое за пример, все очень понятно написано, хорошо, что встречаются в сети такие добрые люди как вы!
  • Гость: Жаль, что не пишите, как добавлять маркер не по координатам, а по адресу. Не всегда ведь координаты заранее известны
  • Гость: Спасибо большое. А как добавить ссылку к маркеру?
  • Гость: Ссылку в балун? Или ссылку на метку с другой страницы или из меню на карте?
  • Гость: Да. Вы самый лучший "учитель". Вот только не нашел урока, как в основе этого кода добавить простейшее описание маркера при нажатии на него. Будьте добры подскажите урок...
  • Гость: Алексей, добавить событие на нажатие маркера достаточно легко .. Если просто надо вывести текст, то я пользуюсь следующей конструкцией ///// str = "<b>Заголовок</b>Просто нужный текст, и еще немного, и еще немного чтобы окошко растянулось как надо ... "; GEvent.addListener(marker, "click", function() { map.openInfoWindowHtml(coords, str); // делаем открытие окна при клике на маркер }); /////
  • Гость: Есть следующая ситуация: в коммерческой ЦМС выводится определённый список адресов, но изменять код я могу только после "body"... То есть идёт определённый список, к примеру: ул. Пушкина, дом... (сюда вставляю код нового маркера) и так 10 домов... Но маркера не добавляются, так как получается все новые маркеры должны присутствовать в самой функции initialize()... 2-а раза вывести список не получается, то есть вначале "ул. Пушкина, дом...", а потом сформировать функцию, тоже не получается.... Будут предложения??
  • Гость: niichi, будьте добры, объясните, пожалуйста, как с кликом и своей картинкой маркера. Бо у меня или своя картинка маркера или инфоокно при клике. Совместить их ну не как не получается. Дайте, пожалуйста, пример, а лучше допишите это. Бо я по примеру этого делаю. Заранее спасибо.
  • Гость: Большое спасибо!!! Проги выручил ))) Но у меня один вопрос, почему sll и z адреса показывают не точно местоположение?Вроде правильно скопировал из ссылки ((( Но по-любому спасибо админу!
  • Гость: Большое спасибо за уроки! Очень помогли на начальном этапе!