I wanted to show different categories of information on one GMarker. That is I wanted to show different types of information on a Infowindow for a point on Google Maps. For that I used a tabbed info window, which helped me to show different data on each tabs. Here is the code of what I have done. I have shown the latitude and longitude of a placed clicked on the map on the tabbed info window. This is just the script part. The demo and download links are given below.
<script type="text/javascript">
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var point = new GLatLng(26.88157422515243, 86.30859375);
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(point,3);
GEvent.addListener(map, 'click', function(overlay, point) {
var lati=point.lat();
var long=point.lng();
var marker= new GMarker(new GLatLng(lati, long),{draggable: false});
map.addOverlay(marker);
var infoTabs = [ new GInfoWindowTab("Lat-Tab", "<h1> Latitude:</h1><br />"+lati), new GInfoWindowTab("Long-Tab", "<h1>Longitude</h1><br />"+long)];
marker.openInfoWindowTabsHtml(infoTabs);
});
}
}
</script>
Lets focus on the #17-#26 Lines of codes. Other Lines are already described on other posts. Please see the related post link below the post.
#17: Creates a GMarker on the point where clicked on the Map.
#18: Addes the GMarker over the Map.
#19: Initiates an array of tabsinfoTabs with GInfoWindowTab function with tabname and its innerHTML as parameters.
#20: Opens the infowindow calling openInfoWindowTabsHtml function and the array of tabs as parameters.
Comments
No Responses to “Tabbed Infowindow in Google Maps”