CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3react-google-mapsreact-google-maps-api
anony mous
anony mous

Reputation: 1

Google Maps JavaScript API - How to add hover effects to POIs?

Using maps.google.com, if I hover over a POI (point of interest), the cursor changes to indicate a clickable item, the text changes color, and a pop-up is shown. For instance, consider the case of me hovering over "BCD Tofu House":

Screenshot of maps.google.com hover effect

How can I accomplish this with the JS Maps API? This seems like it should be a relatively simple thing to do, but I can't find anything in documentation or online examples on how this can be done.

For instance, the onMouseover events in the Map API only trigger when the Map is moused over, not individual POIs, so it doesn't help at all.

I've managed to implement a custom pop-up on click using the onClick property, like this (this is in React, but same principle applies to the JS API in general):

    onClick={(e) => {
      // disable default pop-up when clicking Google markers
      e.stop();

      const {
        detail: { placeId },
      } = e;

      if (placeId) {
        // use placesService to get details like name, address, and trigger state updates
        getPlaceByPlaceID(placesService, placeId, onPlaceSelect);
      }
    }}

but there doesn't seem to be an equivalent way of doing so with mouse hovering/movement.

Honestly, just changing the text color of the POI on hover (like Google Maps browser already does) without the pop-up on hover would be enough for my use case to help indicate clickability.

Upvotes: 0

Views: 64

Answers (0)

Related Questions