↑ Краткий обзор Google Maps API 3. | ||||
Урок - Добавление маркеров на карту c помощью Google Maps API 3 | ||||
← Предыдущий урок Урок - Локализация карты Google Maps API 3.
|
Следующий урок → Урок - Добавление действия по клику на маркер в Google Maps API 3.
|
Маркеры создаются с помощью команды new google.maps.Marker():
var marker = new google.maps.Marker({
map: map,
position: centerLatlng,
title: 'Києво-Печерська лавра'
});
В команду new google.maps.Marker() передается массив параметров маркера.
Параметры маркера могут быть следующими:
- position, LatLng-объект - (обязателен) долгота и широта маркера
- map, Map-объект - (обязателен) объект-карта, на которой необходимо отрисовать маркер
- title, строка - текст всплыающей подсказки маркера
- clickable, логическое значение - указывает должно ли происходить какое-то действие при клике по маркеру
- icon, строка или MarkerImage-объект - указывает иконку маркера. Параметр icon может быть указан или строкой (URL), или объектом MarkerImage.
- shadow, строка или MarkerImage-объект - изображение-тень для иконки маркера. Параметр shadow может быть указан или строкой (URL), или объектом MarkerImage.
- shape, MarkerShape-объект - определяет кликабельную область вокруг иконки маркера. Принимает значение MarkerShape-объекта, содержащего координаты углов многоугольной кликабельной области.
- flat, логическое значение - определяет отсутсвие тени у иконки маркера. Если значение параметра flat равно true, то тенб у иконки не выводится.
В следующем примере устанавливается один маркер в центре карты:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function pageOnLoad() { var centerLatLng = new google.maps.LatLng(50.435132,30.55777); var mapOptions = { zoom: 10, center: centerLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), mapOptions); var marker = new google.maps.Marker({ map: map, position: centerLatLng, title: 'Києво-Печерська лавра' }); } </script> </head>
<body onload="pageOnLoad()"> <div id="map" style="width:400px;height:400px"></div> </body> </html>
↑ Краткий обзор Google Maps API 3. | ||||
Урок - Добавление маркеров на карту c помощью Google Maps API 3 | ||||
← Предыдущий урок Урок - Локализация карты Google Maps API 3.
|
Следующий урок → Урок - Добавление действия по клику на маркер в Google Maps API 3.
|