CODEWITHSUNDEEP
phpgoogle-maps-api-3
I2Believe
I2Believe

Reputation: 123

Google Maps Doesn't show data retrieved from database

So I'm trying to display data on a Google Map taken from my database(using API 3).I get the correctly centered Google Map but no markers.

Both generateXml.php and ViewMap.php are on same directory.

Please Help me out appriciate it...

Thank you so much in advance.

generateXml.php

<?php

      require("db_connection.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 markers table
      $query = "SELECT transportType,costPerKm,address,teleNo,webLink,description,lat,lng FROM transportpublic";

      $result = mysql_query($query);
      if (!$result) 
      {
        die('Invalid query: ' . mysql_error());
      }

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

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

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

      // End XML file
      echo '</markers>';
?>

<markers>
<marker transportType="abc" costPerKm="1.50" address="abc" teleNo="112554476" webLink="http://www.abc.html" description="abc" lat="6.886464" lng="79.871287"/>
<marker transportType="Train" costPerKm="1.50" address="abc" teleNo="112541258" webLink="http://www.abc.html" description="Good" lat="7.284459" lng="80.637459"/>
</markers>

ViewMap.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>View Map</title>
    <link rel="stylesheet" type="text/css" href="template/css/style.css" />

    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 100% }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="util.js"></script>


<script type="text/javascript">

  var infowindow;
  var map;

 function initialize() 
 {
      var myLatlng = new google.maps.LatLng(6.796396,79.877823);
      var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("mapC"), myOptions);
    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);


    downloadUrl("generateXml.php", function(data) 
    {
      data = xmlParse(data);
      var markers = data.documentElement.getElementsByTagName("marker");
      var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markers.length; i++) 
       {
          var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
          bounds.extend(latlng);
          var marker = createMarker(markers[i].getAttribute("transportType"), latlng);
       }
       map.fitBounds(bounds);
     });
  }


  function createMarker(transportType, latlng) 
  {

    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: transportType});
      infowindow.open(map, marker);
    });
    return marker;

  }



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 onload="initialize()">

    <div id="content123">
        <div style="height:400px">

        <!--dispaly map -->
          <div id="mapC" style="width: 100%; height: 400px"></div>

      </div>
    </div>

</body>
</html>

When this line is added to mapView.php

<?php include("generateXml.php")?>

It doesn't even show the map It gives me the error 

This page contains the following errors:

error on line 57 at column 26: StartTag: invalid element name
Below is a rendering of the page up to the first error.

View Map html { height: 100% } 

body { height: 100%; margin: 0; padding: 0 } #map { height: 100% } 

var infowindow; var map; 

function initialize() 

{ 

   var myLatlng = new google.maps.LatLng(6.886464,79.871287); 

   var myOptions = { zoom: 10, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} 

   map = new google.maps.Map(document.getElementById("mapC"), myOptions); 

   var transitLayer = new google.maps.TransitLayer(); transitLayer.setMap(map); 

   downloadUrl("generateXml.php", function(data)

   { var xml = data.responseXML; 

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

     var bounds = new google.maps.LatLngBounds(); for (var i = 0; i

Upvotes: 0

Views: 664

Answers (2)

geocodezip
geocodezip

Reputation: 161334

Remove the "var" from this line:

    var map = new google.maps.Map(document.getElementById("mapC"), myOptions);

so it initializes the global "map" variable rather than creating a new one that is local to the initialize function (the global one is being used in the createMarker function)

working example (there are other changes, but the one that fixed it was the map variable)

Upvotes: 1

gerard
gerard

Reputation: 179

there's a typo in generateXml lat="7.284459lng="

Upvotes: 0

Related Questions