CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3autocomplete
Sriram Chandramouli
Sriram Chandramouli

Reputation: 119

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.

Upvotes: 0

Views: 1233

Answers (1)

geocodezip
geocodezip

Reputation: 161404

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>

Upvotes: 1

Related Questions