ExtInfoWindow Examples

Table of Contents

How-To

You can add the ExtInfoWindow to any Google map with a couple of lines of HTML code and some CSS.

  1. Include extinfowindow.js in your document header.

    <script src="extinfowindow.js" type="text/javascript"></script>
  2. Include some css style declarations in your document header.

    <style type="text/css">
      #simple_example_window{
        width: 300px;
      }
      #simple_example_window_contents{
        background-color: #FFF;
      }
      #custom_info_window_red_beak{
        width: 28px;
        height: 38px;
        background: url('../examples/images/corners/red_beak.png') top left no-repeat transparent;
      }
      * html #simple_example_window_beak{
        /* Alpha transparencies hack for IE */
        background-image:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../examples/images/corners/red_beak.png', sizingMethod='crop');
      }
      #simple_example_window_tl, #simple_example_window_tr, #simple_example_window_bl, #simple_example_window_br,
      #simple_example_window_t,#simple_example_window_l,#simple_example_window_r,#simple_example_window_b{
        background-color: #F00;
        height: 2px;
        width: 2px;
      }
    </style>
    
  3. Add the ExtInfoWindow to a marker on your map, similar to how you add an HTMLInfoWindow. Example:

      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(44, -96), 4);
      map.addControl(new GLargeMapControl());
    
      marker = new GMarker( new GLatLng(43, -120));
      GEvent.addListener(marker, 'click', function(){ 
        marker.openExtInfoWindow(
          map,
          "simple_example_window",
          "I'm some HTML content that will go in the initial example's ExtInfoWindow.",
          {beakOffset: 3}
        ); 
      });
      map.addOverlay(marker);
    

Simple Example

This is a bare bones example what you should need to use an ExtInfoWindow. The specific code relating to ExtInfoWindow are in bold.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>ExtInfoWindow Example: Simple Example</title>

  <link type="text/css" rel="Stylesheet" media="screen" href="css/simpleExampleWindow.css"/>

  <script type="text/javascript" 
  src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q">
  </script>
  <script src="../src/extinfowindow.js" type="text/javascript"></script>
  <script type="text/javascript">
  var map;
  function load() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map"));
  	  map.setCenter(new GLatLng(44, -96), 4);
      map.addControl(new GLargeMapControl());

      marker = new GMarker( new GLatLng(43, -120) );
      GEvent.addListener(marker, 'click', function(){ 
        marker.openExtInfoWindow(
          map,
          "simple_example_window",
          "I'm some HTML content that will go in the simple example's ExtInfoWindow.",
          {beakOffset: 3}
        ); 
      });
      map.addOverlay(marker);
    }
  }
  </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 900px; height: 600px" ></div>
  </body>
  </html>

View example (simpleExample.html).


Here is code from another example that uses a link to open an ExtInfoWindow with no markers.

 <a href="javascript:map.openExtInfoWindow(new GLatLng(38,-96),  'simple_example_window', 'Hello There!');">Click to Say Hello! </a>

View example (simpleExample2.html).

Using CSS Skins

Suffix Mapping

Each ExtInfoWindow is created from 10 pieces based on the supplied cssId and prefixes set in the code. The following table describes each suffix, what they mean, and what minimally is expected in CSS.

suffixmeaningminimum CSS
_tltop leftwidth, height
_ttopheight
_trtop rightwidth, height
_lleftwidth
_contentscenter contents areabackground-color
_rrightwidth
_blbottom leftwidth, height
_bbottomheight
_brbottom rightwidth, height
_beakbottom beak/pointer areawidth, height
_closeclose box sectionwidth, height

Suffix Diagram

The following diagram explains how using the cssId "demoWindow" would map to each part of the ExtInfoWindow
css diagram

Suffix Slicing in a PNG

Additionally, the following is a link to a layered PNG file to see an example of how to use slices to set up the above pieces. Save it to your computer and open in Fireworks to properly see how the above naming maps to your info window image.

demoWindow.png

Suffix Slicing in a PSD

Prefer Photoshop over Fireworks? Well the following is a link to a sliced PSD file to see how to set up the above pieces. Save it to your computer and open in Photoshop to properly see how the above naming maps to your info window image.

demoWindow.psd

Demo CSS Skins

The following example demonstrates how to use the above information and the cssId parameter, in the GMarker.openExtInfoWindow function, to open ExtInfoWindows with different skins on different markers, all on the same map. The styles are defined in separate stylesheets that are included in the document head.

View the example (cssSkins.html).

Basic Ajax Content

This demo illustrates how to use ajax to inject content into your ExtInfoWindow.

To utilize this feature you have to set the option ajaxUrl as part of the opt_opts when calling GMarker.openExtInfoWindow. In this example we ajaxUrl to be the relative path: "ajax/ajaxTest.html".

When the user clicks the marker, the ExtInfoWindow will display with the original HTML (in this case a string saying "Loading...") and kick off an Ajax request to the supplied url. The response content is returned as HTML and inserted into the contents section of the window.

