Maps API v3 SVG marker anchor point
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Click on map to add markers...
<div id="map-canvas"></div>
CSS
body {
font-family: Arial;
font-size: 20px;
line-height: 40px;
}
#map-canvas {
height: 400px;
width: 500px;
}
JavaScript
var map;
var polyLine;
var polyOptions;
function initialize() {
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0, 0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
addPoint(event);
});
}
function addPoint(event) {
var icon = {
path: 'M0-163.2c27,0,49,21.7,49,48.5C49-87.9,0,0,0,0s-49-87.9-49-114.7S-27-163.2,0-163.2z M0.2-100.2 c8.4,0,15.1-6.7,15.1-15s-6.8-15-15.1-15c-8.4,0-15.1,6.7-15.1,15S-8.2-100.2,0.2-100.2z',
fillColor: '#FFF000',
fillOpacity: 0.6,
strokeColor: '',
strokeWeight: 0,
scale: 1 / 4
};
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon
});
var marker2 = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false
});
map.panTo(event.latLng);
}
initialize();