JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<form action="javascript:void(0);" name="search" id="search-form">
<input type="text" name="location" class="textbox" id="search-input" value="" />
</form>
<div id="map-canvas"></div>
CSS
#map-canvas {
height: 400px;
width: 400px;
}
JavaScript
$(function(){
function searchBar(map) {
var input = document.getElementById('search-input');
var searchform = document.getElementById('search-form');
var place;
var options = {componentRestrictions: {country: 'us'}};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input,'keydown',function(e){
console.log(e.triggered)
if(e.keyCode===13 && !e.triggered){
google.maps.event.trigger(this,'keydown',{keyCode:40})
google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true})
}
});
//Add listener to detect autocomplete selection
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
map.setCenter(center);
map.setZoom(5);
});
//Reset the inpout box on click
input.addEventListener('click', function(){
input.value = "";
});
};
function initialize() {
var latitude = 37.6,
longitude = -95.665,
center = new google.maps.LatLng(latitude,longitude),
mapOptions = {
center: center,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
searchBar(map);
}
initialize();
});