With Storemapper, you can customize Google Maps Info Window pretty easily, 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.

Before you customize Google Maps Info Window, this is the default styling you'll see
Default styling of Google Maps Info Windows

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

This container has all the “bricks” that make up the Info Windows, and is divided in many parts, but for the sake of simplicity, we will talk about the most important ones:

.storemapper-iw-triangle-shadow

This element is behind the main triangle. If you want to hide it, simply add display: none.

#storemapper .storemapper-iw-layout .storemapper-iw-triangle-shadow {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 24px solid rgba(0, 0, 0, 0.0980392);
}

.storemapper-iw-triangle-inner

 

These are the base rules that you can modify if you want to customize the color of the bottom triangle.

#storemapper .storemapper-iw-layout .storemapper-iw-triangle-inner {
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px;
}

.storemapper-iw-content-shadow

Likewise the triangle shadow, you can use display: none if you aren’t a “shady” person 😉

#storemapper .storemapper-iw-layout .storemapper-iw-content-shadow {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
}

.storemapper-iw-content-bg

This is the element where you probably will apply your brand colors, specially the background.

#storemapper .storemapper-iw-layout .storemapper-iw-content-bg {
border-radius: 2px;
background-color: rgb(255, 255, 255);
top: 1px;
left: 1px;
}

As you can see, there are two positioning rules (top and left). By default, when .storemapper-iw-content-shadow is visible, they add an offset so the Info Window looks like it has a fading border.

Positioning offset that gives a sort of faded border

Usually, you won’t touch them unless you need to use a background color with some transparency (rgba), in which case you will need to add top: -2px (equivalent to the total offset from the top and bottom), otherwise you will see a small overlap between the content and the bottom triangle.

Change the top offset to -2px when using a background color with some transparency
Change the top offset to -2px when using a background color with some transparency

storemapper-iw-content

Here is where all the store details are placed (ie: address, phone number, 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

.storemapper-iw-close

As you can guess, this is the button that you click when you want to close the Info Window.

By default, it consists of a <div> element with an <img> inside, but in order to make it easier for you to customize we decided to hide the image and put an icon of our own as a background of the <div>.

This way you can replace the icon from your stylesheets by simply changing the background-image property.

#storemapper .storemapper-iw-close {
width: 10px;
height: 10px;
top: 10px;
right: 10px;
}
#storemapper .storemapper-iw-close > img {
display: none;
}
#storemapper .storemapper-iw-close {
background: url('/assets/gm-infowindow-close.png') no-repeat center;
background-size: cover;
}

Note: if you’re going to replace the close icon from Storemapper’s dashboard, you won’t be able to use a direct image URL, and in that case you should use base64 encoded data URI. For more information read this blog post about data URIs.

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