Sriram Chandramouli Sriram Chandramouli - 3 months ago 67
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

HTML:

<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>

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


JavaScript:

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


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 https://developers.google.com/maps/documentation/javascript/get-api-key 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="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>


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="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places">




<script async defer src="https://maps.googleapis.com/maps/api/js? libraries=places&key=API_KEY&callback=initMap"


type="text/javascript">

Error:

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

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

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>

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"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>
Comments