Change InfoWindow text and update radius inside it

Question

I have a InfoWindow where I want to display circle radius, however I have no idea how can I update the text whenever radius changes. Whenever I console log my marker I don't see the infoWindow content. Also is there circle listener that reacts instantly whenever the radius changes and not after the radius has changed?

    let marker = await new google.maps.Marker({
        position: {
          lat: sort.position.lat + 0.002,
          lng: sort.position.lon + 0.002,
        },
        map: map.value,
        draggable: true,
        optimized: false,
        zIndex: 999999,
      });

      marker.Circle = await new google.maps.Circle({
        center: marker.getPosition(),
        radius: 100,
        map: map.value,
        editable: true,
      });

      let infoWindow = new google.maps.InfoWindow({content: `${marker.Circle.radius}`});
      infoWindow.open(map.value, marker);

      marker.Circle.addListener("radius_changed", () => {
        console.log(marker)
      });

score -1 · Accepted Answer · answered Apr 13 '22 at 14:19

You can change the content of the InfoWindow

(you currently don't have much interesting content in the InfoWindow, it gets more complicated if you want to display more than just the radius)

infoWindow.setContent(""+marker.Circle.getRadius().toFixed(2));

proof of concept fiddle

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

  let marker = new google.maps.Marker({
    position: {
      lat: map.getCenter().lat(),
      lng: map.getCenter().lng(),
    },
    map: map,
    draggable: true,
    optimized: false,
    zIndex: 999999,
  });

  marker.Circle = new google.maps.Circle({
    center: marker.getPosition(),
    radius: 100,
    map: map,
    editable: true,
  });

  let infoWindow = new google.maps.InfoWindow({
    content: `${marker.Circle.radius}`
  });
  infoWindow.open(map.value, marker);

  marker.Circle.addListener("radius_changed", () => {
    console.log(marker)
    infoWindow.setContent(""+marker.Circle.getRadius().toFixed(2));
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* 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="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&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

Change InfoWindow text and update radius inside it

1 Answers1