Subesh.com.np

My Learnings Shared Regarding PHP,AJAX,Javascript,CSS

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.

[Download] [Demo]

Powered by Bookmarkify™