Google Map Circle radius fit to map

Question

I am facing a problem with a size(radius) of the circle to be fitted in map, considering the map zoom can be from 1 to ~19, you can see also in the picture below, in my case I have button in top right corner Create Zone which displays the circle in the center of actual map and the form in sub menu, but the size of somehow should be dynamic base on zoom of the map.

enter image description here

Any help will be welcomed.

What does you code look like? Sounds like you want to do a map.fitBounds to the bounds of the circle. — geocodezip, Jul 04 '14 at 19:51
No, I was trying to fit the circle radius(size) to the map, as you can see in the image when I am creating the circle, the radius is not enough wide to fit the view port of the map(no matter what the zoom is), but I found a solution for this. — Sabri Aziri, Jul 05 '14 at 12:42

score 2 · Answer 1 · answered Jul 07 '14 at 11:21

I found solution which counts the width/height of the view port of the map, and simply mad height/2 which would be the ideal radius of the circle

$("#create_zone_trap").click(function(){
    //Set the circle in the middle of the screen
    circle.setCenter(new google.maps.LatLng(map.getCenter());

    var spherical = google.maps.geometry.spherical, 
    bounds = map.getBounds(), 
    cor1 = bounds.getNorthEast(), 
    cor2 = bounds.getSouthWest(), 
    cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
    cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
    height = spherical.computeDistanceBetween(cor1,cor3), 
    width = spherical.computeDistanceBetween( cor1, cor4);

    //Fit the circle radius to the map 
    // 0.9 means 90% of the height
    circle.setRadius((height/2) * 0.9);

});

Google Map Circle radius fit to map

1 Answers1

Linked