CODEWITHSUNDEEP
javascriptjsoninternet-explorergoogle-mapsgoogle-maps-api-3
Derek Brown
Derek Brown

Reputation: 87

Google Maps and Internet Explorer Javascript/JSON Issue

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?

Upvotes: 1

Views: 628

Answers (1)

Allan Wintersieck
Allan Wintersieck

Reputation: 873

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:

  1. Google Maps adds an "Array.prototype.map()" function
  2. 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?

Upvotes: 1

Related Questions