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

Автор: | 28.03.2009

В предыдущих двух заметках об использовании 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>
Загружаем страницу в браузере и наблюдаемПример карты с марером пользователя

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

  1. Владимир

    Спасибо большое за пример, все очень понятно написано, хорошо, что встречаются в сети такие добрые люди как вы!

  2. Oleg

    Жаль, что не пишите, как добавлять маркер не по координатам, а по адресу. Не всегда ведь координаты заранее известны

    1. admin Автор записи

      Ссылку в балун? Или ссылку на метку с другой страницы или из меню на карте?

  3. Алексей

    Да. Вы самый лучший «учитель». Вот только не нашел урока, как в основе этого кода добавить простейшее описание маркера при нажатии на него. Будьте добры подскажите урок…

  4. niichi

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

    /////
    str = «ЗаголовокПросто нужный текст, и еще немного, и еще немного чтобы окошко растянулось как надо … «;

    GEvent.addListener(marker, «click», function() {
    map.openInfoWindowHtml(coords, str); // делаем открытие окна при клике на маркер
    });
    /////

  5. Дмитрий

    Есть следующая ситуация:
    в коммерческой ЦМС выводится определённый список адресов, но изменять код я могу только после «body»…
    То есть идёт определённый список, к примеру:

    ул. Пушкина, дом…
    (сюда вставляю код нового маркера)

    и так 10 домов…
    Но маркера не добавляются, так как получается все новые маркеры должны присутствовать в самой функции initialize()…

    2-а раза вывести список не получается, то есть вначале «ул. Пушкина, дом…», а потом сформировать функцию, тоже не получается….

    Будут предложения??

  6. коля

    niichi, будьте добры, объясните, пожалуйста, как с кликом и своей картинкой маркера. Бо у меня или своя картинка маркера или инфоокно при клике. Совместить их ну не как не получается.
    Дайте, пожалуйста, пример, а лучше допишите это. Бо я по примеру этого делаю.
    Заранее спасибо.

  7. Lionel Messi

    Большое спасибо!!! Проги выручил ))) Но у меня один вопрос, почему sll и z адреса показывают не точно местоположение?Вроде правильно скопировал из ссылки ((( Но по-любому спасибо админу!

  8. Алекс

    Большое спасибо за уроки! Очень помогли на начальном этапе!

Добавить комментарий для коля Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *