Search code examples
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markerspanes

how to place a marker over a overlay


I have a small Google maps page which i used to record the location of car accidents. If the accident is within 65 miles of the office it is treated differently. So i used the following code to draw a circle with a marker in the centre.

var s25 = new google.maps.LatLng(53.3664887, -1.236279);
var el=document.getElementById("map_canvas");
map = new google.maps.Map(el, myOptions);

 var marker = new google.maps.Marker({
    map: map,
    position: s25
});

 var sunCircle = {
    strokeColor: "#c3fc49",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#c3fc49",
    fillOpacity: 0.35,
    map: map,
    center: s25,
    radius: 104607.36 // in meters
};
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');

This works fine and the code i use to drop a new marker on the accident location works fine BUT only if the location is outside the circle. Google Maps won't allow me to drop a marker within the circle.

I've done a bit of research and found some info on Map Panes which sounds ideal but I'm not sure how to call this as when i do i just get an undefined error.

Any help would be appreciated :)


Solution

  • Set clickable:false on the circle. Or add event listeners for MouseEvents to the circle and use those to place the Marker.