Sriram Chandramouli Sriram Chandramouli - 1 year ago 155
HTML Question

MissingKeyMapError: Error while using Google Maps Autocomplete text box on local host

I am trying the below code for implementing Google Maps Autocomplete text box in HTML


<script src=""></script>

<input type="" name="loc" class="form-control" id="location" value="">


function init() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(window, 'load', init);

The above code is working fine if I open HTML file in normal browser without using any server or local host. When I use the same code on local host, and click the text box, text box gets disabled automatically and throws the below error:

Google Maps API error: MissingKeyMapError js?v=3.exp&sensor=false&libraries=places:34

I was referring to this document ERROR: Google Maps API error: MissingKeyMapError and it says usage of the Google Maps APIs now requires a key after June 22 2016. I created key and used the library as mentioned in the document but had no luck as the textbox is not picking the library.

Tried below library replacing YOUR_API_KEY with the key generated for me:

<script async defer src=" key=YOUR_API_KEY&callback=initMap"

When I use this library, it is not at all picking any location, and text box is showing empty.

I am getting this issue only when I use the Google API on a local host. Could someone help me how to get rid of this error?
After generation of key, what is the exact library that should be used?

I am getting the below error after using the below two libraries:

<script type="text/javascript"src=",places">

<script async defer src=" libraries=places&key=API_KEY&callback=initMap"



Uncaught js? libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function

I am using the same javascript code as mentioned earlier.

Answer Source

You need to include both the key (with localhost as an allowed referrer) and the places library.

<script async defer src=""

from the documentation on libraries:

The following bootstrap request illustrates how to request the google.maps.geometry library of the Maps Javascript API:

<script type="text/javascript"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download