I keep encountering the "google is undefined" error message in my JavaScript code.
While I understand that this issue may seem similar to this, I am facing it within a different context, possibly related to MVC.
In the standard MCV5 website template, I have added the following script in the head section of the main _layout.chtml template:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
This snippet is used within one of the views for the account/index action:
<div id="map_canvas"></div>
<span id="result"></span>
<script>
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(13.73868, 1.07143);
var settings = {
zoom: 14,
center: latlng,
mapTypeControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map_canvas'), settings);
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById('result').innerHTML = 'Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng();
});
}
window.onload = initialize;
</script>
The problem arises when the linked Google JS file fails to load before the initialize() function executes, resulting in the "google is undefined" error at the beginning of the function.
Any assistance on resolving this issue would be greatly appreciated.