Is there a way to add an id to the div that is created when you add a marker to a google map?
The question is pretty self-explanatory. When a marker 开发者_StackOverflowis added to a google map, in the DOM it looks like it is actually a div wrapped around the marker image. It would make it a lot easier for me if those div's could be uniquely identified, e.g. I could grab individual markers on the map with getElementById() or similar. I'm using google maps v3.
Thanks.
Yes there is - you can create a custom Overlay class to include custom markup. Fortunately someone already had that idea and did it. Check out RichMarker and StyledMarker in Google Map Utility Libraries (at the bottom of the page) both allow you to put custom markup/css classes in marker markup.
If you just want to attach tooltips to the marker, you could also simply attach a custom property to the marker at creation (such as tooltip text or something) and add a mouseover event handler to read that property and do something with it.
Example:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Markers</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
//your tooltips
msg = ['Yeah Right', 'oompa oompa','I feel good']
var marker;
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({
map:map,
position: chicago,
title: "<h2>Sample Tooltip</h2>", //title can also be used for custom tooltips
myCustomIndex:2 //storing index of a tooltip
})
//if you have multiple markers pls read about event closures http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
//attach an event to the marker
google.maps.event.addListener(marker, 'mouseover', function() {
//you could also use the title property of the marker to hold the text of the tooltop
showFakeTooltip(marker.title)
//or you could show it by accessing a custom property
showTooltip(marker.myCustomIndex);
});
}
function showFakeTooltip(title) {
$(".fakeTooltip").html(title);
}
function showTooltip(index) {
alert(msg[index])
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px;height: 600px;"></div>
<div class="fakeTooltip"></div>
</body>
</html>
加载中,请稍侯......
精彩评论