• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1990
  • Last Modified:

how to add a legend to a google map

I'm struggling to add a legend to a google map (code below)

I tried making the legend in a div...

      <div id="legend"><img src='legend.jpg' /></div>

... and z-indexing it in front of the map but couldn't make that work

now I'm looking at the google map API and have tried the GOverlay / addOverlay / HtmlControl methods but can't seem to make any work - Javascript isn't my strong point.

any help much appreciated, thanks


<div id="map"></div>
 
<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMenuMapTypeControl());
map.addMapType(G_PHYSICAL_MAP); 
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(20, 0), 2, G_PHYSICAL_MAP);
map.enableScrollWheelZoom();
//]]>
</script>

Open in new window

0
xoundboy
Asked:
xoundboy
1 Solution
 
Lolly-InkCommented:
There's an example of using HtmlControl here:
http://googlemapsapi.martinpearman.co.uk/infusions/google_maps_api/basic_page.php?map_id=7
Just view the source.
0
 
xoundboyAuthor Commented:
Ok, I checked out the example and managed to make it work now - my problem before was that I hadn't realised that the HtmlControl function was not an actual GMap2 method (like I said Javascript isn't my strong point).

The code I used is below:
/*	Google Maps API HtmlControl v1.1.2
	based on code posted on Google Maps API discussion group
	last updated/modified by Martin Pearman 20th August 2008
	
	http://googlemapsapi.martinpearman.co.uk/htmlcontrol
	
	This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 
	This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
 
	You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
 
function HtmlControl(html, options){
	this.html=html;
	this.isVisible=true;
	this.isPrintable=false;	
	this.isSelectable=false;
	if(options){
		this.isVisible=(options.visible===false)?false:true;
		this.isPrintable=(options.printable===true)?true:false;
		this.isSelectable=(options.selectable===true)?true:false;
	}
}
 
HtmlControl.prototype=new GControl();
 
HtmlControl.prototype.initialize=function(map){
	this.div=document.createElement('div');
	this.div.innerHTML=this.html;
	this.setVisible(this.isVisible);
	map.getContainer().appendChild(this.div);
	return this.div;
};
 
HtmlControl.prototype.getDefaultPosition=function(){
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7));
};
 
HtmlControl.prototype.selectable=function(){
	return this.isSelectable;
};
 
HtmlControl.prototype.printable=function(){
	return this.isPrintable;
};
 
HtmlControl.prototype.setVisible=function(bool){
	this.div.style.display=bool ? '':'none';
	this.isVisible=bool;
};
 
HtmlControl.prototype.visible=function(){
	return this.isVisible;
}
 
// add the HtmlControl to the map	
 
var html='<div id="legend"><img src="images/markers/legend.png"></div>';
legend=new HtmlControl(html);		
map.addControl(legend, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)));

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now