Working with Info Windows in Google Maps

Google Maps APIHaving 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

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!

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

About the author

Gabriel Svennerberg is an independent Interaction/UI Designer and Web Developer living in Sweden. When he's not busy building web application designed for humans, he writes about all things web on his site In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress.
  • http://www.heavyworks.net 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!

  • http://imagine-it.org Pamela Fox

    Great! Can I link to this from the docs?

  • http://www.svennerberg.com Gabriel Svennerberg

    Pamela: Absolutely!

  • 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

  • kv

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

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • Karthik

    simply fantastic , works like a charm

  • 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)

    -?????

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • http://learninggooglemaps.wordpress.com/2009/03/02/day-4-a-bit-more-of-kml-custom-icons-and-info-boxes/ 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. [...]

  • 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.

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • 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

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • Dee

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

    This is a great and very informational site :)

  • http://faviconstore.com 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!!

  • 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?

  • 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?

  • http://www.svennerberg.com Gabriel Svennerberg

    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!

  • http://golez.wordpress.com/ 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

  • Barton

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

  • 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

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • 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

  • Ay

    the showMapBlowup() works great in V.2.

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

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • 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.

  • http://www.svennerberg.com Gabriel Svennerberg

    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,

  • 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

  • http://137.229.80.178/janel/example_porcupine_clearbox.html 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?

  • http://blackberrythemewall.com deerawan

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

  • Sam

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

  • http://sudhakar.com M.sudhakar

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

  • dj

    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

  • nick

    is it possible to maximize marker popup by default ? not by clicking + button. marker.openInfoWindowHtml (… )

    ~ nick

  • Hawk

    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!

  • http://nelsonwhitewaterrafting.com/river_map.html greg_dd

    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

  • Ali

    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.

  • kremilek10

    Is posibility have InfoWindowHtml to polygon or Tooltip ?

  • http://www.digitalbugs.pl Darmowy katalog stron

    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!

  • Mitch

    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

  • http://www.tuvizio.com argenis

    excuse me but I was wondering if this tutorial work in the v3 of google maps?

  • http://www.svennerberg.com Gabriel Svennerberg

    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.

  • Chris

    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

  • niraj

    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

  • niraj

    any alternative in v3

  • http://www.survquest.com/abdul/2.html abdulwasiu

    Hello,

    pls am having problem creating a Gmarker, where by participants can add information or

    attributes to these marker. Thank you very much indeed.

  • Benedikt

    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