5 ways to customize Google Maps InfoWindow The standard Google Maps InfoWindow can be customized with these 5 easy steps.

5 ways to customize Google Maps InfoWindow

by September 19, 2014
google maps infowindow

The default Google Maps InfoWindow can be customized with these 5 easy steps.
A custom infowindow offers a differentiated style to your maps and it can and should be adapted to the overall look of your web site.

In this article I will explain how you can create an infowindow header, repositioning of its tail, change the infowindow size and background color, give a new look to the infowindow close button, rounded corners and a fade effect.
I will not explain how to create maps, markers and infowindows. This information is available to you in the following articles:

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Resources required

I use jQuery to make it easy to change the google maps infowindow style.
If you want you can download jQuery and use it from your own server, or you can use the Google CDN. In this example I am using jQuery v1.11.1.
In order to use jQuery you must include the jquery.js file in your js folder. The HEAD of your HTML file must be set as follows.

HTML /index.htmlen.marnoto.com
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
    
    <!-- use the existing file in the js folder -->
    <script type="text/javascript" src="js/jquery.js"></script></script>

    <!-- alternatively you can use the Google CDN -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></script>
    <script type="text/javascript" src="js/map.js"></script>
  </head>
  ...
  ...

The changes to the infowindow shown in this example are valid to versions 3.18, 3.19 and 3.20 of Google Maps API.
To make sure that your infowindow doesn't look weird in the future, you must force the usage of the version 3.20. To do that you have to make a little change to the URL that calls the API. You have to insert the option v=3.20.
Now your URL looks like this: "https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false".
The 3.20 version is the experimental version (since February 17, 2015). This means that the version will be available until November 2015.

You must keep track of the API updates to be sure that your infowindow doesn't look weird.

1. How to create an header to the infowindow

To highlight the title of the infowindow you can create a header with a different background color of the remaining content.
This is readily accomplished with some CSS rules.
Assuming that you have a div with id="iw-container", which brings together all of your content, and your header is a div with class="iw-title", you will attribute a blue color for the title background and a white for text.

CSS /style.cssen.marnoto.com
#iw-container  .iw-title {
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 22px;
   font-weight: 400;
   padding: 10px;
   background-color: #48b5e9;
   color: white;
   margin: 1px;
   border-radius: 2px 2px 0 0; /* In accordance with the rounding of the default infowindow corners. */
}
google maps infowindow

As you can see in the image, the background title doesn’t look very good with those margins. Here begins the change to the infowindow structure.
To remove the margins it is necessary to find the HTML element that wraps the infowindow. This element is a div with the following class ".gm-style-iw". Knowing this and using some CSS rules you can change the style of this div to remove the margins.

CSS /style.cssen.marnoto.com
.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   border-radius: 2px 2px 0 0;
}

Now the header and content occupy the left margin and the top but it doesn't occupy the entire infowindow. This happens because with the API update to version 3.18 a right margin is applied in the infowindow, not allowing their content to take its full width.

google maps infowindow

To remove that right margin it is necessary to remove the DIV that make up the white background and the shadow. The white background of the infowindow and its shadow are two distinct elements but both are part of the previous div to .gm-style-iw div. Knowing this and using jQuery and the event of google maps API google.maps.event.addListener(infowindow, 'domready', function(), we can change the style of this div to remove the right margin.

JavaScript /map.jsen.marnoto.com
/*
 * The google.maps.event.addListener() event waits for
 * the creation of the infowindow HTML structure 'domready'
 * and before the opening of the infowindow defined styles
 * are applied.
 */
google.maps.event.addListener(infowindow, 'domready', function() {

   // Reference to the DIV which receives the contents of the infowindow using jQuery
   var iwOuter = $('.gm-style-iw');

   /* The DIV we want to change is above the .gm-style-iw DIV.
    * So, we use jQuery and create a iwBackground variable,
    * and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
    */
   var iwBackground = iwOuter.prev();

   // Remove the background shadow DIV
   iwBackground.children(':nth-child(2)').css({'display' : 'none'});

   // Remove the white background DIV
   iwBackground.children(':nth-child(4)').css({'display' : 'none'});

});

To complete the customization of the infowindow it is necessary to apply the following CSS rules to the DIV with the class .gm-style-iw.

CSS /style.cssen.marnoto.com
.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}

Now it doesn't have the right margin and the title and content occupy the entire width of the infowindow.

google maps infowindow

With this change two problems arise, the close button and the tail of the infowindow are not in place. This leads us to take this opportunity to two more ways to customize our infowindow.

2. Repositioning the infowindow

The last major change given to the infowindow, by Google Maps developers, was the framing of the infowindow with its marker. Now the infowindow appears centered over the marker.
But things do not have to be so linear and you can reposition the infowindow in relation to the marker.
This change requires two actions, repositioning the infowindow relative to its marker and reposition the tail (arrow) of the infowindow.
To move the infowindow you have to create a reference to the div that encompasses all the elements that make up the infowindow. This div is found two levels above the .gm-style-iw div.
This div is referenced as follows.

