Hi,
So im trying to create a Google Maps with a legend. Right now i've got
the coding down for inserting the legend, thats all fine and dandy.
But i want to be able to add placemarks(preferrably multiple
placemarks at a time like you can when you create a map in google
maps) Any suggestions on how i would go about doing this? Here's the
code im using(its quite long):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1"/>
<title>Google Maps Legend</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function Legend(name, controlWidth, content, contentWidth) {
this.name = name;
this.content = content;
var container = document.createElement("div");
container.style.position = "relative";
container.style.margin = "5px";
var html = '<div style="background-color: white; width: ' +
controlWidth + '; position: relative; overflow: hidden; border: 1px
solid black; text-align: left; cursor: pointer;">' +
'<div style="color: black; font-family: Times New
Roman,sans-serif; font-size: 14px; padding: 0px 5px; border-width:
1px; border-style: solid; border-color: rgb(0, 0, 0) rgb(208, 208,
208) rgb(208, 208, 208) rgb(112, 112,
112); font-weight: bold; -khtml-user-select:none; -moz-user-
select:none;" unselectable="on">' +
name +
'</div>' +
'<div style="position: absolute; right: 4px; top: 4px; -
khtml-user-select:none;">' +
'<img src="http://maps.gstatic.com/intl/en_gb/
mapfiles/down-arrow.gif" style="display: block;">' +
'</div>' +
'</div>' +
'<div style="display: none; padding: 5px; color: black;
font-family: Arial,sans-serif; font-size: 14px; background-color:
white; position: absolute; right: 0px; border: 1px solid black; width:
' + contentWidth + '">' +
content +
'</div>';
container.innerHTML = html;
this.div = container;
var control = container.childNodes[0];
var legend = container.childNodes[1];
control.title = "Show legend";
control.onclick = toggle;
control.ontouchstart = touch;
function toggle() {
if (legend.style.display == "none") {
legend.style.display = "block";
control.title = "Hide legend";
} else {
legend.style.display = "none";
control.title = "Show legend";
}
}
function touch() {
if (arguments.length > 0 && arguments[0].preventDefault) {
arguments[0].preventDefault();
}
toggle();
}
}
function initialize() {
var map = new google.maps.Map
(document.getElementById("map_canvas"), {
zoom : 7,
center : new google.maps.LatLng(37.42228990140251,
-122.0822035425683),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
});
var html = '<div>' +
'<img src="http://gheymann.files.wordpress.com/2010/04/
google-maps.png">' +
' Test5' +
'</div><div>' +
'<img src="http://gheymann.files.wordpress.com/2010/04/
google-maps.png">' +
' Test2' +
'</div><div>' +
'<img src="http://gheymann.files.wordpress.com/2010/04/
google-maps.png">' +
' Test3' +
'</div><div>' +
'<img src="http://gheymann.files.wordpress.com/2010/04/
google-maps.png">' +
' Test4' +
'</div>';
var legend = new Legend("Legend", "120px", html, "250px");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legend.div);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Any help would be greatly appreciated.
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
