Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to display google map based on radius selected without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a miles dropdown. When I select any value like 10 miles from dropdown my google map should display within 10-mile range of the place. How Do I do this?

```<script src="https://maps.googleapis.com/maps/api/js"></script>
function myMap() {
var myCenter = new google.maps.LatLng(56.1304, -106.3468);
var mapProp = { center: myCenter, zoom: 6, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };

marker.setMap(map);
}
```
```<div id="googleMap" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; "></div>
<div id="searchcontainer" style="position: absolute; z-index: 0; left: 450px; top: 0px;">
<select id="range" name="range">
<option value="0">Current Map</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="15">15 Miles</option>
<option value="20">20 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
<option value="100">100 Miles</option>
<option value="250">250 Miles</option>
<option value="500">500 Miles</option>
</select>

</div>
```

One option is to create a `google.maps.Circle` with the correct center and desired radius, then call `map.fitBounds(circle.getBounds())` (where `circle` is the circle).

(note that radius of the circle is in meters, so you will need to convert your input of miles to meters).

```var METERS_PER_MILE = 1609.34;

function myMap() {
var myCenter = new google.maps.LatLng(56.1304, -106.3468);
var mapProp = {
center: myCenter,
zoom: 6,
scrollwheel: true,
draggable: true,
};
var circle;
var value = \$("#range").val();
if (circle && circle.setMap) circle.setMap(null);
center: myCenter,
map: map
});
map.fitBounds(circle.getBounds());
});
}
```html,
body {
height: 100%;
width: 100%;
margin: 0px;
}

height: 90%;
}```
```<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="searchcontainer" style="position: absolute; z-index: 0; left: 450px; top: 0px;">
<select id="range" name="range">
<option value="0">Current Map</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="15">15 Miles</option>
<option value="20">20 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
<option value="100">100 Miles</option>
<option value="250">250 Miles</option>
<option value="500">500 Miles</option>
</select>
</div>```