Display google map based on entered address and radius selected

Question

I need to display the map based on the entered address in the textbox and the radius range selected from the miles dropdown. suppose I enter NewYork, NY, USA in the textbox and select any value like 50 miles from miles dropdown my map should display 50 miles of ranges for NewYork.

By Default when the map opens I am passing the default center value. Once the address is entered in the textbox I need to pass entered textbox place into my code to get the map. How do I do that?

Here is my code :

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("map"), 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);

           //Autocomplete address search

            // Create the search box and link it to the UI element.
            var input = document.getElementById('searchtext');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function () {
                var places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }

                // Clear out the old markers.
                markers.forEach(function (marker) {
                    marker.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function (place) {
                    if (!place.geometry) {
                        console.log("Returned place contains no geometry");
                        return;
                    }
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };

                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                        map: map,
                        animation: google.maps.Animation.DROP,
                        title: place.name,
                        position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });

<div id="map" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; "></div>

<input id="searchtext" type="text" value=" " class="search-text controls" placeholder="Enter your search location here" style="z-index: 0; position: absolute; left: 125px; top: 0px;">

<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

I believe this is what you want:

1. When the user selects an entry in the autocomplete dropdown, center and zoom the map to display a circle with the radius selected in the range dropdown.
2. When the user selects an entry in the range dropdown update the size of the circle (either around the current location from the autocomplete dropdown or if none selected, then the center of the map)

to do that, update the range dropdown change listener:

google.maps.event.addDomListener(document.getElementById('range'), 'change', function(evt) {
  // make the radius of the circle depend on the dropdown
  var value = $("#range").val();
  if (circle && circle.setMap) circle.setMap(null);
  // default center on the map's center
  var center = map.getCenter();
  // if a marker exists, center on it.
  if (markers.length > 0) center = markers[0].getPosition();
  circle = new google.maps.Circle({
    center: center,
    radius: value * METERS_PER_MILE,
    map: map
  });
  map.fitBounds(circle.getBounds());
});

To center the map on the result from the autocomplete and zoom it to fit a circle as specified by the range dropdown:

searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.DROP,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
    if (circle && circle.setMap) circle.setMap(null);
    var value = $("#range").val();
    circle = new google.maps.Circle({
      center: place.geometry.location,
      radius: value * METERS_PER_MILE,
      map: map
    });
    map.fitBounds(circle.getBounds());
  });
  map.fitBounds(bounds);
});

(note that if there are multiple results, this code will center the map/circle on the last result)

proof of concept fiddle

code snippet:

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("map"), mapProp);
  var circle;
  google.maps.event.addDomListener(document.getElementById('range'), 'change', function(evt) {
    var value = $("#range").val();
    if (circle && circle.setMap) circle.setMap(null);
    var center = map.getCenter();
    if (markers.length > 0) center = markers[0].getPosition();
    circle = new google.maps.Circle({
      center: center,
      radius: value * METERS_PER_MILE,
      map: map
    });
    map.fitBounds(circle.getBounds());
  });
  //Autocomplete address search

  // Create the search box and link it to the UI element.
  var input = document.getElementById('searchtext');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: place.name,
        position: place.geometry.location
      }));

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
      if (circle && circle.setMap) circle.setMap(null);
      var value = $("#range").val();
      circle = new google.maps.Circle({
        center: place.geometry.location,
        radius: value * METERS_PER_MILE,
        map: map
      });
      map.fitBounds(circle.getBounds());
    });
    map.fitBounds(bounds);
  });

}
google.maps.event.addDomListener(window, 'load', myMap);

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>

<input id="searchtext" type="text" value=" " class="search-text controls" placeholder="Enter your search location here" style="z-index: 0; position: absolute; left: 125px; top: 0px;">

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