How to get the current radius after zoom in or zoom out

Question

I've placed a marker(fillcolored with #333) at the center of the map that act as a radius. Initially the size of the marker was set to 151px. Here's the scenario, if the user click the zoom out button, the size of the marker remain as is but the radius captured on the map is greater. And if the user click the zoom in button, still the size of the marker remain the same but the radius been captured will become lesser. The reason why I did this is I want to know if the person's current location(GPS) was inside on that specific radius that he specified using his mobile app. My question is how can I get the current radius of the marker after the user zoom out or zoom in ? Any ideas about this problem? Thanks.

My Google Map API script:

function initGoogleMap() {  
  console.info('initGoogleMap');
  var latitude =  10.314241194743438;
  var longitude = 123.90536092883599;
  var zoom = 17;
  var latlng = new google.maps.LatLng(latitude, longitude);
  var map_options = {
    center: latlng,
    zoom: zoom,
    draggable: true,
    zoomControl: true,
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.5,
      fillColor: "#333",
      strokeOpacity: 1.0,
      strokeColor: '#CB0909',
      strokeWeight: 0, 
      scale: 151 // in pixels
    }
  });

  console.info('init zoom level: ', zoom);
  marker.bindTo('position', map, 'center');
}

initGoogleMap();

See attached demo of the problem: https://jsfiddle.net/sudogem/kkpt9t07/3/

Answer 1

If you know the radius of the circle in pixels you can compute the latitude and longitude of a point on the circumference using .fromLatLngToDivPixel and .fromDivPixelToLatLng, then use that to compute the radius of the circle in meters:

function computeRadius() {
    if (!overlay) return;
    var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
    var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y);
    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint);
    if (!edgeMarker || !edgeMarker.setPosition) {
        edgeMarker = new google.maps.Marker({
            position: pixelLatLng,
            map: map,
        });
    } else {
        edgeMarker.setPosition(pixelLatLng);
    }
    var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition());
    document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters";
}

updated fiddle

code snippet:

function computeRadius() {
  if (!overlay) return;
  var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
  var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y);
  var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint);
  if (!edgeMarker || !edgeMarker.setPosition) {
    edgeMarker = new google.maps.Marker({
      position: pixelLatLng,
      map: map,
    });
  } else {
    edgeMarker.setPosition(pixelLatLng);
  }
  var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition());
  document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters";
}


var marker;
var overlay;
var edgeMarker;
var map;

function initGoogleMap() {
  console.info('initGoogleMap');
  var latitude = 10.314241194743438;
  var longitude = 123.90536092883599;
  var zoom = 17;
  var latlng = new google.maps.LatLng(latitude, longitude);
  var map_options = {
    center: latlng,
    zoom: zoom,
    draggable: true,
    zoomControl: true,
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.5,
      fillColor: "#333",
      strokeOpacity: 1.0,
      strokeColor: '#CB0909',
      strokeWeight: 0,
      scale: 151 // in pixels
    }
  });
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);

  google.maps.event.addListenerOnce(map, 'idle', computeRadius);
  google.maps.event.addListener(map, 'center_changed', computeRadius);
  google.maps.event.addListener(map, 'zoom_changed', computeRadius);

  console.info('init zoom level: ', zoom);
  marker.bindTo('position', map, 'center');
}

google.maps.event.addDomListener(window, 'load', initGoogleMap);

/* Google Map */

#map_canvas {
  border: 1px solid #ccc;
  margin-top: 5px;
  width: 100%;
  height: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<div id="map_canvas"></div>
<div id="info"></div>