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.
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>
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" }); }
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) { .... }); }); }