Введение
Маркер выступает идентификатором местоположения на карте. По умолчанию используется стандартное изображение маркера. Маркеры могут обозначаться собственными изображениями, в этом случае их обычно называют "значками". Маркеры и значки относятся к объектам типа Marker. Собственный значок можно установить в конструкторе маркера или вызвав метод setIcon() для маркера. Более подробную информацию о настройке изображения маркера см. ниже.
В более широком смысле маркеры представляют собой тип наложения. Информацию о других типах наложений см. в документе Рисование на карте.
Маркеры предназначены для интерактивного взаимодействия. Например, они по умолчанию получают события 'click', поэтому вы можете добавить блок прослушивания событий для вывода информационного окна, отображающего настраиваемую информацию. Вы можете разрешить пользователям перемещать маркер по карте, установив для его свойства draggable значение true. Дополнительную информацию о перетаскиваемых маркерах см. ниже.
Добавление маркера
Конструктор google.maps.Marker принимает отдельный литерал объекта Marker options, указывающий начальные свойства маркера.
Следующие поля особенно важны и обычно задаются при создании маркера:
position(обязательно) – указывает значениеLatLng, определяющее начальное положение маркера. Одним из способов получения координатLatLngявляется использование службы Geocoding.map(необязательно) – указывает карту (Map), на которой помещается маркер. Если при создании маркера карта не указывается, маркер создается, но не прикрепляется к карте (и не отображается на ней). Маркер можно добавить позднее, вызвав его методsetMap().
В следующем примере показано добавление простого маркера на карту в районе Улуру в центральной Австралии:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
В примере выше маркер помещается на карту при его создании с помощью свойства map в параметрах маркера. Также маркер можно непосредственно добавить на карту с помощью метода setMap() маркера, как показано в примере ниже:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
Заголовок (title) маркера отображается как подсказка.
Если вы не хотите передавать какие-либо параметры Marker options в конструкторе маркера, вы можете передать пустой объект {} в последнем аргументе конструктора.
Просмотр примера (marker-simple.html).
Удаление маркера
Чтобы убрать маркер с карты, нужно вызвать метод setMap() и передать в него значение null в качестве аргумента.
marker.setMap(null);
Следует отметить, что при вызове этого метода маркер не удаляется. Метод просто убирает маркер с карты. Если маркер нужно удалить полностью, его следует убрать с карты и установить для самого маркера значение null.
При работе с набором маркеров нужно создать массив для их хранения. Если нужно удалить маркеры при использовании этого массива, можно вызывать метод setMap() для каждого маркера в массиве по очереди. Маркеры можно удалить, убрав их с карты и установив для параметра массива length значение 0, в результате чего будут удалены все ссылки на маркеры.
Просмотр примера (marker-remove.html).
Анимация маркера
Вы можете анимировать маркеры так, чтобы они динамически двигались в разных ситуациях. Чтобы указать способ анимации маркера, нужно использовать свойство маркера animation типа google.maps.Animation. Поддерживаются следующие значения свойства Animation:
DROP– указывает, что маркер должен как бы "падать" сверху на свою позицию при его первом размещении на карте. Когда маркер будет на месте, анимация прекратится, а значение свойстваanimationизменится обратно наnull. Этот тип анимации обычно задается при созданиимаркера.BOUNCE– указывает, что маркер должен подпрыгивать на месте. Подпрыгивающий маркер будет продолжать подпрыгивать, пока для его свойстваanimationне будет явно установлено значениеnull.
Вы можете инициировать анимацию существующего маркера, вызвав метод setAnimation() для объекта Marker.
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 59.325, lng: 18.070}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 59.325, lng: 18.070}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
Просмотр примера (marker-animations.html).
Если у вас много маркеров, их одновременное "падение" на карту может оказаться нежелательным. Вы можете использовать метод setTimeout(), чтобы распределить по времени анимацию маркеров. Пример этого показан ниже:
function drop() {
for (var i =0; i < markerArray.length; i++) {
setTimeout(function() {
addMarkerMethod();
}, i * 200);
}
}
Просмотр примера (marker-animations-iteration.html).
Изменение изображения маркера
Если требуется, чтобы на маркере отображалась буква или число, можно использовать метку маркера. Если же вам нужны более значительные изменения, вы можете определить значок, который будет отображаться вместо стандартного изображения маркера. При определении значка устанавливается ряд свойств, определяющих визуальное поведение маркера.
В разделах ниже описываются метки маркеров, простые значки, сложные значки и символы (векторные значки).
Метки маркеров
Метка маркера – это буква или число, которое появляется внутри маркера. Изображение маркера в этом разделе показывает метку маркера с буквой "В" на нем. Метки маркера можно указать в виде текстовой строки или объекта MarkerLabel, содержащего текстовую строку и другие свойства метки.
При создании маркера можно указать свойство label в объекте MarkerOptions. Также можно вызвать метод setLabel() для объекта Marker, чтобы установить метку для существующего маркера.
Следующий пример кода отображает маркеры с метками, когда пользователь нажимает какую-либо точку карты.
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Просмотр примера (marker-labels.html).
Простые значки
Обычно значок – это просто указатель на изображение, используемое вместо стандартного значка "кнопки" Google Maps. Чтобы указать такой значок, нужно установить URL изображения в качестве значения свойства icon маркера. Google Maps JavaScript API согласует размер значка автоматически.
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
Просмотр примера (icon-simple.html).
Сложные значки
Вы можете использовать сложные фигуры, чтобы отметить области, которые реагируют на нажатие, а также указать, как должны отображаться значки по отношению к другим наложениям (их порядок отображения). Для указанных таким образом значков для в качестве значений свойств icon следует устанавливать объекты типа Icon.
Объекты Icon определяют изображение. Также они определяют размер (size) значка, происхождение (origin) значка (например, если нужное изображение является частью более крупного изображения), а также точку привязки (anchor) значка (основанную на происхождении).
Если вы используете метку для собственного маркера, вы можете расположить метку со свойством labelOrigin в объекте Icon.
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -33.9, lng: 151.2}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -33.9, lng: 151.2}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
Просмотр примера (icon-complex.html).
Преобразование объектов MarkerImage в тип Icon
До выхода Google Maps JavaScript API версии 3.10 сложные значки определялись как объекты MarkerImage. Литерал объекта Icon был добавлен в версии 3.10, а начиная с версии 3.11 он заменил объект MarkerImage. Литералы объекта Icon поддерживают те же параметры, что и объект MarkerImage. Это позволяет легко преобразовать объект MarkerImage в литерал объекта Icon, удалив конструктор, заключив прежние параметры в фигурные скобки ({}) и добавив имя для каждого параметра. Например:
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
станет
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
Символы
Помимо растровых изображений маркеры поддерживают отображение векторных путей, называемых символами (Symbol). Для отображения векторного пути нужно передать литерал объекта Symbol с нужным путем в свойство icon маркера. Вы можете использовать один из готовых путей google.maps.SymbolPath или задать собственный путь с помощью системы обозначения путей SVG.
Дополнительную информацию см. в документации по символам.
Создание перетаскиваемого маркера
Чтобы пользователи имели возможность перетаскивать маркер по карте, в параметрах маркера нужно установить для свойства draggable значение true.
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});
Нужна помощь? Обратитесь в