JSON object properties are undefined in Maps event handler

Question

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

I'm not convinced this has much to do with Google Maps API. It appears to concern the behaviour of JSON objects in event handling. It would help if you could say exactly what wpmm_settings was and exactly what globalSettings contained. — Andrew Leach
– Andrew Leach, Commented May 6, 2012 at 22:32
thanks Andrew, you can see it on this page: demo.wpconsult.net/sample/sub-page-11 — paul
– paul, Commented May 6, 2012 at 23:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 7, 2012 at 0:11

Andrew Leach

13k1 gold badge44 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paul Over a year ago

wow, what a stupid mistake, thank you thank you!! really appreciate your help Andrew, you're the man

Collectives™ on Stack Overflow

JSON object properties are undefined in Maps event handler

1 Answer 1

Then...

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Then...

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related