• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 561
  • Last Modified:

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!
0
Nico2011
Asked:
Nico2011
1 Solution
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now