JavaScript /map.jsen.marnoto.com
// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '115px'});
google maps infowindow

As shown in the previous image the tail of the infowindow does not point to its marker. It is necessary to move the tail to point to your marker.
The elements that make up the tail and its shadow are within the same div that groups the background of the infowindow.
All tail shadow elements are grouped in the first descendant of iwBackground. So, with jQuery you set iwBackground.children(':nth-child(1)'). The elements that make up the tail are the third descendant - iwBackground.children(':nth-child(3)').

JavaScript /map.jsen.marnoto.com
// Moves the shadow of the arrow 76px to the left margin 
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

// Moves the arrow 76px to the left margin 
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

Since you are working on the tail you can change the outline color to fit the contours of the infowindow and apply 1 to z-index to overlay the infowindow.

JavaScript /map.jsen.marnoto.com
// Changes the desired color for the tail outline.
// The outline of the tail is composed of two descendants of div which contains the tail.
// The .find('div').children() method refers to all the div which are direct descendants of the previous div. 
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

Now just move down the infowindow to frame with the tail.

CSS /style.cssen.marnoto.com
.gm-style-iw {
   width: 350px !important;
   top: 15px !important; // move the infowindow 15px down
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}
google maps infowindow

3. InfoWindow close button

The infowindow close button can take a little more highlight.
The following code repositions the button at the top right and creates an effect around the button.

JavaScript /map.jsen.marnoto.com
// Taking advantage of the already established reference to
// div .gm-style-iw with iwOuter variable.
// You must set a new variable iwCloseBtn.
// Using the .next() method of JQuery you reference the following div to .gm-style-iw.
// Is this div that groups the close button elements.
var iwCloseBtn = iwOuter.next();

// Apply the desired effect to the close button
iwCloseBtn.css({
  opacity: '1', // by default the close button has an opacity of 0.7
  right: '38px', top: '3px', // button repositioning
  border: '7px solid #48b5e9', // increasing button border and new color
  'border-radius': '13px', // circular effect
  'box-shadow': '0 0 5px #3990B9' // 3D effect to highlight the button
  });

// The API automatically applies 0.7 opacity to the button after the mouseout event.
// This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
  $(this).css({opacity: '1'});
});
google maps infowindow

If you want you can remove the Google Maps infowindow close button applying the following CSS rule: iwCloseBtn.css({'display': 'none'});

4. Rounded corners

In previous versions of Google Maps the infowindow had much more rounded corners. It is a matter of taste and trends.
This task is very simple, just apply 10px to the CSS rule border-radius of the .gm-style-iw.

CSS /style.cssen.marnoto.com
.gm-style-iw {
   width: 350px !important;
   top: 15px !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 10px 10px; // apply 10px to the bottom corners of the infowindow
}
google maps infowindow

5. "Fade" effect at the bottom of the infowindow

Finally we can apply a "fade" effect at the bottom of the infowindow. This effect suggests that there is more hidden content, calling for "scroll".
This effect is achieved by superimposing one div with gradient effect on the last line of content.

First of all you must create the DIV at the end of the HTML content of the infowindow.

HTML /index.htmlen.marnoto.com
   <div class="iw-bottom-gradient"></div>

Then you set the CSS rules for the iw-bottom-gradient class.

CSS /style.cssen.marnoto.com
   .iw-bottom-gradient {
      position: absolute;
      width: 326px;
      height: 25px;
      bottom: 10px;
      right: 16px;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   }
google maps infowindow

This concludes the 5 ways to customize the Google Maps InfoWindow. Each customization can be applied alone or in full.
The end result is not the "state of art" but rather an exemplification of a possible way to give new life to the InfoWindow.

An example in action

See the Pen 5 ways to customize the Google Maps infowindow by Miguel Marnoto (@Marnoto) on CodePen.


I invite you to leave a link in the comments and show your creativity with customizing infowindows.
All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.

Download the necessary files for this example

Miguel Marnoto

My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.

43 comments to ''5 ways to customize Google Maps InfoWindow"

