Context Menu in Google Maps API

This article will describe how to develop a context menu component to integrate with Google Maps Api. The content of the menu of this article will provide basic functions, such as zoom-in, zoom-out, center map, and show altitude on sea level of a specific point (the data is provided by geonames.org). To show the altitude information we will use a TLabel - you can also just use an alert of course, but showing the result on map will be more clear. A TLabel allows you to embed any DOM object inside Google Maps. Even thou the developer is not mantaing this component anymore, it will come handy in many mashups - and the code can be easily updated if needed. The JS code of the menu component:

function ContextMenu(oMap){this.initialize(oMap);}

//Construct the DOM tree of the menu
ContextMenu.prototype.initLink = function(oMap){
	var that=this;
	a_link = document.createElement("li");
	a_link.innerHTML="<a href='javascript:void(0);'>&raquo;Zoom In  </a>";
	GEvent.addDomListener(a_link, 'click', function() {
		that.map.zoomIn();
		that.contextmenu.style.display='none';
	});
	this.ul_container.appendChild(a_link);
	
	a_link = document.createElement("li");
	a_link.innerHTML="<a href='javascript:void(0);'>&raquo;Zoom Out  </a>";
	GEvent.addDomListener(a_link, 'click', function() {
		that.map.zoomOut();
		that.contextmenu.style.display='none';
	});
	this.ul_container.appendChild(a_link);
	
	a_link = document.createElement("li");
	a_link.innerHTML="<a href='javascript:void(0);'>&raquo;Zoom Here  </a>";
	GEvent.addDomListener(a_link, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		that.map.zoomIn(point,true);
		that.contextmenu.style.display="none";
	});
	this.ul_container.appendChild(a_link);
	
	a_link = document.createElement("li");
	a_link.innerHTML="<a href='javascript:void(0);'>&raquo;Center Map Here  </a>";
	GEvent.addDomListener(a_link, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		that.map.panTo(point);
		that.contextmenu.style.display="none";
	});
	this.ul_container.appendChild(a_link);
	
	a_link = document.createElement("li");
	a_link.innerHTML="<a href='javascript:void(0);'>&raquo;Altitude  </a>";
	this.activeLabel=null;
	this.timer=null;
//This will manage the request for the altitude: once the result will be shown on a TLabel, and will disappear after 7 seconds.
	GEvent.addDomListener(a_link, 'click', function(){
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		var url = 'get_altitude.php?alt_lat='+point.lat()+'&alt_lng='+point.lng();	
		that.contextmenu.style.display="none";
		GDownloadUrl(url, function(data, responseCode) {
//This is the returned value if no data is available
			if(data=="-32768"){
				var retval = "N/A";
			}else{
				var retval = data + " m.";
			}
			if(that.activeLabel!=null || that.timer!=null){
				map.removeTLabel(that.activeLabel);
				window.clearTimeout(that.timer);
				that.timer=null;
			}	
			var label = new TLabel();
			label.id = 'tlabel_altezza';
			label.anchorLatLng =point;
			label.percentOpacity = 85;
			label.content = '<div style="width:6em;font-weight:bold;border:1px solid blue;background:#E5ECF9;color:#3300FF;padding:4px;">'+retval+'</div>';
			map.addTLabel(label);
			var cb = that.bind(function(){map.removeTLabel(that.activeLabel);that.activeLabel=null;that.timer=null;});
			that.timer=window.setTimeout(cb,7000);
			that.activeLabel=label;
		});
	});
	this.ul_container.appendChild(a_link);	
}
ContextMenu.prototype.bind = function(method) {
	var self = this;
	var opt_args = [].slice.call(arguments, 1);
	return function() {
		var args = opt_args.concat([].slice.call(arguments));
		return method.apply(self, args);
	}
}

//The object 'constructor'
ContextMenu.prototype.initialize = function(oMap){
	this.map = oMap;
	var that=this;
	
	this.contextmenu = document.createElement("div");
	this.contextmenu.style.display="none";
//CSS class name of the menu
	this.contextmenu.className="contextmenu";
	this.ul_container = document.createElement("ul");
	this.ul_container.id="context_menu_ul";
	this.contextmenu.appendChild(this.ul_container);	
	this.initLink();
	this.map.getContainer().appendChild(this.contextmenu);	

//Event listeners that will interact with our context menu
	GEvent.addListener(oMap,"singlerightclick",function(pixel,tile) {
		that.clickedPixel = pixel;
		var x=pixel.x;
		var y=pixel.y;
//Prevents the menu to go out of the map margins, in this case the expected menu size is 150x110
		if (x > that.map.getSize().width - 160) { x = that.map.getSize().width - 160 }
		if (y >that.map.getSize().height - 120) { y = that.map.getSize().height - 120 }
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
		pos.apply(that.contextmenu);
		that.contextmenu.style.display = "";
	});	
	GEvent.addListener(oMap, "move", function() {
		that.contextmenu.style.display="none";
	});
	GEvent.addListener(oMap, "click", function(overlay,point) {
		that.contextmenu.style.display="none";
	});	
}

Now you can add the context menu in your mashup by just one line: ('map' is the var containing the Google Maps object)

new ContextMenu(map);

As you can see, we use the GDownloadUrl method to get information from an external resource, passing as arguments the latitude and longitude of the clicked point. Once the request is completed, the result is shown in a TLabel for a limited time. We use the TLabel so that even if the user will move the map, the messaged will be positioned always in the correct position. The script managing the altitude requests is in PHP, and will fetch data from an external source. Of course you can also directly fetch the service provider from the JS code. The PHP code:

<?php
//error reporting should be set to 0
function getAltitude($lat,$lng){
	$url = 'http://ws.geonames.org/srtm3?lat='. $lat .'&lng='. $lng;
	$fp = fopen($url, 'r');
	if($fp){
		$contents = stream_get_contents($fp);
		fclose($fp);
		return	$contents;		
	}
}
if(isset($_GET['alt_lat']) && isset($_GET['alt_lng'])){
	echo getAltitude($_GET['alt_lat'],$_GET['alt_lng']);
}
?>

And finally, the CSS style that defines our menu:

div.contextmenu{
/*We will use a background similar to the Ms Apps to give a Windows like Look&Feel*/
background:#FFFFFF url(img/bkg.pngf) repeat-y scroll 0%;
border:1px solid #8888FF;
opacity:0.93;
filter: alpha(opacity=93)
}
div.contextmenu ul {list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
div.contextmenu ul li{
display:block;
padding:1px;
line-height:100%;
margin:0;
}
div.contextmenu ul li a {
border:none;
padding:3px 21px 3px 30px;
display:block;
text-decoration:none;
color:#233D6D;
font-size:11px;
font-family:tahoma,arial,sans-serif;
}
div.contextmenu ul li a:hover  {
color:#233d6d;
background:#c3daf9;
border:1px solid #8BB8F3;
padding:2px 20px 2px 29px;
}   

Remeber this is a basic layout, but it should show you that a Context Menu in Google Maps can be a useful tool to show extra functionalities without adding many buttons or difficult to read toolboxes.

For coding help and further support please use the forum.

This posting has no comments.