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

Watch for changes in position/radius in marker with circle

I am creating markers with circles on my map. Is it possible to detect in any way, if the marker & circle position/radius changes? I create many of markers with circles on my map and store them in map.value.circles array, whenever I move any of them they get updated within this array. But how can I detect this with js?

This is how circle is made.

     let marker = new google.maps.Marker({
          position: { lat: lat(), lng: lng() },
          label: `${labelName}`,
          map: map.value,
          draggable: true
        });
        marker.Circle = new google.maps.Circle({
          center: marker.getPosition(),
          strokeColor: "#3B82F6",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#3B82F6",
          fillOpacity: 0.35,
          radius: 100,
          map: map.value,
          editable: true
        })
        marker.Circle.bindTo('center', marker, 'position');

        map.value.circles.push(marker)
Solution

  • Per the documentation on the google.maps.Circle class, you can listen for the radius_changed and the center_changed events:

    radius_changed
    function()
    Arguments: None
    This event is fired when the circle's radius is changed.

    center_changed
    function()
    Arguments: None
    This event is fired when the circle's center is changed.

    marker.Circle.addListener('center_changed', function() {
  document.getElementById('center').innerHTML = "center="+marker.getPosition().toUrlValue(6);
});
marker.Circle.addListener('radius_changed', function() {
  document.getElementById('radius').innerHTML = "radius="+marker.Circle.getRadius().toFixed(2);
});

    proof of concept fiddle

    screenshot of resulting map after drag and resize

    function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: 37.09,
      lng: -95.712
    },
    mapTypeId: "terrain",
  });
  map.circles = [];

  let marker = new google.maps.Marker({
    position: map.getCenter(),
    label: "label",
    map: map,
    draggable: true
  });
  marker.Circle = new google.maps.Circle({
    center: marker.getPosition(),
    strokeColor: "#3B82F6",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#3B82F6",
    fillOpacity: 0.35,
    radius: 100,
    map: map,
    editable: true
  })
  marker.Circle.bindTo('center', marker, 'position');
  marker.Circle.addListener('center_changed', function() {
    document.getElementById('center').innerHTML = "center=" + marker.getPosition().toUrlValue(6);
  });
  marker.Circle.addListener('radius_changed', function() {
    document.getElementById('radius').innerHTML = "radius=" + marker.Circle.getRadius().toFixed(2);
  })


  map.circles.push(marker)
  map.fitBounds(marker.Circle.getBounds())
}
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Circles</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="center"></div>
  <div id="radius"></div>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>