Google Map JavaScript Error(s) - html

Question

I am trying to install a Google Map via JavaScript on to my website which will have multiple markers. I am getting several errors and I cannot figure them out or resolve them. Please can someone help me?
The map:
<div id="map-canvas"></div>
I am loading the following JavaScript in the footer (below the map-canvas):
<!-- Google Map -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="js/map.js"></script>
In my map.js I have:
// necessary variables
var map;
var infoWindow;
// markersdata variable stores the information necessary to each marker
var markersData = [{
lat: 40.6386333,
lng: -8.745,
name: "Camping Praia da Barra",
address1: "Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré"
},
{
lat: 40.59955,
lng: -8.7498167,
name: "Camping Costa Nova",
address1: "Quinta dos Patos, n.º 2",
address2: "Praia da Costa Nova",
postalCode: "3830-453 Gafanha da Encarnação"
},
{
lat: 40.6247167,
lng: -8.7129167,
name: "Camping Gafanha da Nazaré",
address1: "Rua dos Balneários do Complexo Desportivo",
address2: "Gafanha da Nazaré",
postalCode: "3830-225 Gafanha da Nazaré"
}
];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203, -8.668173),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// a new info window is created
infoWindow = new google.maps.InfoWindow();
// event that closes the info window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// finally displaymarkers() function is called to begin the markers creation
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
// this function will iterate over markersdata array
// creating markers with createmarker function
function displayMarkers() {
// this variable sets the map bounds according to markers position
var bounds = new google.maps.LatLngBounds();
// for loop traverses markersdata array calling createmarker function for each marker
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var postalCode = markersData[i].postalCode;
createMarker(latlng, name, address1, address2, postalCode);
// marker position is added to bounds variable
bounds.extend(latlng);
}
// finally the bounds variable is used to set the map bounds
// with fitbounds() function
map.fitBounds(bounds);
}
// this function creates each marker and it sets their info window content
function createMarker(latlng, name, address1, address2, postalCode) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name
});
// this event expects a click on a marker
// when this event is fired the info window content is created
// and the info window is opened.
google.maps.event.addListener(marker, 'click', function() {
// creating the content to be inserted in the infowindow
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' +
postalCode + '</div></div>';
// including content to the info window.
infoWindow.setContent(iwContent);
// opening the info window in the current map and at the current marker location.
infoWindow.open(map, marker);
});
}
The errors that I am getting are:
1. Uncaught ReferenceError: google is not defined at map.js:52
2. Uncaught Qb
What does this mean?

Answer 1

You should be passing the name of your map initialisation function (initialize) in the callback query parameter of the google maps URL:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initialize" type="text/javascript"></script>
You also need to load your javascript file before loading the google maps API to ensure that your initialisation function is defined when the callback is called:
<script type="text/javascript" src="js/map.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initialize" type="text/javascript"></script>

Answer 2

You're loading the Google API async.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>
Which means your map.js is being executed before it's loaded, in addition: the callback is 'initMap' which isn't doing anything in your own map.js at this moment.
google.maps.event.addDomListener(window, 'load', initialize);
Remove this line, and change the callback function in your script to initialize.

Answer 3

This line google.maps.event.addDomListener(window, 'load', initialize);
should be in your initialize function cos at the point where it is as your error says, it has not been loaded

Answer 4

Ok, let's looking for what is happening here. You have imported the g maps dependencies with this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>
Look at that "async" word. That says that the js file will be loaded asynchronously. Now, look at the src attr:
https://maps.googleapis.com/maps/api/js?key=API_REMOVED&callback=initMap
The attribute callback in the query string defines a JS function that you need have in your code, that will be executed when the async load is finished. You don't have this function in your code,so you should create it with the inialization of your map.
Maybe, putting all your JS code into this will works:
function initMap(){
// your code here
}