clara.vrx.palo-alto.ca.us
articles | bespoke web | design | EDITOR | works
IPS | CODE TIPS | examples
fonts | github | hints | MAPS | net files | freebsd
infowindow | scrollbar
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.

Infowindow - Unwanted scroll bars

style your scrollbar

toolbar: as of june 9, 2022, the scroll bar has disappeared from my pumpkin map. now i must put it back. it shows when a list of pumpkins is too long to view.
Remember me, buy my shirts!
pop art MBZ