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