Choose location and radius

Choose location and radius using google maps

by Innam Hunzai

HTML

<html>
    <link href="style.css" rel="stylesheet" type="text/css">
  <body>
    <div class="pac-card" id="pac-card">
      <div>
        <div id="label">
          Location search
        </div>       
      </div>
      <div id="pac-container">
        <input id="pac-input" type="text" placeholder="Enter a location">
		<div id="location-error"></div>
      </div>
	  <div>
	    <input type="range" id="radius" name="radius" min="0" max="100" onchange="updateRadius()">
	  </div>
    </div>
    <div id="map"></div>
    <div id="infowindow-content">
      <img src="" width="16" height="16" id="place-icon">
      <span id="place-name"  class="title"></span><br>
      <span id="place-address"></span>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
        async defer></script>
    </body>
</html>

CSS

#map {
    height: 400px;
  }

JavaScript

var circle;
	var map;
	function initMap() {
    	var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
        map = new google.maps.Map(document.getElementById('map'), {
        center: centerCoordinates,
        zoom: 4
        });
        var card = document.getElementById('pac-card');
        var input = document.getElementById('pac-input');
		
        var infowindowContent = document.getElementById('infowindow-content');
        
        //map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);

        var autocomplete = new google.maps.places.Autocomplete(input);
        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent(infowindowContent);
        
        var marker = new google.maps.Marker({
          map: map
        });
		
	 
		circle = new google.maps.Circle({
		   map: map,
		   strokeColor: "#FF0000",
           strokeOpacity: 0.8,
           strokeWeight: 2,
           fillColor: "#FF0000",
           fillOpacity: 0.35,
           center: centerCoordinates,
           radius: 10 * 1609.34,
		   
		});

        autocomplete.addListener('place_changed', function() {
 	        document.getElementById("location-error").style.display = 'none';
            infowindow.close();
            marker.setVisible(false);
        		var place = autocomplete.getPlace();
        		if (!place.geometry) {
        		  	document.getElementById("location-error").style.display = 'inline-block';
        		  	document.getElementById("location-error").innerHTML = "Cannot Locate '" + input.value + "' on map";
        		    return;
        		}
        		
        		map.fitBounds(place.geometry.viewport);
        		marker.setPosition(place.geometry.location);
				circle.setCenter(place.geometry.location);
        		marker.setVisible(true);
        		circle.setVisible(true);
					
        		infowindowContent.children['place-icon'].src = place.icon;
        		infowindowContent.children['place-name'].textContent = place.name;
       ...