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:
- How to create a map with Google Maps API v3
- Add a marker with Google Maps JavaScript API v3
- InfoWindow on Google Maps API JavaScript v3
- Creating a map with multiple markers - Google Maps API JavaScript v3
Before you start this tutorial view a demonstration of the map or download the necessary code.
DEMO DOWNLOADResources 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.
<!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.
#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. */
}
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.
.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.
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.
/*
* 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.
.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.
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.
// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '115px'});
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)').
// 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.
// 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.
.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;
}
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.
// 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'});
});
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.
.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
}
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.
<div class="iw-bottom-gradient"></div>
Then you set the CSS rules for the iw-bottom-gradient class.
.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%);
}
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.
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.
Very cool... I notice that your example has some space in the infowindow. Can this be revised?
ReplyDeleteHi 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.
DeleteThis post has been updated to comply with some changes to the infowindow after the API update last February.
ReplyDeleteIts not working with multiple marker infowindow
ReplyDeleteIt does work with multiple markers.
DeleteHow can you remove the drop shadow on the tail?
ReplyDeleteyou reference the drop shadow with iwBackground.children(':nth-child(1)'), just give it a display: none
DeleteHello 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?
ReplyDeleteHello 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.
Deletethank you very much!
ReplyDeleteYou are welcome.
DeleteMany thanks, you made me save valuable time.
ReplyDeleteAnd your tutorial is very clear, congrat's
You are welcome. Always glad to help. Thanks.
DeleteGreat tut thank you! Seems like everything is working except trying to get the tail to the same style as the content div.
ReplyDeleteAny suggestions?
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow' : 'rgba(72, 181, 233, 0.6) 0px 1px 6px;'});
DeleteThis has no effect on the tail in my project.
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很好。:)
ReplyDelete谢谢 :)
Deletehi thank you for the tutorial but how can i make the info-window smaller when i Zoom out .
ReplyDeleteYou are welcome, thx. The standard infowindow doesn't scale on zoom out.
Deletethe close button has internet explorer error , the cursor icon shows it off , how to solve this problem?
ReplyDeleteWhich version of IE are you using?
DeleteI can't see iw-container in infow window
ReplyDeleteiw-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.
DeleteThanks 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 ;)
ReplyDeleteYou are welcome. Always glad to help. Thanks.
DeleteGreat Tutorial, Thank you very much :D
ReplyDeleteNow I have a great InfoWindow :D http://prntscr.com/8gss2i
You are welcome. Always glad to help.
DeleteThat's it! Great infowindow...
Thanks.
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?
ReplyDeletevar 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 ()
{
I am getting the error "Uncaught TypeError: $ is not a function" in the 'domready' listener for
Deletevar iwOuter = $('.gm-style-iw');
Sorry for the spam but I figured it out! Thank you for a great sample!
DeleteIt's all right! You are welcome. Always glad to help.
DeleteThanks.
Great article! Fast and good explanation ;) Neat code!
ReplyDeleteI guess you can't overcome the flashing every time you open the window?
Deletehey! great work man! this totally helped me. but there is a thing a can't resolve:
ReplyDelete- the infowindow's arrow goes to it's original position when I zoom the map.
have you encountered this before?
thanks.
Hi, thanks!
DeleteI 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?
Thanks for this great tutorial.
DeleteIf you open the infowindow, close, then reopen it, the arrow won't be well place (I use Chrome mac).
Thank you, great tutorial!
ReplyDeleteThanks for such a buetiful InfoWindow. It is really working. I am just a beginner in this google map. So this saved my time.
ReplyDeleteA 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
Very wonderful tutorial.
ReplyDeleteIs it possible to see the infoWindow's css file? so I can directly overwrite class or id with their name?
How do you make the div that you add style = none to smaller?
ReplyDeleteAt 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.
please the following link https://www.onthemarket.com/for-sale/property/york/?view=map
ReplyDeletethat is what i am trying to achieve.
The close button not working on device (chrome/android lollipop)
ReplyDeleteHi, I'm trying to do this, but i cant get rid of the white space in the last version API, can you please give some hint in how do this?
ReplyDeleteHello, thank you for the tips.
ReplyDeleteBut there is a bug on the map, if you click on a "default" marker, the default infowindow is not well displayed.
When info window just loaded, i can see default white background flash, is any way to avoid that?
ReplyDeleteMight have been worth mentioning that all these methods are undocumented and that this is most probably the worst thing to implement. Do NOT use this code. If you need a custom infowindow, look at the existing libraries https://code.google.com/archive/p/google-maps-utility-library-v3/wikis/Libraries.wiki that do it properly.
ReplyDeleteGreat information. Lucky me I ran across your website by chance. I have book marked it for later!
ReplyDeleteThank you
Hi, I followed your tutorial but button is not displayed as desired. After so many attempts, one can press finally. The button css is untouched, noting is changed. Please have look at https://www.aishwaryasolar.com/index.php/single_marker/2
ReplyDeleteand suggest me.
Hi, I like your study very much. but I caught my attention to something. Everything is normal on the computer, but on the Android and iPhone mobile devices, the close button works on the right side by about 10-20 pixels. I mean, it's being clicked from the original position before moving. I've studied it a lot but I can not find the solution. The same problem exists in your demo. Do you have an idea for the solution?
ReplyDeleteIt is very nice the result i had!
ReplyDeleteEverything is working perfect!
Very well written article. It will be helpful to anybody who employess it, as well as myself. Keep doing what you are doing – i will definitely read more posts.
ReplyDeleteSap Pp Training From India
Nice post.
ReplyDeletemachine learning online training
very nice tutorial,thanks. I have just one comment/question. How to avoid this infoWIndow blink when you click on marker? As soon as we hide background shadow and div and background white div our infowindow blinks for a second before it is displayed. thanks.
ReplyDeleteThanks.
ReplyDeleteGreat Post! Helped me a lot!
ReplyDeleteExcellent post. Please keep up the great work. You may check our website also 123.hp.com/envy 5531 setup
ReplyDeleteVery Great Idea, Hope every thing goes success and thank you for giving good post.
ReplyDeletemywifiext
Did they just canged the infowindow HTML?
ReplyDeleteSuddenly can't find any more the iwBackground element
This was working two days ago, but now it seems like something changed, and now I can't use this way to get rid of the borders! :(
DeleteSeems google changed layout of infowindow, I don't know if anyone has a fix to share. I'm getting the error:
DeleteCannot read property 'childNodes' of null
Feb 14, 2019 New Google API changed info window to a responsive model, and deprecated 3.3 or older.
ReplyDeleteThis code was GREAT while it lasted, but is no longer valid with current Google API version
ReplyDelete(It wasn't responsive anyway)
You can do pretty much what you want now by targeting the classes directly.
I'm using Bootstrap markup with only some minor tweaks take a look
https://www.420a3.com/ratings/420a3com-1
thank you! Old version or not, it just worked.
ReplyDeleteO google fez algum update não estou a conseguir utilizar :(
ReplyDeleteIt was really helpful. Since a few months it's appearance is changed. Would you please provide the fix?
ReplyDeletehttps://gooterling.blogspot.com/2019/03/battery-maintenance-software-for.html
thanks for the images that show how the changes you made effected Google Maps. This helps me understand what you did to cause the change. mercurycards.com login
ReplyDelete