I’ve read a few threads here and I understand there’s a scope issue with my globalSettings properties not being available in the google.maps.event.addDomListener function.
The console.log statement returns undefined, but if I do console.log(globalSettings), it shows the object and its properties.
How do I make the properties available so I can use them to initialize the map center and zoom?
var globalSettings = jQuery.parseJSON(wpmm_settings);
var ICON = new google.maps.MarkerImage('medicare.png', null, null,
new google.maps.Point(14, 13));
var SHADOW = new google.maps.MarkerImage('medicare-shadow.png', null, null,
new google.maps.Point(14, 13));
google.maps.event.addDomListener(window, 'load', function(globalSettings) {
console.log(globalSettings.map_center_lat);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(globalSettings.map_center_lat, 135),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});...
wpmm_settingsis a string:globalSettingsis the result of parsing that string:Note that it ends up as a single-element array, because of the outermost square brackets.
The value of
map_center_latis accessed asglobalSettings[0].map_center_lat.If you took the outermost square brackets out of the string, you would get a single "naked" object, and the properties can be accessed as you expect.
Then…
google.maps.event.addDomListener(window, 'load', function(globalSettings) {...does not pass
globalSettingsto the event handler. The event is passed — this is the standard behaviour: the event is passed to the event handler. What this line does is setglobalSettingsinside that function to thewindow.loadevent. So you need to replace that mention ofglobalSettingswith something likeevtwhich you can ignore inside the function.There are still issues with your
...of code in your snippet, but getting the object and the event handler right will make finding those easier.