How to display google map based on radius selected Code Answer

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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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 };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            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>

Answer

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).

screenshot of resulting map

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,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var circle;
  google.maps.event.addDomListener(document.getElementById('range'), 'change', function(evt) {
    var value = $("#range").val();
    if (circle && circle.setMap) circle.setMap(null);
    circle = new google.maps.Circle({
      center: myCenter,
      radius: value * METERS_PER_MILE,
      map: map
    });
    map.fitBounds(circle.getBounds());
  });
}
google.maps.event.addDomListener(window, 'load', myMap);
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googleMap {
  height: 90%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="googleMap"></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>
We are here to answer your question about How to display google map based on radius selected - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji