CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
NthDegree
NthDegree

Reputation: 1341

Google Maps V3: Pass drag event on marker to map

I'm drawing multiple radius circles on my map with the following code:

function drawRadius(size){
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: size,
        strokeOpacity: 0.65,
        strokeWeight: 4,
        fillColor: '#FEFCF3',
        fillOpacity: 0.08,
        strokeColor: '#efe8b2'
    },
    map: map
  });
}

This method is called multiple times with different size parameters, it results in the the following image:

enter image description here

Unfortunately, I can't move the map anymore, because - as far as I can tell - the events are now fired on the circles and not on the map.

How can I fix this? I just want to be able to normally drag/move the map.

Thank you!

Upvotes: 0

Views: 53

Answers (1)

geocodezip
geocodezip

Reputation: 161404

If you don't need to click on the circles (markers), set clickable: false on them, that prevents the markers from receiving mouse events.

From the documentation:

clickable boolean If true, the marker receives mouse and touch events. Default value is true.

function drawRadius(size){
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    clickable: false,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: size,
        strokeOpacity: 0.65,
        strokeWeight: 4,
        fillColor: '#FEFCF3',
        fillOpacity: 0.08,
        strokeColor: '#efe8b2'
    },
    map: map
  });
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (var size = 100; size < 600; size += 100) {
    drawRadius(size);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function drawRadius(size) {
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    clickable: false,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: size,
      strokeOpacity: 0.65,
      strokeWeight: 4,
      fillColor: '#FEFCF3',
      fillOpacity: 0.08,
      strokeColor: '#000000'
    },
    map: map
  });
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Upvotes: 1

Related Questions