Map markers not rendering - Google Maps Javascript API v3 In Phonegap

Question

I have been playing around with the JavaScript Google Maps API to render a map populated with markers pulled in from an XML file.

The xml is loaded in fine (looking at the network requests panel) and all scripts are present, no errors are logged, but nothing is rendered on the map - the markers disappear....

My code is below:

     <!DOCTYPE html>
<head>
    <title>The Activity Network</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/themes/theactivitynetwork.css" />
    <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/quickblox.js"></script>
    <script src="js/FileSaver.min.js"></script>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD86ZDzTPegHkzId5kaN1LHtb7_YMh9KNU">
   </script>

   <script>
        function loadXMLDoc(filename) {
            if (window.XMLHttpRequest)
              {
              xhttp=new XMLHttpRequest();
              }
            else // code for IE5 and IE6
              {
              xhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
        }
   </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var location;
            var lat;
            var lon;

            var user = window.localStorage.getItem("user"); 
            var sports = window.localStorage.getItem("sports");
            var onSuccess = function (position) {
                lat = position.coords.latitude;
                lon = position.coords.longitude;

                console.log(lat + ", " + lon);

                window.localStorage.setItem("lat", lat);
                window.localStorage.setItem("lon", lon);

                $.support.cors = true;
                $.post("http://www.theactivitynetwork.co.uk/API/location.php", { user: user, lat: lat, lon: lon }, function (data) {
                    console.log("Response:",data);
                    window.localStorage.setItem("cachedXML",data);
                    console.log("HERE");
                    parser = new DOMParser();
                    xmlDoc = parser.parseFromString(data, "text/xml");
                    initialize();
                });
            };

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
                        'message: ' + error.message + '\n');
            }
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        });

        function downloadUrl(url,callback) {
            var request = window.ActiveXObject ?
                 new ActiveXObject('Microsoft.XMLHTTP') :
                 new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    //request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };
            request.open('GET', url, true);
            request.send(null);
        }

      function initialize() {
        var lat = window.localStorage.getItem("lat");
        var lon = window.localStorage.getItem("lon");
        var mapOptions = {
          center: new google.maps.LatLng(lat, lon),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        drawMarkers(map);
      }

      function drawMarkers(map){
            var url = "http://www.theactivitynetwork.co.uk/API/userLocations.xml"
            var infoWindow = new google.maps.InfoWindow;
            downloadUrl(url,function(data){
                var xml=data.responseXML;
                console.log("XML From Server: ", xml);
                var markers = xml.getElementsByTagName("markers");
                for (var i = 0; i < markers.length; i++) {
                    var user = markers[i].getAttribute("user");
                    var sports = markers[i].getAttribute("sports");
                    var image = {
                      size: new google.maps.Size(71, 132),
                      origin: new google.maps.Point(0, 0),
                      scaledSize: new google.maps.Size(71, 132)
                    };
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lon")));
                    var html = "<b>" + user + "</b> <br>" + sports +'<br/>';
                    var marker = new google.maps.Marker({
                      map: map,
                      position: point,
                      title: name
                    });
                //                map.markers.push(marker);
                    var html = "<b>" + user + "</b> <br/>" + sports + "<br/>";

                    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);
    });
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body onload="initialize()">
    <div id="map-canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

This is the PHP which generates the XML:

while ($row = @mysql_fetch_assoc($result2)){  
    // ADD TO XML DOCUMENT NODE  
    $node = $dom->createElement("marker");  
    $newnode = $parnode->appendChild($node);
    $newnode->setAttribute("user", $row['user']);
    $newnode->setAttribute("sports", $row['sports']);
    $newnode->setAttribute("lat", $row['lat']);  
    $newnode->setAttribute("lon", $row['lon']);  
}

This is the xml file:

<markers>
  <marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
  <marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>

Can anyone spot any glaring errors? This is driving me crazy! Thank you all

Answer 1

Your problem is this; your XML looks like:

<markers>
  <marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
  <marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>

You then use this JS to get that XML from the file:

var markers = xml.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {

... and try to refer to each individual marker using markers[i] . However all you've done is get the entire <markers></markers> object. Instead you want to get each individual <marker> :

var markers = xml.getElementsByTagName("marker");

Map markers not rendering - Google Maps Javascript API v3 In Phonegap

Question

1 answers

solution1
1 ACCPTED 2015-02-04 17:32:08

Map markers not rendering - Google Maps Javascript API v3 In Phonegap

Question

1 answers

solution1 1 ACCPTED 2015-02-04 17:32:08

solution1
1 ACCPTED 2015-02-04 17:32:08