Google Maps and Internet Explorer Javascript/JSON Issue

Question

I'm using the Google Maps API to build a map of store locations near a user-inputted location. Everything is working, but I'm getting an error in Internet Explorer I'd like to get rid of. The error is that "json.markers[i].latitude is null or not an object". Here's the code:

function buildGoogMapView(mrkrs,json)
{
var marker=centerLatitude=centerLongitude=startZoom=point=map="";

mrkrs.each(json.gdrcenter, function(i) {
    centerLatitude  = json.gdrcenter[i].latitude;
    centerLongitude = json.gdrcenter[i].longitude;
});

mrkrs.each(json.gdrzoom, function(i) {
    startZoom = json.gdrzoom[i].setting;
});

startZoom = Number(startZoom);

map = new GMap2(document.getElementById("mapGOOG_PlaceHolder"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude),startZoom);

mrkrs.each(json.markers, function(i) {
    point  = new GLatLng(json.markers[i].latitude,json.markers[i].longitude);
    marker = createMarker(point,json.markers[i].description);
    map.addOverlay(marker);
});}

And here's the JSON object, as requested (I've changed some of the values for confidentiality purposes):

{"gdrzoom":[
{"setting":"7"}],
"gdrcenter":[
{"latitude":"35.5",
 "longitude":"-79.6"}],
"markers":[
{"latitude":"35.0",
 "longitude":"-78.9",
 "name":"Store",
 "description":"DESCVALUE"},
{"latitude":"36.0",
 "longitude":"-79.8",
 "name":"Store",
 "description":"DESCVALUE"},
{"latitude":"35.5",
 "longitude":"-80.8",
 "name":"Store",
 "description":"DESCVALUE"}]}

I'm not getting this error in any other browser, and I know that the json object contains the correct information. I've also moved the script to the end of the page to make sure it wasn't something as simple as that (it wasn't).

Any ideas?

validate the json using http://jsonlint.com/ - i suspect there is an extra comma at the end of it ..... IE hates extra commas ! — Manse, Feb 15 '12 at 15:31
There are no extra array entries in the JSON object. Thanks for the idea. — Derek Brown, Feb 15 '12 at 15:46
can you include the json ? ie post it in your question or create a http://jsfiddle.net — Manse, Feb 15 '12 at 15:53
longitude and latitude values should be numeric ... use `parseFloat()` to convert - what is `mrkrs` ie what are you passing to this function ? — Manse, Feb 15 '12 at 17:09

score 1 · Accepted Answer · edited May 23 '17 at 12:27

Try changing this:

mrkrs.each(json.markers, function(i) {
    point  = new GLatLng(json.markers[i].latitude,json.markers[i].longitude);
    marker = createMarker(point,json.markers[i].description);
    map.addOverlay(marker);
});}

To this:

for (var i = 0; i < json.markers.length; i++) {
    point  = new GLatLng(json.markers[i].latitude,json.markers[i].longitude);
    marker = createMarker(point,json.markers[i].description);
    map.addOverlay(marker);
}

If that removes the error, then read on for the explanation.

It's two issues compounded:

Google Maps adds an "Array.prototype.map()" function
jQuery's .each() uses the "for..in" method of looping (sometimes at least, I think it depends if it's looping on an object)

Most browsers will ignore the "Array.prototype.map()" function when looping, even with the "for..in" method, but Internet Explorer will attempt to loop on it. This is causing the last iteration of your loop to actually be on the "map" function, which doesn't have a "latitude" property, hence IE throws your error: "json.markers[i].latitude is null or not an object".

More detailed info on "for..in" looping here: Why is using "for...in" with array iteration a bad idea?

This wasn't quite it, but got me to the right solution. Evidently, there was an extra array object that didn't show up even in the console printout. I ran the loop to .length - 1 and it worked. Thanks! — Derek Brown, Feb 17 '12 at 14:20

Google Maps and Internet Explorer Javascript/JSON Issue

1 Answers1