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