Tabbed Max Content Examples

This library provides a max info window UI that's similar to the info window UI for local business results on Google Maps. It lets a developer pass in an array of content that will be rendered in tabs in the maximized state of an info window.

Include Scripts

The first step is to include tabbedmaxcontent.js or tabbedmaxcontent_packed.js in your document header, after the Google Maps API has loaded. You can use the hosted release version if you do not want to download the script.

<script src="/path/to/tabbedmaxcontent.js" type="text/javascript"></script>
    

Open Max Tabbed Content

You can simply call GMap2.openMaxContentTabs() to open an window with tabbed maximized content, similar to how you can call GMap2.openInfoWindowTabs() in the core API.

function init(){
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(45.5, -122.7), 14);
  //...
  var min = 'regular map info:' + latlng;
  var sum = 'summary map info:' + latlng+ Math.random();
  var tabs = [
    new MaxContentTab('map tab0', 'map content0'),
    new MaxContentTab('map tab1', 'map content1'),
    new MaxContentTab('map tab2', 'map content2'), 
    new MaxContentTab('map tab3', 'map content3')];
  map.openMaxContentTabsHtml(latlng, min, sum, tabs, { maxTitle: "More Map Info" });
}

View example (maxtabs.html)

Using Dynamic Loading and Options

You can pass optional values like CSS properties, max title and the selected tab index when you open a maximized tabbed info window. You can also perform asynchronously load in content after the window is maximized.

The following example performs a reverse geocode and loads in a Street View panorama after the infowindow has been maximized, and then puts that content into the tabs:

function init(){
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(45.5, -122.7), 14);
  //...
  map.openMaxContentTabsHtml(latlng, latlng.toString(), summary, tabs, {
    maxTitle: "More Info",
    selectedTab: 1,
    style: {...}
  });
                  
  GEvent.addListener(map.getInfoWindow(), 'maximizeend', function() {
    geocoder.getLocations(latlng, function(response) {
    ....            
    });
    panoClient.getNearestPanorama(latlng, function(panoData) {
    ....
    });
  });
}

View example (ajaxmaxtabs.html)