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

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

ОТВЕТЫ

Ответ 1

Вот что я сделал в проекте, если вы хотите сделать DIY-решение.

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

Таким образом вы можете реально контролировать, как появляется ваше "infowindow" и что он будет содержать. Удачи.

Ответ 2

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

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

Ответ 3

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

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

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

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

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

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