The HTML contents returned will be:

<p>
  Content pulled from an Ajax request!
</p>
<p>
  This is from an HTML file, but imagine if you passed a url to a server 
  side page that renders HTML, like .php or .rhtml!  You can process dynamic 
  data on the fly without preloading on page load.
</p>
<p>
  Want to see a demo of the above statement? Go to 
  <a href="http://updates.orbitz.com" target="_blank">Orbitz Traveler Update</a> 
  and click any of the airports on the homepage map.
</p>

View the example (ajaxContent.html).

Basic Event Listening

This demo will illustrate how you can listen for new ExtInfoWindow events that fire on GMap2. The new events we will listen for, and write to GLog, are:

EventDescription
extinfowindowopenoccurs when opening an ExtInfoWindow
extinfowindowbeforecloseoccurs right before closing an ExtInfoWindow
extinfowindowcloseoccurs upon closing an ExtInfoWindow
extinfowindowupdateoccurs after completion of using ExtInfoWindow's ajax to update it's contents.
GEvent.addListener(map2, 'extinfowindowupdate', function(){GLog.write("extinfowindowupdate found");});
GEvent.addListener(map2, 'extinfowindowopen', function(){GLog.write("extinfowindowopen found");});
GEvent.addListener(map2, 'extinfowindowbeforeclose', function(){GLog.write("extinfowindowbeforeclose found");});
GEvent.addListener(map2, 'extinfowindowclose', function(){ GLog.write("extinfowindowclose found"); });

View the example (events.html).

Advanced: Using event listeners to create a tabbed info window

This demo will illustrate how you can manipulate Ajax returned content using the "extinfowindowupdate" event.

In this case, we will listen for "extinfowindowupdate" on GMap2. When you click on the maker on the map, the ExtInfoWindow is opened and kicks off an Ajax request to the local url "ajax/ajaxTabs.html". Upon completion of injecting that file's HTML contents into the info window, the map fires the "extinfowindowupdate" event. Our listener in this demo picks up that the event has occurred and begins to manipulate the returned HTML. By locating certain DOM ids and class names, we can then simulate a tabbed interface for the info window.

The exact HTML returned from our Ajax request will be:

<div id="" class="tabs">
  <div class="tabs_header">
    <div id="tab0" class="tab"><p class="contents">Tab 1</p></div>
    <div id="tab1" class="tab"><p class="contents">Tab 2</p></div>
  </div>
  <div class="tab_contents">
    <div id="tab0_content">
      <div class="title">Tab 1: intro</div>
      <p>
        This is the contents of Tab 1. We created this by listening
        for the "extinfowindowupdate" event on the GMap2 object and 
        manipulating the returned HTML. In this case, we manipulated 
        the returned HTML to creat the effects of tabs.
      </p>
      <p>
        Notice if you click Tab 2 above you will get some other 
        contents to appear in this area.
      </p>
    </div>
    <div id="tab1_content">
      <div class="title">Tab 2: tabs continued </div>
      <p>
        Well look at you, clicking tabs to get different content!
      </p>
      <p>
        Take note that all this content was originally pulled from an ajax 
        request so it won't bog down load time.
      </p>
      <p>
        Also note that when we set up the tabs we called ExtInfoWindow.resize().
        This helps in case each tab has a different height of it's contents.
      </p>
      <p>
        Where to go from here? How about adding effects. You could listen 
        for the extinfowindowupdate and set up your tabs to do transitional
        effects using something like <a target="_blank" href="http://script.aculo.us/">
        Scriptaculous</a> or <a target="_blank" href="http://moofx.mad4milk.net/">Moo.fx</a>.  
        It's all in your control now.
      </p>
    </div>
  </div>
</div>
  


The javascript function fired when "extinfowindowupdate" is found is:

var windowContent = document.getElementById("custom_info_window_red_contents");
var tabs = new Array(document.getElementById("tab0"),
document.getElementById("tab1"));
if( tabs.length > 0 ){
  var tabContentsArray = new Array(tabs.length);
  for( i=0; i < tabs.length; i++){
    tabContentsArray[i] = document.getElementById("tab"+i+"_content");
    if( i > 0){
      hide(tabContentsArray[i]);
    }
    tabs[i].setAttribute("name", i.toString());
    GEvent.addDomListener(tabs[i],"click",function(e){
      eventElement = e.currentTarget;
      var tabIndex = eventElement.getAttribute("name");
      for(tabContentIndex=0; tabContentIndex < tabs.length; tabContentIndex++){
        if( tabContentIndex == tabIndex ){
          show(tabContentsArray[tabContentIndex]);
        }else{
          hide(tabContentsArray[tabContentIndex]);
        }
      }
      map2.getExtInfoWindow().resize();
    });
  }
}
  

View the advanced example (eventExtInfoWindowUpdate.html).