JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="map-canvas"></div>
<input id="pac-input" value="Search Term" />
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#pac-input{width:50%;}
JavaScript
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
_map = new google.maps.MVCObject(),
bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631)),
input = document.getElementById('pac-input'),
ac = new google.maps.places.SearchBox(input),
itemsloaded = google.maps.event
.addDomListener(document.body,
'DOMNodeInserted',
function(e){
if(e.target.className==='pac-item'){
google.maps.event.removeListener(itemsloaded);
google.maps.event.trigger( input, 'keydown', {keyCode:40})
google.maps.event.trigger( input, 'keydown', {keyCode:13})
google.maps.event.trigger( input, 'focus')
google.maps.event.trigger( input, 'keydown', {keyCode:13})
}
});
map.fitBounds(bounds);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
google.maps.event.addListener(ac,'places_changed',function(){
var places = this.getPlaces();
_map.set('map',null);
_map=new google.maps.MVCObject();
_map.set('map',map);
bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new...