Advanced Marker Simple HTML

Create advanced markers using HTML and CSS

This example shows creating a new marker, replacing the default icon with custom HTML and CSS.

TypeScript

JavaScript

CSS

HTML

       
  
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

git clone -b sample-advanced-markers-html-simple https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start 

Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME .

git checkout sample-SAMPLE_NAME npm i npm start 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-18 UTC.

Источник

Google maps api marker css

With advanced markers you can use custom HTML and CSS to create markers with high visual impact, that can feature interactivity and animation. All AdvancedMarkerElement instances are added to the DOM as HTML elements, which you can access via the element property, and manipulate in the same way as any other DOM element. Because AdvancedMarkerElement is a DOM element, you can directly apply CSS styles to the default marker, and create custom markers completely from scratch using HTML and CSS.

Simple HTML marker

This example map shows creating a simple custom HTML marker:

View the source

The following example shows creating a new DIV element, assigning a CSS class and text content to the DIV, then passing the DIV as the value of AdvancedMarkerElement.content :

TypeScript

JavaScript

Interactive markers

This example shows creating a set of interactive markers that display fictional information on mouseover. Most of the functionality in this example is contained within the CSS.

View the source

TypeScript

JavaScript

Animated markers

This example creates the traditional «bounce-drop» animation using CSS and advanced markers. In the IntersectionObserver , it adds the drop CSS style. The IntersectionObserver sees when each marker enters the viewport, and adds the style. Then, the animationend event listener that the createMarker() function added to each marker removes the style.

View the source

TypeScript

JavaScript

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-18 UTC.

Источник

Create interactive markers using HTML and CSS

This example shows creating interactive markers using HTML and CSS.

TypeScript

JavaScript

CSS

HTML

        
  
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

git clone -b sample-advanced-markers-html https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start 

Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME .

git checkout sample-SAMPLE_NAME npm i npm start 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-18 UTC.

Источник

Google maps api marker css

Маркеры на карте обозначают выбранные вами местоположения. По умолчанию для маркера используется стандартный значок. Его можно заменить на другое, собственное изображение. Маркеры и значки – это объекты типа Marker . Собственный значок можно установить в конструкторе маркера или вызвав в маркере метод setIcon() . Подробнее о персонализации значков читайте ниже.

В более широком смысле маркеры представляют собой один из типов наложений. Подробнее о наложениях читайте в разделе Рисование на карте.

Маркеры – это интерактивные элементы. Например, они по умолчанию получают события ‘click’ . Поэтому, добавив к ним прослушиватель событий, вы можете показывать пользователям информационное окно со своим текстом. Если свойству маркера draggable присвоено значение true , пользователи смогут изменять положение маркера на карте. Подробнее о перетаскиваемых маркерах читайте ниже.

Добавление маркера

Конструктор google.maps.Marker получает один литерал объекта Marker options , в котором заданы исходные свойства маркера.

Следующие поля особенно важны и обычно задаются при создании маркера:

• position (обязательное) – задает значение LatLng , они же координаты начального положения маркера. Получить координаты LatLng можно, например, с помощью службы геокодирования.
• map (необязательно) – задает объект Map , на который следует поместить маркер. Если при создании маркера вы не укажете карту, то маркер не будет к ней прикреплен (и не будет на ней отображаться). Вы можете добавить маркер позже, вызвав для него метод setMap() .

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

TypeScript

JavaScript

Примеры кода

В примере выше был создан объект Marker со свойством 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 в конструкторе маркера, задайте в последнем аргументе конструктора объект <> .

Удаление маркера

Чтобы удалить маркер с карты, вызовите метод setMap() и передайте с его помощью аргумент null .

Учтите, что этот метод не удаляет маркер полностью, а просто убирает его с карты. Чтобы полностью удалить маркер, необходимо также задать для его объекта значение null .

Если вы работаете с разными маркерами, создайте массив для их хранения. Вы сможете удалять маркеры из массива, по очереди вызывая метод setMap() для каждого из них. Также маркеры можно удалить, убрав их с карты и присвоив переменной length значение 0 (чтобы удалить все ссылки на маркеры).

Кастомизация значков маркера

