Working with Info Windows in Google Maps

Google Maps API 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.

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.

Watch live demo

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.

Watch Live Demo

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?

Watch live demo

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.

Watch live demo

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!

Share this article

This article was published on Thursday, February 5th, 2009 in Tutorials.

Comments

1. February 5th, 2009 at 22.13 by Jan Seidl

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!

2. February 7th, 2009 at 0.34 by Pamela Fox

Great! Can I link to this from the docs?

3. February 7th, 2009 at 8.14 by Gabriel Svennerberg | Author comment

Pamela: Absolutely!

4. February 13th, 2009 at 19.08 by Dishaniti

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

5. February 19th, 2009 at 11.22 by kv

how to implement a mini map exactly not getting plz tell me in details…………

6. February 19th, 2009 at 19.25 by Gabriel Svennerberg | Author comment

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.

7. February 25th, 2009 at 16.47 by Karthik

simply fantastic , works like a charm

8. March 1st, 2009 at 21.40 by estebam

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)

-?????

9. March 2nd, 2009 at 8.34 by Gabriel Svennerberg | Author comment

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.

10. March 2nd, 2009 at 14.09 by Day 4 - a bit more of KML, custom icons and info boxes « Learning Google Maps API

[...] BTW, had a while working with Info Boxes (you know, those white Clouds) and there is quite a lot you can do with them, to get the ball-park idea have a look here. [...]

11. March 3rd, 2009 at 17.59 by Brian Goldsberry

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.

12. March 3rd, 2009 at 21.59 by Gabriel Svennerberg | Author comment

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.

13. March 7th, 2009 at 18.05 by zuputti

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

14. March 9th, 2009 at 8.44 by Gabriel Svennerberg | Author comment

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.

15. May 23rd, 2009 at 23.18 by Dee

Can I put marker.showMapBlowup() in one of the tab?

This is a great and very informational site

16. June 1st, 2009 at 20.56 by rob

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

17. June 9th, 2009 at 19.53 by Nestor Fuhr

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?

18. June 22nd, 2009 at 15.46 by Ary

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?

19. June 23rd, 2009 at 7.08 by Gabriel Svennerberg | Author comment

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!

20. July 14th, 2009 at 12.29 by Bosti

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

21. August 5th, 2009 at 13.30 by Barton

Hi,
how can this method be implementable with using a KML file?
Thanks.

22. August 29th, 2009 at 20.32 by Adrian Power

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

23. September 1st, 2009 at 8.30 by Gabriel Svennerberg | Author comment

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.

24. September 9th, 2009 at 10.44 by Adrian Power

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

25. September 15th, 2009 at 8.32 by Ay

the showMapBlowup() works great in V.2.

Does it work in V.3 and how ?? Please shed light!

26. September 15th, 2009 at 12.30 by Gabriel Svennerberg | Author comment

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.

27. October 5th, 2009 at 6.43 by Geoff

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.

28. October 6th, 2009 at 20.55 by Gabriel Svennerberg | Author comment

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,

29. November 13th, 2009 at 16.00 by Herman

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

30. December 10th, 2009 at 9.18 by jamie

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?

31. December 17th, 2009 at 9.55 by deerawan

I use google map too. I don’t know if I info window has feature tabs. It is really cool

32. January 23rd, 2010 at 11.32 by Sam

InfoTabWindow: I’like to display an image and some text in tab1, mapBlowUp in Tab2. How can I do that?Thanks.

33. February 11th, 2010 at 7.44 by M.sudhakar

hi.thsi sudhakar,
my Radio Frequency Engineer(RFE)
appreciate the initiative from google to enable us customise maps.

In usability we trust