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.
02 |
var iconBlue = new GIcon(); |
05 |
iconBlue.iconSize = new GSize(12, 20); |
06 |
iconBlue.shadowSize = new GSize(22, 20); |
07 |
iconBlue.iconAnchor = new GPoint(6, 20); |
08 |
iconBlue.infoWindowAnchor = new GPoint(5, 1); |
09 |
var point = new GLatLng(26.88157422515243, 86.30859375); |
11 |
if (GBrowserIsCompatible()) { |
12 |
var map = new GMap2(document.getElementById("map")); |
13 |
map.setCenter(point,3); |
14 |
GEvent.addListener(map, 'click', function(overlay, point) { |
17 |
var marker= new GMarker(new GLatLng(lati, long),{draggable: false}); |
18 |
map.addOverlay(marker); |
19 |
var infoTabs = [ new GInfoWindowTab("Lat-Tab", "<h1> Latitude:</h1><br />"+lati), new GInfoWindowTab("Long-Tab", "<h1>Longitude</h1><br />"+long)]; |
20 |
marker.openInfoWindowTabsHtml(infoTabs); |
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]
Filed under - javascript, Others, tips and technique
Tags: Google Maps, javascript, latitude, longitude
