title: IE7/8 javascript "SCRIPT5007: Unable to get value of the property"
body: <p>I've got a site under development which uses Google Maps API V3 to load multiple location makers. Everything is working except in IE7/8 where my looping through an array fails due to the following error:</p>
  
  <pre><code>SCRIPT5007: Unable to get value of the property '5': object is null or undefined
  </code></pre>
  
  <p>I've looked through all similar questions on StackOverflow and can't find any solution.</p>
  
  <p>So I'm trying to access data from an object array (I also tried a nested array but the same error occurs). My array is as below. I have also tried dropping the html object in case that was causing an issue, but no change - IE7/8 still can't get the object value.</p>
  
  <pre><code>var sites = [
      {title: "Hermitage Medical Clinic", latitude: 53.3593139774, longitude: -6.40494071541, enumerator: 1, html: "&lt;div class=\"find_a_surgeon_info_inner\"&gt;&lt;h4 style=\"margin: 0; padding: 0;\"&gt;Hermitage Medical Clinic&lt;/h4&gt;&lt;p&gt;Old Lucan Road, Dublin 20&lt;/p&gt;&lt;p&gt;&lt;a href=\"http://devel.pixelapes.com/iaps.ie/location/hermitage-medical-clinic/\"&gt;View hospital details&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;", iconTerm: "hospital" }
          ];
  </code></pre>
  
  <p>And here's my function which is trying to access the data:</p>
  
  <pre><code>        function setMarkers(map, sites) {
  
              for (var i = 0; i &lt; sites.length; i++) {
                  // var sites = markers[i];
                  var icon = '&lt;?php bloginfo("template_url"); ?&gt;/images/map-icons/' + sites[i].iconTerm + '.png';
                  var siteLatLng = new google.maps.LatLng(sites[i].latitude, sites[i].longitude);
                  var marker = new google.maps.Marker({
                      position: siteLatLng,
                      map: map,
                      icon: icon,
                      title: sites[i].title,
                      zIndex: sites[i].enumerator,
                      html: sites[i].html
                  });
  
                  var contentString = "Some content";
  
                  google.maps.event.addListener(marker, "click", function () {
                      infowindow.setContent(this.html);
                      infowindow.open(map, this);
                  });
              }
          }
  </code></pre>
  
  <p>I've also tried dropping back to just using the default Maps marker in case there was a specific issue with the iconTerm object but IE7/8 just fails trying to get the next object value.</p>
  
  <p>Here's a page on which this is occurring:
  <a href="http://devel.pixelapes.com/iaps.ie/surgeon/eamon-s-beausang/" rel="nofollow">http://devel.pixelapes.com/iaps.ie/surgeon/eamon-s-beausang/</a></p>
  
  <p>Strangely, I have another map instance where I'm not setting the bounds with map.fitBounds. The failure to get object values still occurs but the map sort of loads (but very messily): <a href="http://devel.pixelapes.com/iaps.ie/find-a-hospital-or-clinic/" rel="nofollow">http://devel.pixelapes.com/iaps.ie/find-a-hospital-or-clinic/</a></p>
  
  <p>I have tried removing the fitBounds functionality on the single surgeon page but the map still doesn't partially load as it does on the "Find a hospital" map.</p>
  
  <p>Any ideas on how to get around this?</p>