How to customize Google Maps Info Window (Popup)

With Storemapper, you can easily customize Google Maps Info Window, and in this article we’ll dive into the details of it.

Below you will see the default CSS that is being used on each element so you know what properties you should change in your own stylesheets.

Default Google Maps Info Window

Customize Google Maps Info Window

We hooked up a bunch of CSS classes to all your Info Windows so you can easily understand all the parts that compose them. They are:

• .storemapper-iw-container
• .storemapper-iw-inner
• .storemapper-iw-close
• .storemapper-iw::after

.storemapper-iw-container

Below are the CSS properties used by Google Maps for styling the Info Window container that you can overwrite to match your brand:

background-color: white;
border-radius: 8px;
box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
font-size: 13px;
font-weight: 300;
padding: 12px;

.storemapper-iw-inner

This is a <div> container that Google Maps adds to Info Windows but it doesn’t have any predefined styling. You can use your own CSS if you want though.

.storemapper-iw-close

Some default properties that you can alter:

background-position: center;
background-repeat: no-repeat;
background-size: 10px 10px;
border: none;
width: 16px;
height: 16px;
top: 5px;
right: 5px;

If your customizations can’t be applied, please try using the !important keyword to force your styling.

Important: To replace the close button icon you have to set its background-image property using base64 encoded data URI. For more information read this blog post about data URIs.

.storemapper-iw::after

This pseudo-element is used to display the small triangle/anchor below the popup and at the top of the map pin. You can change its background, shadow effects, width/height and positioning.

.storemapper-iw-content

Here is where all the store details are placed (eg: address, phone number, description, etc). The following is a list of all the CSS classes available for you to customize:

• .storemapper-logo
• .storemapper-popup-name
• .storemapper-popup-address
• .storemapper-popup-phone
• .storemapper-popup-desc
• .storemapper-popup-url
• .storemapper-maplink
• .storemapper-map-directions

Putting everything together

As you can see, Storemapper is a flexible tool that gives you plenty of room to adapt your store locator widget to match your brand.

Storemapper gives you great flexibility to customize Google Maps Info Windows

I hope you found this article about how to customize Google Maps Info Window useful.