I am having an issue where the dom listener at the bottom of my google maps function in an external Javascript file is causing a "google is not defined" console error. This happens when I go to a different HTML page on my website that also accesses script in the external file. I believe it is because the DomListener is outside the function however the function does not work if the dom listener is inside the function. Can someone please help me with where to put this DomListener to stop this error occurring? My code is below.
Thankyou very much, Anthony
function validateEmail() {
var email = form.emailaddress.value;
if (form.firstname.value == "") {
document.getElementById("emailInvalid").style.visibility = "visible";
return false;
} return true;
}
function initialize() {
var myLatlng1 = new google.maps.LatLng(-25.363882,150.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882,152.044922);
var mapOptions = {
zoom: 6,
center: myLatlng1
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString1 = 'Mott Park'
var contentString2 = 'Kilpa Park'
var infowindow = new google.maps.InfoWindow({
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Park'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Water'
});
google.maps.event.addListener(marker1, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString1);//update the content for this marker
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString2);//update the content for this marker
infowindow.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);