🏡 Home 📖 Chapter 👉 Next

⚡  GMapsBook.com is crafted by Jozef Sorocin and powered by:

<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.


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

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

  1. You can go with a modal but modals interrupt the user’s workflow.
  2. 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.
  3. 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.


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

Screenshot courtesy of Garages-Near-Me.com

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