Как отобразить карту Google на основе выбранного радиуса

Question

У меня выпадающий список миль. Когда я выбираю любое значение, например, 10 миль из раскрывающегося списка, моя карта Google должна отображаться в радиусе 10 миль от места. Как мне это сделать?

<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 1

Вам не нужен центр на вашей карте. что вы можете сделать, это добавить слушателя и после соответствующего изменения setZoom, но вам нужно изменить значения диапазона, а не текст, в соответствии с документацией API Карт Google для обработки значений максимального увеличения.

var range = document.getElementById("range");
      range.addEventListener("change", function() {
        map.setZoom(range.value);
      });

Answer 2

Один из вариантов - создать google.maps.Circle с правильным центром и желаемым радиусом, затем вызвать map.fitBounds(circle.getBounds()) (где circle - это круг).

(обратите внимание, что радиус круга в метрах, поэтому вам нужно будет преобразовать введенные вами мили в метры).

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>