Google maps

HTML

<input type="text" id="autocomplete">

<div id="reset">
  <button>Reset</button>
</div>

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZTVeTwA0PFswivHps1IEomldUWNCVuW0&libraries=places"></script>

CSS

input#autocomplete {
  line-height: 32px;
  width: 200px;
  margin: 10px;
  padding: 2px 0px 2px 10px;
}

#map {
  height: 100%;
}

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

#reset {
  float: right;
}

#reset button {
  height: 32px;
}

JavaScript

//AIzaSyBZTVeTwA0PFswivHps1IEomldUWNCVuW0
 
// DOM
const ac_input = document.querySelector("#autocomplete");
const map_container = document.querySelector("#map");
const reset_button = document.querySelector("#reset");

// Map
const map_options = {
    center: {lat:-35.222445, lng: 149.021286},
    zoom: 10,
    streetViewControl: false,
    zoomControl: false,
    scaleControl: false,
    scrollwheel: false,
    //disableDoubleClickZoom: true,
    draggable: false
}
const map = new google.maps.Map(map_container, map_options);

// Autocomplete
const  southWest= new google.maps.LatLng( -35.196354, 148.979052 );
const  northEast= new google.maps.LatLng( -35.278700, 149.153425 );
const defaultBounds = new google.maps.LatLngBounds( northEast,southWest);
const ac_options = {
    bounds: defaultBounds,
    types:  ['(cities)'],
    componentRestrictions: { country: 'AU' },
  	strictBounds: true
};
const autocomplete = new google.maps.places.Autocomplete(ac_input, ac_options);

// Bind to map
autocomplete.addListener('place_changed', onPlaceChanged);
reset_button.addEventListener("click", () => map.fitBounds(defaultBounds));

function onPlaceChanged() {
  const geocoder = new google.maps.Geocoder();
   geocoder.geocode( { 'address': autocomplete.getPlace().formatted_address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        map.fitBounds(results[0].geometry.viewport);
      }
    });
}