CODEWITHSUNDEEP
phpjavascriptmysqlxmlgoogle-maps-api-3
Aventinus
Aventinus

Reputation: 1382

Google Map won't display points - XML is null

I'm developing a website that will read the lat and lng from the MySQL database that I've created to show them on Google Maps. I'm using this Google example as a reference. The table users from which I read the lat and lng has the following fields: 

user_id
username
password
name
address
lat
lng
country
institute
email
phone
photo
role

This is the genxml.php that produces the XML output of the info. 

<?php

    include("database.php");

    function parseToXML($htmlStr) 
    { 
        $xmlStr=str_replace('<','&lt;',$htmlStr); 
        $xmlStr=str_replace('>','&gt;',$xmlStr); 
        $xmlStr=str_replace('"','&quot;',$xmlStr); 
        $xmlStr=str_replace("'",'&#39;',$xmlStr); 
        $xmlStr=str_replace("&",'&amp;',$xmlStr); 
        return $xmlStr; 
    } 

    // Select all the rows in the users table
    $query = "SELECT * FROM users";
    $result = mysql_query($query);
    if (!$result) {
        die('Invalid query: ' . mysql_error());
    }

    // Start XML file, echo parent node
    echo '<users>';

    // Iterate through the rows, printing XML nodes for each
    while ($row = mysql_fetch_assoc($result)){
        // ADD TO XML DOCUMENT NODE
        echo '<user ';
        echo 'name="' . parseToXML($row['name']) . '" ';
        echo 'address="' . parseToXML($row['address']) . '" ';
        echo 'lat="' . $row['lat'] . '" ';
        echo 'lng="' . $row['lng'] . '" ';
        echo '/>';
    }

    // End XML file
    echo '</users>';


?>

This is the admin.php that is responsible for showing Google Map and the markers. 

<?php
session_start();

if($_SESSION['user_role'] != "1"){
    header( 'Location: not_authorized.php' ) ;
}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="el" xml:lang="en"> 

    <?php
        include ("database.php");
    ?>


<head>
<title> ARISTOTLE 2012 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-7" />
    <link rel="stylesheet" href="/styles/basic/input.css" type="text/css" media="screen"/>
    <link rel="shortcut icon" href="https://pithos.grnet.gr/pithos/rest/[email protected]/files/favicon.ico" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">

    var customIcons = {
        2: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
        },
        bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
        }
    };

    function load() {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(42.357437, -71.096962),
            zoom: 13,
            mapTypeId: 'roadmap'
        });

        var infoWindow = new google.maps.InfoWindow();

        // Change this depending on the name of your PHP file
        downloadUrl("genxml.php", function(data) {
            var xml = data.responseXML;
            var users = xml.documentElement.getElementsByTagName("user");
            for (var i = 0; i < users.length; i++) {
                var name = users[i].getAttribute("name");
                var address = users[i].getAttribute("address");
                var type = users[i].getAttribute("role");
                var point = new google.maps.LatLng(
                    parseFloat(users[i].getAttribute("lat")),
                    parseFloat(users[i].getAttribute("lng")));
                var html = "<b>" + name + "</b> <br/>" + address;
                var icon = customIcons[type] || {};
                var user = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    shadow: icon.shadow
                });
                bindInfoWindow(user, map, infoWindow, html);
            }
        });
    }

    function bindInfoWindow(user, map, infoWindow, html) {
        google.maps.event.addListener(user, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, user);
        });
    }

    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 doNothing() {}

</script>
</head>

<body>
    <center>
        <table class="wrapper">
            <tbody>
                <tr>
                    <td valign="top">
                        <center>
                            <?php
                                require_once("includes/header.php");
                            ?>
                            <?php
                                require_once("includes/admin_menu.php");
                            ?>


                            <body onload="load()">
                                <div id="map" style="width: 980px; height: 400px"></div>
                            </body>

                            <?php
                                require_once("includes/footer.php");
                            ?>
                        </center>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>
    </center>
</body>

The concept is that admin can see on the map the registered users. The problem is that the markers won't display. Firebug gives me

xml is null
(?)(data=XMLHttpRequest { responseText="<users><user name="Yale..."-71.583336" /></users>", response="<users><user name="Yale..."-71.583336" /></users>", status=200, more...})admin.php (line 39)
onreadystatechange()admin.php (line 75)

var users = xml.documentElement.getElementsByTagName("user");

Still I cannot understand how to fix this error. Any ideas?

Thank you in advance.

Upvotes: 1

Views: 1133

Answers (2)

Aventinus
Aventinus

Reputation: 1382

So I figured it out. After Duncan's answer the reason which placemarks did not work was that I had not placed

header("Content-type: text/xml");

in genxml.php. What a noob, huh? I'm placing Duncan's answer as correct because without it I wouldn't have figured out the problem. Below is the updated genxml.php. Thanks! 

<?php

    include("database.php");

    function parseToXML($htmlStr) 
    { 
        $xmlStr=str_replace('<','&lt;',$htmlStr); 
        $xmlStr=str_replace('>','&gt;',$xmlStr); 
        $xmlStr=str_replace('"','&quot;',$xmlStr); 
        $xmlStr=str_replace("'",'&#39;',$xmlStr); 
        $xmlStr=str_replace("&",'&amp;',$xmlStr); 
        return $xmlStr; 
    } 

    // Select all the rows in the users table
    $query = "SELECT * FROM users";
    $result = mysql_query($query);
    if (!$result) {
        die('Invalid query: ' . mysql_error());
    }

    header("Content-type: text/xml"); 

    // Start XML file, echo parent node
    echo '<users>';

    // Iterate through the rows, printing XML nodes for each
    while ($row = mysql_fetch_assoc($result)){
        // ADD TO XML DOCUMENT NODE
        echo '<user ';
        echo 'name="' . parseToXML($row['name']) . '" ';
        echo 'address="' . parseToXML($row['address']) . '" ';
        echo 'lat="' . $row['lat'] . '" ';
        echo 'lng="' . $row['lng'] . '" ';
        echo '/>';
    }

    // End XML file
    echo '</users>';


?>

Upvotes: 0

duncan
duncan

Reputation: 31912

var infoWindow = new google.maps.InfoWindow;

should be

var infoWindow = new google.maps.InfoWindow();

Also here you pass through 'users' (the array of objects in the 'users' node), but surely you want to pass through just 'user', i.e. the marker you've just created?

bindInfoWindow(users, map, infoWindow, html);

Upvotes: 2

Related Questions