CODEWITHSUNDEEP
phpjavascriptmysqlajaxgoogle-maps-api-3
Ryler Sexton
Ryler Sexton

Reputation: 153

Google map javascript api unable to load markers from mysql database

I'm having a bit of a problem with putting up markers from database i followed this guide https://developers.google.com/maps/articles/phpsqlajax_v3. The page just loads but with no markers, I have also checked if the xml generator was working and Yes it does. Could someone help me out what I'm doing wrong? here is my index file.

     <?php include('connection_db.php');?>


     downloadUrl("xmlspitter.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> <br/>" + address;
    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);
     });
   }
 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="contain">
   <div id="map_canvas" style="width:500px; height:500px"></div>
   </div>
   </body>
  </html>

Note: xmlspitter.php has correct output from my db. Also if anyone knows any more good tutorials please do tell me thanks.

//EDIT This is the map from external js

    function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(47.6145, -122.3418),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

and xmlspitter.php if anyone was interested

   <?php  
    include('connection_db.php');

   // Start XML file, create parent node

    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("markers");
  $parnode = $dom->appendChild($node); 



   // Select all the rows in the markers table

  $query = "SELECT * FROM markers WHERE 1";
  $result = mysql_query($query);
  if (!$result) {  
  die('Invalid query: ' . mysql_error());
   } 

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

   // Iterate through the rows, adding XML nodes for each

  while ($row = @mysql_fetch_assoc($result)){  
   // ADD TO XML DOCUMENT NODE  
   $node = $dom->createElement("marker");  
   $newnode = $parnode->appendChild($node);   
   $newnode->setAttribute("name",$row['name']);
   $newnode->setAttribute("address", $row['address']);  
   $newnode->setAttribute("lat", $row['lat']);  
   $newnode->setAttribute("lng", $row['lng']);  
   $newnode->setAttribute("type", $row['type']);
 } 

 echo $dom->saveXML();

 ?>

Upvotes: 2

Views: 3394

Answers (1)

Codeguy007
Codeguy007

Reputation: 891

From what you have shown, your java script code is not being run. It should all be placed in the initialize function.

Also you haven't initialized the customIcons variable or given it values. If you are not using it, it can just be removed. It should just use the default marker then.

from guide

Custom Icons You can specify custom icons and shadows for your markers. Start by creating an associative array which associates your icons to your type strings: 'restaurant' or 'bar.' This makes the icons easy to reference later when you create markers from the XML.

var customIcons = {
  restaurant: {
    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'
  }
};

I actually did something similar last year. Though I used php to populate the markers out of the database and not javascript and xml.

Edited: The blog link is no longer valid.

Upvotes: 3

Related Questions