CODEWITHSUNDEEP
javascriptapigoogle-mapsgoogle-maps-api-3
navigator
navigator

Reputation: 96

Google Maps Javascript API not loading correctly

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);

Upvotes: 0

Views: 5770

Answers (1)

S&#233;bastien Ollivier
S&#233;bastien Ollivier

Reputation: 578

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']
      }
   };
}

Upvotes: 3

Related Questions