Урок - Добавление маркеров на карту c помощью Google Maps API 3

Главная » Курсы » Курс Google Maps 3, примеры использования. » Урок - Добавление маркеров на карту c помощью Google Maps API 3

Обучающий онлайн курс
Google Maps 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>