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

Ответ 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