COMMENT
  1. Very cool... I notice that your example has some space in the infowindow. Can this be revised?

    ReplyDelete
    Replies
    1. Hi Abram, thank you. I had not even noticed it. The last update of the API changed the behavior of the infowindow. I'm working on an updating to this article. It will be ready very soon.

      Delete
  2. This post has been updated to comply with some changes to the infowindow after the API update last February.

    ReplyDelete
  3. Its not working with multiple marker infowindow

    ReplyDelete
    Replies
    1. It does work with multiple markers.

      Delete
  4. How can you remove the drop shadow on the tail?

    ReplyDelete
    Replies
    1. you reference the drop shadow with iwBackground.children(':nth-child(1)'), just give it a display: none

      Delete
  5. Hello Miguel. Once the white space is removed on the right of the infowindow, the map can't be dragged where that space used to be implying it is still there but is transparent. Is there a way remove the space completely so you can drag the map to the right of the open infowindow?

    ReplyDelete
    Replies
    1. Hello Alexander. Until version 3.18 was much easier to customize the infowindow. After v 3.19 the html structure of the infowindow received new elements to be more responsive. But now it is harder to customize. I'm aware of that transparent area and I've been working on it, but I also want to keep it simple without to mess too much with the code of the API. I'll update this post very soon. If you are interested you can receive this and other updates trough my newsletter. Thanks for your interest.

      Delete
  6. Many thanks, you made me save valuable time.
    And your tutorial is very clear, congrat's

    ReplyDelete
    Replies
    1. You are welcome. Always glad to help. Thanks.

      Delete
  7. Great tut thank you! Seems like everything is working except trying to get the tail to the same style as the content div.
    Any suggestions?

    ReplyDelete
    Replies
    1. iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow' : 'rgba(72, 181, 233, 0.6) 0px 1px 6px;'});
      This has no effect on the tail in my project.

      Delete
    2. It's working in the demo page and in the Codepen example. I don't know why it's not working in your project. If you want you can share here a link to your project or you can use the Contact form to send me a message. So I can inspect your code and try to help you. Thank you.

      Delete
  8. hi thank you for the tutorial but how can i make the info-window smaller when i Zoom out .

    ReplyDelete
    Replies
    1. You are welcome, thx. The standard infowindow doesn't scale on zoom out.

      Delete
  9. the close button has internet explorer error , the cursor icon shows it off , how to solve this problem?

    ReplyDelete
  10. I can't see iw-container in infow window

    ReplyDelete
    Replies
    1. iw-container is the id of the DIV element that wrap all your content. Like this: var content = "<div id='iw-container... take a look at the codepen .js file example.

      Delete
  11. Thanks a lot for your tutorial. Few years back I was doing the same with the old API and when API 3 + jquery started to be the new standard, I couldn't find a script for multi markers and infowindows. Today I found both (script for multi markers and infowindows + your tutorial explaining how to custom them), so, I have all the cards at hands to upgrate my site without losing any goodies I loved ;)

    ReplyDelete
    Replies
    1. You are welcome. Always glad to help. Thanks.

      Delete
  12. Great Tutorial, Thank you very much :D

    Now I have a great InfoWindow :D http://prntscr.com/8gss2i

    ReplyDelete
    Replies
    1. You are welcome. Always glad to help.
      That's it! Great infowindow...
      Thanks.

      Delete
  13. This is really great! I would like to get this to work but I need a little help getting the outer area with the close "x" transparent. It looks like a smaller box is inside a larger one. Everything else looks great. Also the "x" button does not move to its new location for me. Below is the start of the code. Do you have any advice?

    var infowindow = new google.maps.InfoWindow({
    content: popupContent,
    disableAutoPan: false,
    maxWidth: 350
    });

    infowindow.open(map, markersArray[index]);

    google.maps.event.addListener(infowindow, 'closeclick', function ()
    {
    infoWindowClose(index);
    });

    google.maps.event.addListener(infowindow, 'domready', function ()
    {

    ReplyDelete
    Replies
    1. I am getting the error "Uncaught TypeError: $ is not a function" in the 'domready' listener for
      var iwOuter = $('.gm-style-iw');

      Delete
    2. Sorry for the spam but I figured it out! Thank you for a great sample!

      Delete
    3. It's all right! You are welcome. Always glad to help.
      Thanks.

      Delete
  14. Great article! Fast and good explanation ;) Neat code!

    ReplyDelete
    Replies
    1. I guess you can't overcome the flashing every time you open the window?

      Delete
  15. hey! great work man! this totally helped me. but there is a thing a can't resolve:
    - the infowindow's arrow goes to it's original position when I zoom the map.
    have you encountered this before?
    thanks.

    ReplyDelete
    Replies
    1. Hi, thanks!
      I don't know what is happening with your code. The arrow doesn't move in the example of the Demo page. I'd like to help you. Do you have any online example?

      Delete
    2. Thanks for this great tutorial.

      If you open the infowindow, close, then reopen it, the arrow won't be well place (I use Chrome mac).

      Delete
  16. Thanks for such a buetiful InfoWindow. It is really working. I am just a beginner in this google map. So this saved my time.
    A small problem when I used it with Bootstrap. The close button is not showing properly. only a small circle is showing. But it is doing the function of close. I think bootstrap is overriding a css. Any help or suggestions ? Thanks

    ReplyDelete
  17. Very wonderful tutorial.

    Is it possible to see the infoWindow's css file? so I can directly overwrite class or id with their name?

    ReplyDelete
  18. How do you make the div that you add style = none to smaller?

    At present if you try to move the map by clicking just outside of the infowindow you cant because the div is set to none and is still there.

    thanks in advance.

    ReplyDelete
  19. please the following link https://www.onthemarket.com/for-sale/property/york/?view=map

    that is what i am trying to achieve.

    ReplyDelete
  20. The close button not working on device (chrome/android lollipop)

    ReplyDelete