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      lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Place Autocomplete lt  title gt   lt meta name  viewport  content  initial-scale 1 0  user-scalable no  gt   lt meta charset  utf-8  gt   lt style gt    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       lt  style gt   lt  head gt   lt body gt   lt input id  pac-input  class  controls  type  text      placeholder  Enter a location  gt   lt div id  type-selector  class  controls  gt     lt input type  radio  name  type  id  changetype-all  checked  checked  gt     lt label for  changetype-all  gt All lt  label gt      lt input type  radio  name  type  id  changetype-establishment  gt     lt label for  changetype-establishment  gt Establishments lt  label gt      lt input type  radio  name  type  id  changetype-address  gt     lt label for  changetype-address  gt Addresses lt  label gt      lt input type  radio  name  type  id  changetype-geocode  gt     lt label for  changetype-geocode  gt Geocodes lt  label gt    lt  div gt   lt div id  map  gt  lt  div gt    lt script gt       This example requires the Places library  Include the libraries places      parameter when you first load the API  For example                              lt script src  https   maps googleapis com maps api js  key YOUR API KEY amp libraries places  gt     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   amp  amp  place address components 0  short name                    place address components 1   amp  amp  place address components 1  short name                    place address components 2   amp  amp  place address components 2  short name                  join                      infowindow setContent   lt div gt  lt strong gt     place name     lt  strong gt  lt br gt     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          lt  script gt   lt script src  https   maps googleapis com maps api js key YOUR API KEY amp libraries places amp callback initMap      async defer gt  lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to api

Examples related to google-maps