Как добавить пользовательскую подсказку для маркера карты Google?

Question

Мне нужно показать хорошую подсказку с изображением и текстом при наведении курсора на маркер Google Maps.
marker.setTitle - работает только с текстом, но не с html
У google maps api есть стандартное решение?
Можете ли вы предложить lib для создания всплывающих подсказок и чтобы они выглядели красиво?

Answer 1

Вот то, что я сделал с проектом, если вам нужно решение «сделай сам».

1. Создайте скрытый элемент div на своей странице с абсолютной позицией css.Убедитесь, что ваш DIV отображается в верхней части контейнера карты (z-index).
2. Привязка событий mouseover и mouseout к маркерам для запуска функции showDiv / hideDiv.
3. Когда мышь наводит маркер, получить мышью x, y позицию, соответственно установить верхнее и левое значения css для DIV и установить его css для отображения: block;
4. Когда мышь отсутствует, снова скрыть DIV.

Таким образом, вы можете реально контролировать, как выглядит ваше «информационное окно» и что оно будет содержать.Удачи.

Answer 2

Вы можете прослушивать событие mouseover на маркере и запускать infoWindow, чтобы появиться с этим событием.

После того, как у вас есть информационное окно, вы можете поместить картинкии текст в нем таким образом, который хорошо поддерживается API.

Answer 3

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

Прикрепить прослушиватели событий для указателей мыши, перемещений мыши и мыши на карте (или в определенных частях карты).Каждый из этих слушателей также дает вам аргумент, указывающий координаты мыши.

Используйте фиксированный / абсолютный стиль на CSS подсказки для позиционирования

при наведении мыши, вставьте подсказку в позиции курсора в DOM при перемещении мыши, обновите положение (слева и сверху) наmouseout, удалите всплывающую подсказку из DOM.

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

ссылка: https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458