Google Maps XML Marker not *always* working

Hello,

I have a really weird problem... I have created a page that reads an XML stream, which doesn't work if there are only a couple of markers in the stream, but works fine if there are more.

Here's the code from apage that doesn't show any properties, even though there are two in the XAM Source as can be seen here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

      var customIcons = {
            green: {
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
      };

      var xmlsource = '<markers><marker name="Villa Valdibora" town="Rovinj" region="Istria" type="Villa" lat="45.09194" lng="13.64227" beds="4" distance="183" thumb="villa/nopic.jpg"/><marker name="Villa Claudia" town="Premantura" region="Istria" type="Apartment" lat="44.80788" lng="13.91856" beds="3" distance="207" thumb="villa/6028/prem150.jpg"/></markers>';
      
      $(document).ready(function() {
            var latlng = new google.maps.LatLng(46.6318549, 14.4579657);
            var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var infoWindow = new google.maps.InfoWindow;
            $(xmlsource).find("marker").each(function() {
                  debugger;
                  var name = $(this).attr("name");
                  var town = $(this).attr("town");
                  var type = $(this).attr("type");
                  var beds = $(this).attr("beds");
                  var thumb = $(this).attr("thumb");
                  var distance = $(this).attr("distance");
                  var type = $(this).attr("type");                  
//                  var type = "green";
                  var lat = parseFloat($(this).attr("lat"));
                  var lng = parseFloat($(this).attr("lng"));
                  var point = new google.maps.LatLng(lat, lng);
                  var html = '<div id="content">';
//                  html += '<div id="siteNotice">' + '</div>';
                  html += '<h3 id="firstHeading" class="firstHeading">' + name + '</h3>'
                  html += '<div id="bodyContent">'
                  html += '<img src="' + thumb + '" height="120" width="160"/><br />' + town + '&nbsp;Bedrooms:' + beds
                  html += '&nbsp;Distance:' + distance
                  html += '</div>';
                  html += '</div>';
                  var icon = customIcons[type] || {};
                  var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow });
                  bindInfoWindow(marker, map, infoWindow, html);
            });;
      });
      
      function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); });
      }

</script>
</head>
<body>

<div id="map_canvas" style="width:80%; height:100%"></div>
</body>
</html>

And here's one which DOES work - just has a few more properties...! :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

      var customIcons = {
            green: {
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
      };

      var xmlsource = '<markers><marker name="Villa Valdibora" town="Rovinj" region="Istria" type="Villa" lat="45.09194" lng="13.64227" beds="4" distance="183" thumb="villa/nopic.jpg"/><marker name="Villa Claudia" town="Premantura" region="Istria" type="Apartment" lat="44.80788" lng="13.91856" beds="3" distance="207" thumb="villa/6028/prem150.jpg"/><marker name="La Casina Bassa " town="Castiglione del Lago-Perugia" region="Umbria" type="Apartment" lat="43.12805" lng="12.03827" beds="1 or 2" distance="434" thumb="villa/3155/casale_t.jpg"/><marker name="Il Casteletto " town="Comuneglia" region="Varese Ligure" type="Villa" lat="44.38375" lng="9.52068" beds="2" distance="459" thumb="villa/110/5675_a.jpg"/><marker name="Villa" town="Narni" region="Umbria" type="Villa" lat="42.52272" lng="12.52304" beds="5" distance="482" thumb="villa/5845/SanGiovanni_5.jpg"/></markers>';
      
      $(document).ready(function() {
            var latlng = new google.maps.LatLng(46.6318549, 14.4579657);
            var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var infoWindow = new google.maps.InfoWindow;
            $(xmlsource).find("marker").each(function() {
                  debugger;
                  var name = $(this).attr("name");
                  var town = $(this).attr("town");
                  var type = $(this).attr("type");
                  var beds = $(this).attr("beds");
                  var thumb = $(this).attr("thumb");
                  var distance = $(this).attr("distance");
                  var type = $(this).attr("type");                  
//                  var type = "green";
                  var lat = parseFloat($(this).attr("lat"));
                  var lng = parseFloat($(this).attr("lng"));
                  var point = new google.maps.LatLng(lat, lng);
                  var html = '<div id="content">';
//                  html += '<div id="siteNotice">' + '</div>';
                  html += '<h3 id="firstHeading" class="firstHeading">' + name + '</h3>'
                  html += '<div id="bodyContent">'
                  html += '<img src="' + thumb + '" height="120" width="160"/><br />' + town + '&nbsp;Bedrooms:' + beds
                  html += '&nbsp;Distance:' + distance
                  html += '</div>';
                  html += '</div>';
                  var icon = customIcons[type] || {};
                  var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow });
                  bindInfoWindow(marker, map, infoWindow, html);
            });;
      });
      
      function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); });
      }

</script>
</head>
<body>

<div id="map_canvas" style="width:80%; height:100%"></div>
</body>
</html>

THANKS in advance for your help!
Nico2011Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
For IE (all your codes work fine for me on FF and Chrome,...) replace :
$(xmlsource).find("marker").each(function() {

Open in new window

by :
$( $.parseXML( xmlsource ) ).find("marker").each(function() {

Open in new window

0
 
Nico2011Author Commented:
Thanks so much - I really was thinking that there wasn't going to be an easy solution to this, but it works perfectly.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.