This page didn't load Google Maps correctly. See the JavaScript console for technical details

Question

I am using this code from Google Map API's and it is not working

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
  }

  #pac-input:focus {
    border-color: #4d90fe;
  }

  .pac-container {
    font-family: Roboto;
  }

  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }

  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>

  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>

  <input type="radio" name="type" id="changetype-address">
  <label for="changetype-address">Addresses</label>

  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
 </div>
<div id="map"></div>

<script>
  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:                         // <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places">

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    var input = /** @type {!HTMLInputElement} */(
        document.getElementById('pac-input'));

    var types = document.getElementById('type-selector');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });

    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setIcon(/** @type {google.maps.Icon} */({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
      }));
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);

      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
      infowindow.open(map, marker);
    });

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        autocomplete.setTypes(types);
      });
    }

    setupClickListener('changetype-all', []);
    setupClickListener('changetype-address', ['address']);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
    async defer></script>

Possible duplicate of [ERROR: Google Maps API error: MissingKeyMapError](http://stackoverflow.com/questions/37991340/error-google-maps-api-error-missingkeymaperror) — user2314737, Jun 30 '16 at 08:29

EmanueleF · Answer 1 · 2016-09-05T22:40:19.540

Google recently changed the terms of use of its Google Maps APIs; if you were already using them on a website (different from localhost) prior to June 22nd, 2016, nothing will change for you; otherwise, you will get the aforementioned issue and need an API key in order to fix your error. The free API key is valid up to 25,000 map loads per day.

In this article you will find everything you may need to know regarding the topic, including a tutorial to fix your error:

Google Maps API error: MissingKeyMapError [SOLVED]

Also, remember to replace YOUR_API_KEY with your actual API key!

score 33 · Accepted Answer · answered Aug 10 '16 at 00:33

33

The fix is really simple: just replace YOUR_API_KEY on the last line of your code with your actual API key!

If you don't have one, you can get it for free on the Google Developers Website.

answered Aug 10 '16 at 00:33

C. Adams

474
4
7

score 18 · Answer 3 · answered Nov 01 '19 at 00:35

18

You could also get the error if your Billing is not set up correctly.

Google hands out credit worth $300 or 12 months of free usage whichever runs out faster. After that you would need to enable billing.

answered Nov 01 '19 at 00:35

pcodex

1,812
15
16

how to enable billing. I am enabled but not working. – Vo Tien Hung Jun 09 '21 at 02:08
yes same issue with me. Even after enabling billing same error is coming – khush Sep 17 '21 at 09:49

score 9 · Answer 4 · edited Nov 13 '18 at 13:21

9

There are 2 possibilities for this problem :

you didn't enter the API KEY for map browser
you didn't enabling the API Library especially for this Google Maps JavaScript API

just check on your Google developer console for that 2 items

edited Nov 13 '18 at 13:21

Amirhossein Mehrvarzi

18,024
7
45
70

answered Aug 15 '16 at 03:37

Nazwa Asshiba

129
1
3

This page didn't load Google Maps correctly. See the JavaScript console for technical details

4 Answers4

Linked