CODEWITHSUNDEEP
javascriptjqueryjsongoogle-maps-api-3
paul
paul

Reputation: 572

JSON object properties are undefined in Maps event handler

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

Upvotes: 0

Views: 411

Answers (1)

Andrew Leach
Andrew Leach

Reputation: 12973

wpmm_settings is a string:

"[{\"default_zoom\":\"8\",\"map_center_lat\":\"51.4992913\",\"map_center_lng\":\"-0.1639785\"}]"

globalSettings is the result of parsing that string:

[Object { default_zoom="8", map_center_lat="51.4992913", map_center_lng="-0.1639785"}]

Note that it ends up as a single-element array, because of the outermost square brackets.

The value of map_center_lat is accessed as globalSettings[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 globalSettings to 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 set globalSettings inside that function to the window.load event. So you need to replace that mention of globalSettings with something like evt which 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.

Upvotes: 1

Related Questions