SVG marker on Google Maps V3
Using Google Maps API v3, my ultimate intent is to create an arrow of a given length and angle, but for now, I am trying to create an SVG marker. I am using the Rich Market utility and the jquery.svg plugin. The following code creates the div
, but doesn't create the SVG. Suggestions? (I am not wedded to these libraries, but these are what I found so far).
<head>
<script type="text/javascript">
var map, marker;
function drawCircle(svg) {
svg.circle(15, 15, 10, {fill: 'none', stroke: 'red', strokeWidth: 3});
}
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="arrow"></div>';
$('.arrow').svg({onLoad: drawCircle});
return m;
}
function init() {
map = new google.maps.Map(document.getElementById('map'), {
开发者_如何学Go zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new RichMarker({
map: map,
position: new google.maps.LatLng(30, 50),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div()
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body><div id="map"></div></body>
The problem is in div()
function. Calling $('.arrow')
doesn't match the div that is being created because it hasn't been attached to the DOM node tree yet. You have to call it after the marker has been created.
Remove $('.arrow').svg({onLoad: drawCircle});
from div()
function and call it later.
function div() {
var m = document.createElement('DIV');
m.innerHTML = '<div class="arrow"></div>';
return m;
}
I guess the best way is to add listener for map's idle event at the end of init()
function.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new RichMarker({
map: map,
position: new google.maps.LatLng(30, 50),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div()
});
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.arrow').svg({onLoad: drawCircle});
});
}
精彩评论