clara.vrx.palo-alto.ca.us
Articles | Design | EDITOR| Works | Bespoke web
Net files | Fonts | Ips |MAPS| Hints
Infowindow
Google Maps JS API
Google Maps JS API

How to close and open InfoWindows on marker click using Google Maps JS API

When you click on a marker in Google Maps, it opens an infowindow. To close the infowindow, you must click on the "x" int he top right corner.

We find it a little too much work to move our mouse from the marker to the "x" button, especially if our infowindows are larger or different sizes.

To make it a faster experience for the user, we want to open and close infowindows by clicking on the map marker, while not needing to move our mouse to do it.

In the Android API the function hideInfoWindow() and showInfoWindow() close and open the infowindow, but in the JS API the same function does not exist, so we have written one.
We build a read state machine to determine if the window is open already or not, compare if marker clicked matches infowindow clicked by comparing Lat Lng coordinates, and then open/close.


Remember me, buy my shirts!
pop art
MBZ