Having Info Windows in a Google Maps is a powerful way of displaying information about a specific point or object. Did you know that there are several kinds of them?
In this article I will show you how to add different kinds of Info Windows that appear when you click on a marker.
Content
- Basic Info Window
- Info window with tabs
- Info Window containing a Mini map
- Maximizing the Info Window
- Options
- Conclusion and further resources
Basic Info Window
The key method for opening an info window when clicking a marker is GMarker.openInfoWindowHTML(). It takes two arguments, first the text that will appear in the Info Window and secondly an optional object literal containing options you might want to use to configure the Info Window. To learn more about the available options, see Options further down the page.
In the examples for this article you have to click a marker to open the window. This is done by using the GEvent.addListener() method. I will not describe exactly how it works in this article but if you’re unfamiliar with it you can read more about it in the official documentation.
// Init a new map
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(56.87, 14.80), 11);
// Creating a new marker
var marker = new GMarker(new GLatLng(56.87, 14.80))
// Adding a click-event to the marker
GEvent.addListener(marker, 'click', function() {
// When clicked, open an Info Window
marker.openInfoWindowHtml('Some text');
});
// Add marker to map
map.addOverlay(marker);This code will result in an ordinary map showing a marker which, when you click on it, pops up an Info Window.
Info Window with Tabs
If you have a lot of information about each marker, more than you can fit inside a normal Info Window, you could use an Info Window with tabs. You simply define each tab as a GInfoWindowTab and add them to an array that you later on add to the marker using the openInfoWindowTabsHtml() method.
// Create an array that will hold the tabs
var tabs = [];
// Create tabs and add them to the array
tabs.push(new GInfoWindowTab('Tab 1', 'Content of tab 1'));
tabs.push(new GInfoWindowTab('Tab 2', 'Content of tab 2'));
// Add tabs to the InfowWindow
marker.openInfoWindowTabsHtml(tabs);The result is a tabbed Info Window.
Info Window containing a Mini map
The API features an easy method to open up a mini map over the area where the marker is located, showMapBlowup(opts?:GInfoWindowOptions). This method takes an object literal that have two possible parameters, InfoWindowOptions.zoomLevel and InfoWindowOptions.mapType. These lets you determine at what zoom-level the mini map should start and what map type it should show.
GEvent.addListener(marker, 'click', function() {
// When clicked, open an Info Window with a min map in it
marker.showMapBlowup();
});You never thought it would be this easy to do this, did you?
Maximizing the Info Window
If you have a lot of content to show in you Info Window it could be useful to let the user maximize it. This is easily done using the options maxContent and maxTitle. If you define these you will automatically get a maximize button in your window.
So to make this work just do like this.
marker.openInfoWindowHtml('Click the (+) to maximize me!', {
maxTitle: 'Maximized Title',
maxContent: 'Maximized content text.'
});When you first click the marker an ordinary info window will pop up. When you click the plus sign (+) in it, it will maximize.
Options
As I’ve mentioned earlier each of the methods that opens an Info Window takes an optional object literal with options. The properties you can use in it are defined in the GInfoWindowOptions class.
All properties doesn’t comply with all kinds of Info Window.
- selectedTab [number]
Determines which tab should be selected when opening an Info Window. Starts with number 0. - maxWidth [number]
Sets the maximum width of the info window. Note: From my observations it seems that the minimum value for this is 249 pixels. - noCloseOnClick [bool]
Sets if the info window should be closed when clicking inside the map. Default value is true. - onOpenFn [Function]
A function that is called after the info window is opened and the content is displayed. - onCloseFn [Function]
A function that is called when the info window is closed. - zoomLevel [number]
Determines what zoom level an opened Mini Map should have. Only applicable with showMapBlowUp(). - mapType [GMapType]
Determines what map type an opened Mini Map should have. Only applicable with showMapBlowUp(). - maxContent [string]
Determines what content should be showed when an info window is maximized. It can be either an HTML string or an HTML DOM element. - maxTitle [string]
Sets the title for the window when it’s maximized. It can be either an HTML string or an HTML DOM element. - pixelOffset [GSize]
Specifies a number of pixels to move the info window away from the current GLatLng.
How to use them
The options are passed to the method in an Object Literal. Here’s an example of using the maxWidth property when opening a basic Info Window.
marker.openInfoWindowHtml('Some text', {maxWidth: '250'});Conclusion and further resources
Info windows are a powerful way of displaying information about certain objects in a map. In this article I have showed you some of the basic ways to use the built in ones in Google Maps. I think you can go a long way with these techniques but if you have special needs there are third party extensions out there that you can use.
It’s beyond the scope of this article to describe how they work, but the first library to check out should be ExtInfoWindow, one of the open source utility libraries for Google Maps. You’ll find documentation and examples at Google Maps API Utility Library. Joe Monahan has also written some about it on the Google Maps API Blog in the article ExtInfoWindow 1.0: Ajax powered, CSS customization.
Mike William at Google Maps API Tutorial has described two other libraries in the tutorials Using the EWindow extension and Using the EBubble extension that also might be useful.
Happy coding!
My Google Maps book
If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com
February 5, 2009 at 10:13 pm
Nice huh!
GMaps API is so rich, I can even wonder the thousands of possibilities of use in web apps…
Praise GMaps, and praise you for the articles!
Keep up man!
February 7, 2009 at 12:34 am
Great! Can I link to this from the docs?
February 7, 2009 at 8:14 am
Pamela: Absolutely!
February 13, 2009 at 7:08 pm
How can I use openInfoWindowHtml and showMapBlowup both at a time?
Or is there any way that I can display information (which I am displaying on openInfoWindoHtml including maxCOntent also) on showMapBlowup, Is this possible?
Please advis
February 19, 2009 at 11:22 am
how to implement a mini map exactly not getting plz tell me in details…………
February 19, 2009 at 7:25 pm
kv: Have you looked at the demo of this? You should be able to just copy the code from that and get it working. Don’t forget that you need your own API-key.
February 25, 2009 at 4:47 pm
simply fantastic , works like a charm
March 1, 2009 at 9:40 pm
OK, how in the world do i get the info window to show on load?
I have one marker and I want the user to see the first info window when the map loads…. no clicking)
-?????
March 2, 2009 at 8:34 am
estebam: You could use the
GEvent.trigger()method to trigger the click event of the marker. You use it like this:GEvent.trigger(marker, 'click');Just make sure that you do this after the marker have been added to the map.
I’ve set up an example to illustrate how this is done.
March 3, 2009 at 5:59 pm
Does anybody know if there is a way to style the text within a maximized info window? I am using jQuery to extract things like ‘title’ ‘address’ and ‘info’ from an html document and setting them to variables that I am passing into the maximized info window content.
ex. Content.innerHTML=(title + address);
displays like this: Title12321 W. Edgewater Chicago,IL
I want to change the color of the font and ad breaks but nothing is working for me.
Thanks.
March 3, 2009 at 9:59 pm
Brian: It’s easy to give the content of the maximized window a certain style. Just wrap the content for the maximized infowindow inside of a
<div>and give it a class name. Then in your stylesheet you simply define it’s style.I’ve made an example page that you can check out to see how it’s done.
March 7, 2009 at 6:05 pm
Hi!
Great sites. I have one question about those info windows.
How you do for example map with maximizing windows:
– You need include html with pics in info window
– You need many of those maximizing info windows in same map
Some problems what I have found; Data goes in same window and doesnt show in separate info windows where those supposed to be. Thanks if you found answer.
Br, Z
March 9, 2009 at 8:44 am
zuputti: My guess is that the problems you’re having are due to how scope works in Javascript. Javascript has function scope, so try to break out the logic that creates each marker to a separate function. Then call that function for each marker (with info window) that you want to add to the map.
May 23, 2009 at 11:18 pm
Can I put marker.showMapBlowup() in one of the tab?
This is a great and very informational site 🙂
June 1, 2009 at 8:56 pm
Great tutorial and very easy to understand. I was looking for examples like these in the google maps reference and found nothing 🙁
Thanks so much!!
June 9, 2009 at 7:53 pm
Gabriel,
thank you for your blog, is very helpful.
I would like to know if it is possible to make info windows with multiple tabs in “My Maps” in Google Maps, ¿how to do that?
June 22, 2009 at 3:46 pm
I have created tabs in the info window when it is maximised but am unsure how to insert pictures into a specific tag, could you please help?
June 23, 2009 at 7:08 am
Ary: Each tab can contain HTML, so you simply provide the tab you want the picture in, with the corresponding HTML to show an image. For example like this:
new GInfoWindowTab('Tab with image', '<img src="/img/myImage.png" alt="" />')Another way of doing it is to instead of inserting the HTML directly into the tab, reference an existing HTML node in the document that has the content you want to show in the tab. Then it might look like this:
new GInfoWindowTab('Tab with image', document.getElementById('myHTMLNode'))I hope that this answers your question!
July 14, 2009 at 12:29 pm
HI!
One question: Is it possibile to show info window of KML file on load of KML file without “clicking on it”…
For this page:
http://igea.110mb.com/ekoregija/ekoregija_v2.2.3.html
Thanks..
Regards,
Bosti
August 5, 2009 at 1:30 pm
Hi,
how can this method be implementable with using a KML file?
Thanks.
August 29, 2009 at 8:32 pm
WoW… this is really well explained. Much better than the “official” site.
Have a question about the maximized windows.
I find that the info window is to small for what i want and the maximized info window is that bit to big.
Can the size of the of the maximized window be controlled either in height or width.
Would be very thankful for any help.
Thanks
Adrian
September 1, 2009 at 8:30 am
Adrian: I don’t think that you can control the height or width of the maximized info window without some serious hacking. But you could change the size of the non-maximized info window by setting styles that defines the dimensions on the content inside of it. Best practice is to set it using a class and defines the dimensions in a separate style sheet.
September 9, 2009 at 10:44 am
Thanks for that.
Its a shame you can’t control the maximized window because it is a really great feature. Never thought of controlling the standard info window via my style sheet and it really works a treat,
Thank you so much.
This is a seriously great site, hope you keep it up, it answers so many questions in a understandable fashion.
Thanks again
Adrian
September 15, 2009 at 8:32 am
the showMapBlowup() works great in V.2.
Does it work in V.3 and how ?? Please shed light!
September 15, 2009 at 12:30 pm
Ay: There’s no native method in V3 for doing a MapBlowup() but it’s entirely possible with a little bit of coding. That’s one technique I will show how to do in my upcoming book on V3 of the API.
October 5, 2009 at 6:43 am
Any way to position the infowindow relative to the position its pointing at so that the window can be made to appear “below” if the position is near the top of the map or “above” if the position is near the bottom of the map. This seems to happen in Google Earth, and would prevent the map from autoscrolling to get the infowindow on the displayed area.
October 6, 2009 at 8:55 pm
Geoff: Check out the pixelOffset property of the GInfoWindow object. It enables you to offset the InfoWindow from a given GLatLng.
Read about it in the documentation,
November 13, 2009 at 4:00 pm
I appreciate the initiative from google to enable us customise maps. However i have a problem i want to solve inside the info windows i have created.
I have added a couple of links in each info window. But now i need to maximise each info window when a user clicks on each link after which they may minimize and return to summary info window or close
December 10, 2009 at 9:18 am
I am trying to get clearbox 3 which is a picture display js it is like slimbox 2. I have it in a var for a inforwindow. click on the url and you get tabbed infowindows for each marker. the photo tab is the one. but mostly my question is if i need to trigger the js some how. the clearbox works fine as a stand a lone html page but not when it is in the gmap infowindow. any thoughts?
December 17, 2009 at 9:55 am
I use google map too. I don’t know if I info window has feature tabs. It is really cool
January 23, 2010 at 11:32 am
InfoTabWindow: I’like to display an image and some text in tab1, mapBlowUp in Tab2. How can I do that?Thanks.
February 11, 2010 at 7:44 am
hi.thsi sudhakar,
my Radio Frequency Engineer(RFE)
appreciate the initiative from google to enable us customise maps.
March 26, 2010 at 4:09 pm
i was wondering if there is a way to add several eventlisteners which open individual info windows filled with content from the array with a for loop to the created markers with the same loop?
thanks,Dj
April 3, 2010 at 3:52 am
is it possible to maximize marker popup by default ? not by clicking + button. marker.openInfoWindowHtml (… )
~ nick
April 26, 2010 at 2:01 pm
WoOW dude, I gotta hand to you … I have been cracking my skull open trying to get the Info Window to open and always got a problem … but after I got a look at this article things went totally smooth … thanks a lot!
May 28, 2010 at 8:46 am
I am trying to get my infowindows to close on a map click but the code :
marker.openInfoWindowHtml(‘Some text’, {noCloseOnClick: ‘false’});
Doesnt seem to work as described above. Any ideas anyone?
Greg
June 9, 2010 at 9:51 am
Hi,
How can I use openInfoWindowwith tap and showMapBlowup both at a timefor one marker.
here the scenario:
1- when user click on marker it should maximize the infowindows with tab
2- I need to have three different tab, one of them with show the mapblowup, the second one with show some text and photo and third one will show a video clip from YouTube.
please let me know if anybody can help me on this.
June 24, 2010 at 11:55 am
Is posibility have InfoWindowHtml to polygon or Tooltip ?
February 14, 2011 at 2:41 am
I was recommended this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You are incredible! Thanks!
February 28, 2011 at 10:05 pm
I am using gmap in drupal and want to use the above functionality. I assume that i have to add the code to a .js file??? If so which one?? Looks like its exactly what i am looking for just need a little guidance on where to edit and paste !!!!
Thanks
May 23, 2011 at 10:17 pm
excuse me but I was wondering if this tutorial work in the v3 of google maps?
May 23, 2011 at 11:19 pm
argenis: No I’m afraid not, it’s for v2. You can check out my article Google Maps API 3 – InfoWindows for some information on how to use InfoWindow in v3.
July 6, 2011 at 5:05 pm
Hello I am trying to get good maps to display the maxWidth to fill the maps but It keeps doubling the size of the maps width. Would you know how to help that problem so the max popup will display correctly?
Thanks
July 18, 2011 at 6:23 pm
i want to replace the code
$adsmanagermarkers .=”‘;
var adsm_infowindow”.$adsmanagermarker->id.” = new
google.maps.InfoWindow({
content: adsmanagerHtml”.$adsmanagermarker->id.”})
google.maps.event.addListener(adsm_marker”.$adsmanagermarker->id.”, ‘click’, function() {
adsm_infowindow”.$adsmanagermarker->id.”.openInfoWindowHtml
(map”.$module->id.”,adsm_marker”.$adsmanagermarker->id.”)});
google.maps.event.addListener(map”.$module->id.”, ‘click’, function(){
adsm_infowindow”.$adsmanagermarker->id.”.close();
});”;
with this code
GEvent.addListener(marker, ‘click’, function() {
// When clicked, open an Info Window that has a maximized state
marker.openInfoWindowHtml(‘Click the (+) to maximize me!’, {
maxTitle: ‘Maximized Title’,
maxContent: ‘Maximized content text.’
});
please help urgently required
July 20, 2011 at 8:03 am
any alternative in v3
July 27, 2011 at 8:40 am
Hello,
pls am having problem creating a Gmarker, where by participants can add information or
attributes to these marker. Thank you very much indeed.
October 7, 2011 at 4:05 pm
Where nice article!
I’m working on a WordPress-plugIn with GoogleMaps. I use tabbed info windows.
but there are some grafical problems: the info windows show up without tabs, the tab header shows up on top of the info window somewhere in the map, the right corners of the info window is missing.
Do you know how i could make it look correctly?
Have a look here: http://koeln-zu-fuss.de/?p=118
February 22, 2012 at 8:40 pm
How to set de minHeight of the box?
July 11, 2012 at 10:00 am
hello, the first i’m sorry for my english. I have a window with GinfoWindow an HTML form, and I want to get them information in this form. Some idea?
September 10, 2012 at 6:22 am
Can anyone please tell me how to open info window through url. Actually i am trying to open window in webview of ios .i am trying to open window through url
http://maps.google.com/maps?q=london&iwd=1, where iwd is the window parameter but it is not getting opened.
Kindly help me with this.
September 28, 2012 at 12:19 am
Thank you for your article! It was usefull, but i’d like to make a map where info windows are always shown (to see the name of my objects). Is there any way to do it?
September 28, 2012 at 11:06 am
Hi Alex. You should really look into Google Maps API 3 instead. Version 2 is abandoned by Google. Check out the article http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ which describes how to use InfoWindows in v3 and to do exactly what you want to do.
October 25, 2012 at 5:41 pm
automatically open info window on load:
infowindow.open(map, nameOfYourMarker);