Google Maps API - How to position an Infowindow on the edge of a circle

Question

I have this code:

 circles[id]  = new google.maps.Circle({
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: color,
        fillOpacity: 0.35,
        map: map,
        center: center,
        radius: radius,
        editable: true
 });

 let km = radius / 1000;

 infoWindow = new google.maps.InfoWindow({
    content: km + " kilometer(s)"
 });
 infoWindow.setPosition(center);
 infoWindow.open(map);

With this code, i place the infowindow at the center of the circle.

Now, instead of placing that infowindow at the center of the circle, i'd like to place it on the right side or any of the Circle's edge point.

How can i do that? Your help will be greatly appreciated. Thanks!

Answer 1

If you want it on the right edge, one way would be to position the Infowindow using the circle center latitude, and the circle bounds northeast longitude.

See getBounds() and getNorthEast() methods.

 function initialize() { var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(0, 0) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var circle = new google.maps.Circle({ strokeWeight: 0, fillColor: "#FF0000", fillOpacity: 0.35, map: map, center: new google.maps.LatLng(0, 0), radius: 50000 }); var infowindow = new google.maps.InfoWindow({ content: 'Hello World' }); var centerLat = circle.getCenter().lat(); var rightEdgeLng = circle.getBounds().getNorthEast().lng(); infowindow.setPosition(new google.maps.LatLng(centerLat, rightEdgeLng)); infowindow.open(map); }

 #map-canvas { height: 180px; }

 <div id="map-canvas"></div> <.-- Replace the value of the key parameter with your own API key: --> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

If you want it on the circle's edge at a given heading (in degrees clockwise from north), you could use the computeOffset() method from the Geometry Library.

You need to include the library with your API call.

In the below example, the Infowindow is placed at a 45 degrees angle.

 function initialize() { var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(0, 0) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var circle = new google.maps.Circle({ strokeWeight: 0, fillColor: "#FF0000", fillOpacity: 0.35, map: map, center: new google.maps.LatLng(0, 0), radius: 50000 }); var infowindow = new google.maps.InfoWindow({ content: 'Hello World' }); var offset = google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), 45); infowindow.setPosition(offset); infowindow.open(map); }

 #map-canvas { height: 180px; }

 <div id="map-canvas"></div> <.-- Replace the value of the key parameter with your own API key: --> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize" async defer></script>