Ryler Sexton Ryler Sexton - 1 year ago 88
PHP Question

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(
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.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);

function doNothing() {}

<body onload="initialize()">
<div id="contain">
<div id="map_canvas" style="width:500px; height:500px"></div>

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

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"),

if anyone was interested


// 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)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']);

echo $dom->saveXML();


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download