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.
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:
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;
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.
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.
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.
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:
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.
I hope you found this article about how to customize Google Maps Info Window useful.