JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<div id="google-maps">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input type="text" id="q" />
    <a href="#" id="force-auto-complete">force auto</a>
</div>

CSS

#google-maps{;
    width: 200px;
    height: 100px;
    background-color: #cc0000;
    background: #cc0000;
    color: #cc0000;
}
#force-auto-complete{
    display: none;
}

JavaScript

var input = document.getElementById('q');
var autocomplete = new google.maps.places.Autocomplete(input);

function DoAutoComplete(){
    $("#force-auto-complete").trigger('click');
}

$(function() {
    $("#force-auto-complete").on("click", function(){
        $('#q').attr("autocomplete", "on");
        $('#q').val("Milan, ");
        $('#q').focus().click();
        //console.log("done");
    });
    console.clear();    
    $("#google-maps").on('click', DoAutoComplete);
    
});