Maps API v3 SVG markers: random Tesla Model S
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
margin: 0; padding: 0;
position: absolute;
height: 100%;
width: 100%;
}
JavaScript
var map;
var polyLine;
var polyOptions;
var q = {};
function parse(x,k,v) { q[decodeURIComponent(k)] = decodeURIComponent(v); }
(location.hash||location.search).slice(1).replace(/([^=&]*)=([^&]*)/g, parse);
function initialize() {
var where, mapOptions = {
zoom: q.zoom || 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: where = new google.maps.LatLng(+(q.lat || 0), +(q.lng || 0))
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
scale: 1.5
};
polyOptions = {
strokeColor: '#0026b3',
strokeOpacity: 1.0,
strokeWeight: 1,
geodesic: true,
icons: [{
icon: lineSymbol,
repeat: '100px'
}],
zIndex: 10
};
polyLine = new google.maps.Polyline(polyOptions);
polyLine.setMap(map);
google.maps.event.addListener(map, 'click', function(event) {
addPoint(event);
});
if (q.lat && q.lng) {
addPoint({ latLng: where })
}
}
function addPoint(event) {
var path = polyLine.getPath();
path.push(event.latLng);
var icon = {
//path: "M70,25 45,50 69,74 69,120 71,120 71,74 95,50", // tesla:
rotation: (720 + (+(q.angle||0)) - 90) % 360,
path: "M" +...