Вместо стандартного значка маркера в Google Картах можно использовать графический файл или векторный значок. Вы можете добавлять на маркеры текстовые ярлыки, использовать сложные значки для выделения кликабельной области карты и задавать очередность наложения маркеров на карту.

Маркеры с растровыми изображениями

Обычно переменная icon указывает, где находится изображение, которое нужно использовать вместо стандартного значка булавки. Для этого в свойстве маркера icon нужно задать URL изображения. Maps JavaScript API задаст нужный размер значка автоматически.

TypeScript

JavaScript

Примеры кода

Маркеры с векторными значками

Задать внешний вид маркера можно также с помощью векторного пути SVG. Для этого передайте литерал объекта Symbol с векторным путем свойству маркера icon . Собственный путь можно задать в объекте path или выбрав один из готовых путей в google.maps.SymbolPath. Свойство anchor необходимо задавать, чтобы маркер отображался корректно при изменении масштаба. Прочитайте, как создавать маркеры и ломаные линии с помощью векторных значков (символов).

TypeScript

JavaScript

Примеры кода

Метки маркеров

Метка маркера – это буква или число, показанное внутри маркера. На картинке рядом показан маркер с меткой в виде буквы В. Метки маркера можно задавать в виде текстовой строки или объекта MarkerLabel , содержащего текстовую строку и другие свойства метки.

При создании маркера вы можете задать свойство label в объекте MarkerOptions . Другой способ — вызвать метод setLabel() для существующего объекта Marker и установить для него метку.

В примере ниже маркеры с метками появляются, когда пользователь нажимает на карту.

TypeScript

JavaScript

Примеры кода

Сложные значки

Вы можете использовать сложные фигуры для очерчивания областей карты, которые должны реагировать на нажатие, и указывать, как значки должны отрисовываться относительно других слоев (порядок наложения). Для заданных таким образом значков в качестве свойства icon следует устанавливать объекты типа Icon .

Объекты Icon определяют изображение. Также они определяют размер ( size ), источник ( origin ) значка, например когда он берется из более крупного графического файла, и место расположения значка anchor (зависит от значения переменной origin).

Если в вашем маркере есть метка, то вы можете задать ее расположение в свойстве labelOrigin объекта Icon .

Примечание. Тени маркеров были удалены из Maps JavaScript API версии 3.14. Тени, заданные программным способом, будут игнорироваться.

TypeScript

JavaScript

Примеры кода

Преобразование объекта MarkerImage в Icon

В Maps JavaScript API версий ниже 3.10 сложные значки задавались как объекты MarkerImage . В версии 3.10 появился литерал объекта Icon , который заменил собой MarkerImage в версиях 3.11 и выше. Литералы 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));

Оптимизация маркеров

Вы можете сделать так, чтобы все маркеры отрисовывались как один статический элемент, и повысить за счет этого производительность карты. Это особенно полезно для карт с большим количеством маркеров. По умолчанию за оптимизацию отвечает Maps JavaScript API. Когда на карте много маркеров, эта функция начинает применяться при их отрисовке. Если какие-либо маркеры оптимизировать не удалось, Maps JavaScript API будет отрисовывать их без оптимизации. Отключайте оптимизированную отрисовку для анимированных изображений GIF или PNG, а также в случаях, когда нужно отрисовывать каждый маркер в виде отдельного элемента DOM. В примере ниже показано, как создать оптимизированный маркер:

var marker = new google.maps.Marker(< position: myLatlng, title:"Hello World!", optimized: true >);

Как открыть доступ к маркеру

Вы можете сделать маркер доступным, добавив прослушиватель кликов и присвоив переменной optimized значение false . За счет этого в маркер будет добавлена семантика кнопки, что сделает его доступным для команд клавиатуры, программ чтения с экрана и т. д. Чтобы открыть доступ к тексту маркера, используйте объект title .

В примере ниже первый маркер выделяется, когда пользователь нажимает клавишу табуляции. Затем между маркерами можно перемещаться нажатием кнопок со стрелками. Повторное нажатие клавиши табуляции вызывает перемещение к следующему элементу управления карты. Если маркер выбран и у него есть информационное окно, то его можно открыть кнопкой мыши, клавишей ввода или пробелом. После закрытия информационного окна снова выделяется связанный с ним маркер.

Источник