How to show radius or circle with in visible area of Google map

Question

I am using Google map and i am showing radius or circle that shows user's area.

Now problem is radius is going out of the visible area of the Google map so i want to zoom out a little bit so that i can fit radius or circle in visible area of Google map.

might be because of map.fitBounds(markerBounds); it is not zooming out.

main: how to zoom out calendar in this case.

Following code i am using

<script type="text/javascript">
    jQuery(function() {

                    // map options
                    var options = {
                        zoom: 4,
                        center: new google.maps.LatLng(<?php echo $fetch_byproposal['latitude']; ?>,<?php echo $fetch_byproposal['longitude']; ?>), // centered US
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                        mapTypeControl: false,
                    };

                    // init map
                    var map = new google.maps.Map(document.getElementById('map_canvas'), options);
                    var markerBounds = new google.maps.LatLngBounds();
          //     console.log(loc);           
                //   for (var key in loc){
                    //  alert(loc[key][0], loc[key][1]);
                //       if (loc.hasOwnProperty(key)) {
                    randomPoint         =   new google.maps.LatLng(<?php echo $fetch_byproposal['latitude']; ?>,<?php echo $fetch_byproposal['longitude']; ?>)
                        var marker      =   new google.maps.Marker({
                            position    :   randomPoint,
                            map         :   map,
                            icon        :   '<?php echo frontpath(IMAGES_DIRECTORY.'gmap.png');?>',
                            title       :   '<?php echo $fetch_byproposal['location']; ?>'


                        });

                            var populationOptions = {
                              strokeColor       : '#FF0000',
                              strokeOpacity     : 0.8,
                              strokeWeight      : 2,
                              fillColor         : '#FF0000',
                              fillOpacity       : 0.35,
                              map               : map,
                              center            : options.center,
                              radius            : <?php echo $fetch_byproposal['distanceKm']; ?>
                            };
                            // Add the circle for this city to the map.
                            options = new google.maps.Circle(populationOptions);


                        markerBounds.extend(randomPoint);
                        map.fitBounds(markerBounds);

                            (function(marker) {

                                var locKeyName  =   '';
                                var locKeyLink  =   '';
                                var compName    =   '';
                                var userImg     =   '';
                                var userLoc     =   '';
                                google.maps.event.addListener(marker, 'click', function() {                                     
                                    infowindow = new google.maps.InfoWindow({
                                    content: '<b><?php echo $fetch_byproposal['location'];?></b>'

                                    });
                                    infowindow.open(map, marker);
                                });
                            })

                        (marker);
                //      }
                //  }

                });
 </script>

How are you adding the circle's bounds to the markerBounds bounds? — geocodezip

geocodezip geocodezip · Accepted Answer · 2015-02-03T15:01:35

If you want your bounds to include the circle, you need to add the circle to it (with the google.maps.LatLngBounds.union method):

  // circle object is called "options")
  markerBounds.union(options.getBounds());
  markerBounds.extend(randomPoint);
  map.fitBounds(markerBounds);

working fiddle

How to show radius or circle with in visible area of Google map

2 Answers