⚡ GMapsBook.com is crafted by Jozef Sorocin (🟢 Book a consulting hour) and powered by:

g-Xperts (Google Cloud & Business Profile Partner)
Spatialized.io (Elasticsearch & Google Maps consulting).
and Garages-Near-Me.com (Effortless parking across Germany)

<aside> 🔑 The materials presented in this chapter deal with low-level APIs. If you’re using a framework like React or Angular, make sure to check out the chapter on Working with Frameworks.

</aside>

Map markers represent points of interest (POIs). But these POIs likely contain more information than just the geo position:

If you’re building a store locator, you’ll want to display the stores’ precise address, opening hours, and overall rating.
If you’re implementing real estate search, you’ll want to preview the listing’s photos, beds & baths, and price.

Since this extra information won’t fit inside the marker label (pin), you have a few options:

You can go with a modal but modals interrupt the user’s workflow.
You can present the information in a side panel (just like maps.google.com itself) but side panels consume valuable screen real estate. More importantly, side panels aren’t SEO-friendly — unless clicking on the marker replaces the URL with the applicable href.
Or, you can connect marker clicks to info windows (also called info bubbles or popups). This way, the information remains geographically contextualized and the user’s workflow isn’t interrupted. Naturally, you can link the info window content to a dedicated, SEO-friendly permalink.

Scenario

I’m building a real estate search website. I already have a map containing custom markers. Now I need custom info windows to display the listing title, main photo, and price:

Screenshot courtesy of Garages-Near-Me.com

Also, I want my markers & info windows to be accessible to screen readers and keyboards:

https://storage.googleapis.com/gmaps-handbook/public/common/3/3.1/accessible-custom-google-maps-info-windows.mp4