Google Maps Javascript API not loading correctly

Question

I am trying to load Google Maps API in a webpage with the <script> tags at the bottom of the body with the #map element referenced above.

Get the error alert: "This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError"

My API KEY is definitely correct; I have checked it multiple times.

I have chosen to accept request from the following referrers
*.mywebsite.com/*
*.mywebsite.com*
www.mywebsite.com/*
www.mywebsite.com/test // this is the url I am trying to load the map on.

I have tried without the API Key Reference and without the Init callback and the map loads intermittently. Sometimes it will load (around 20% of the time), other times it doesn't and I get the following console log - ReferenceError: google is not defined;

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script src="/js/map.js"></script>

My map.js file containing the map config

var map;
var mapLatLng = {lat: 13.778182, lng: -0.23676};
var mapStyle = [maps style options] // https://snazzymaps.com/style/38/shades-of-grey
var mapMarker = '/img/marker.png';

function initMap() {

  var styledMap = new google.maps.StyledMapType(mapStyle,
  {name: "Styled Map"});

  var mapOptions = {
    center: mapLatLng,
    zoom: 10,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};

var map = new google.maps.Map(document.getElementById('map'),
mapOptions);

var marker = new google.maps.Marker({
  position: mapLatLng,
  map: map,
  title: 'Hello World!',
  icon: mapMarker
});

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

}

google.maps.event.addDomListener(window, 'load', initMap);

Sébastien Ollivier · Accepted Answer · 2015-12-09 11:15:19Z

3

You call the GMap script as async defer, so you are not sure that the script will be downloaded and executed before map.js. And your map.js script call the GMap API.

Could you test first without the async defer attribute. If it's ok, just move all your initialization code in the initMap function, it should work :

function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), mapOptions);

   var marker = new google.maps.Marker({
      position: mapLatLng,
      map: map,
      title: 'Hello World!',
      icon: mapMarker
    });

   //Associate the styled map with the MapTypeId and set it to display.
   map.mapTypes.set('map_style', styledMap);
   map.setMapTypeId('map_style');
   var styledMap = new google.maps.StyledMapType(mapStyle, {name: "Styled Map"});

   var mapOptions = {
        center: mapLatLng,
        zoom: 10,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
   };
}

answered Dec 9, 2015 at 11:15

Sébastien Ollivier

5782 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

navigator Over a year ago

This seems to work for the use without the api key thanks. seem to be getting "TypeError: window.initMap is not a function" in the console though.

Sébastien Ollivier Over a year ago

If you declare the initMap outside scopes, it will be created in the window object. Try to execute window.initMap in the console. If it's undefined, your ìnitMapdeclaration is probably scoped. In this case move its declaration or use window.initMap = function() {....

Sébastien Ollivier Over a year ago

If this answer solved your problem, could you mark it as answered ?

Collectives™ on Stack Overflow

Google Maps Javascript API not loading correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related