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

LVL 2
xoundboyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.