Title: Google maps SQL-&gt;XML-&gt;map marker tutorial in WordPress
Last modified: August 20, 2016

---

# Google maps SQL->XML->map marker tutorial in WordPress

 *  [kelmann](https://wordpress.org/support/users/kelmann/)
 * (@kelmann)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/google-maps-sql-xml-map-marker-tutorial-in-wordpress/)
 * Hi all
    I have been trying to figure out what is wrong with my code for a couple
   days now, and I cant seem to crack it. I am trying to follow this tutorial: [](https://developers.google.com/maps/articles/phpsqlajax_v3)
 * I tried all three of the suggested methods to output the XML from my sql server,
   and I could only get it to work using echo.
 * The issue I am having is I keep getting the error “TypeError: xml is null”
 * This happens at “var markers = xml.documentElement.getElementsByTagName(“marker”);”
   in the code posted below.
 * I have no idea how to continue. Please let me know if there are any questions
   I can answer for you all. Here is the webpage where the code is trying to run:
   [](http://www.theworldsflight.com/fligh-interaction/flight-suggestions/)
 * Here is the code:
 * (Header section)
 *     ```
       <?php
       /**
        * Header Template
        *
        * The header template is generally used on every page of your site. Nearly all other templates call it
        * somewhere near the top of the file. It is used mostly as an opening wrapper, which is closed with the
        * footer.php file. It also executes key functions needed by the theme, child themes, and plugins.
        *
        * @package Oxygen
        * @subpackage Template
        */
       ?>
       <!doctype html>
       <html <?php language_attributes(); ?>>
   
       <head>
       	<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
       	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
       	<!-- Mobile viewport optimized -->
       	<meta name="viewport" content="width=device-width,initial-scale=1">
   
       	<?php if ( hybrid_get_setting( 'oxygen_favicon_url' ) ) { ?>
       		<!-- Favicon -->
       		<link rel="shortcut icon" href="<?php echo hybrid_get_setting( 'oxygen_favicon_url' ); ?>" />
       	<?php } ?>
   
       	<!-- Title -->
       	<title><?php hybrid_document_title(); ?></title>
   
       	<!-- Stylesheet -->
       	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
   
       	<link rel="profile" href="http://gmpg.org/xfn/11" />
       	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
   
       	<!-- Google Maps Scrips -->
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   
           <script type="text/javascript"
             src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA-ZWuoso96viUofF_enb79SiN7QwYIh1o&sensor=false">
           </script>
           <script type="text/javascript">
   
       		//Variables used in maps
               var geocoder;
               var map;
               var markersArray = [];
               var infos = [];
   
       		geocoder = new google.maps.Geocoder();
   
       		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'
       			}
       		};	
   
           function initialize() {
               var mapOptions = {
                 center: new google.maps.LatLng(47.6, -122.3),
                 zoom: 8,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
               };
               map = new google.maps.Map(document.getElementById("content_map"),
                   mapOptions);
   
       		var infoWindow = new google.maps.InfoWindow;
   
       		google.maps.event.addListener(map, 'click', function(event) {
       			placeMarker(event.latLng, map);
       		});
   
             // loads the xml data from marker database
       		  downloadUrl("http://wp-content/themes/oxygen-child/phpsqlajax_genxml3.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 type = markers[i].getAttribute("type");
       			  var description = markers[i].getAttribute("description");
       			  var point = new google.maps.LatLng(
       				  parseFloat(markers[i].getAttribute("lat")),
       				  parseFloat(markers[i].getAttribute("lng")));
       			  var rank = markers[i].getAttribute("rank");
       			  var html = "<b>" + name + "</b> <br/>" + description;
       			  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 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() {}
   
           //]]>
   
       	  function placeMarker(location, map) {
       		var marker = new google.maps.Marker({
       			position: location,
       			map: map
       			});
       			map.panTo(position);
       	  } 
   
           </script>
   
       	<!-- WP Head -->
       	<?php wp_head(); ?>
   
       </head>
   
       <body class="<?php hybrid_body_class(); ?> " onload="initialize()">
   
       	<?php do_atomic( 'open_body' ); // oxygen_open_body ?>
   
       	<div id="container">
   
       		    <style type="text/css">
       			#container { height: 100% }
       			</style>
   
       		<div class="wrap_map">
   
       			<?php do_atomic( 'before_header' ); // oxygen_before_header ?>
   
       			<div id="header_map">
   
       				<?php do_atomic( 'open_header' ); // oxygen_open_header ?>
   
       					<?php get_sidebar( 'header' ); // Loads the sidebar-header.php template. ?>
   
       					<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>					
   
       					<?php do_atomic( 'header' ); // oxygen_header ?>
   
       				<?php do_atomic( 'close_header' ); // oxygen_close_header ?>
   
       			</div><!-- #header -->
   
       			<?php do_atomic( 'after_header' ); // oxygen_after_header ?>
   
       			<?php do_atomic( 'before_main' ); // oxygen_before_main ?>
   
       			<div id="main_map">
   
       				<?php do_atomic( 'open_main' ); // oxygen_open_main ?>
       ```
   
 * (phpsqlajax_genxml3.php
 *     ```
       <?php
       require("phpsqlajax_dbinfo.php");
   
       function parseToXML($htmlStr)
       {
       $xmlStr=str_replace('<','<',$htmlStr);
       $xmlStr=str_replace('>','>',$xmlStr);
       $xmlStr=str_replace('"','&quot;',$xmlStr);
       $xmlStr=str_replace("'",'&apos;',$xmlStr);
       $xmlStr=str_replace("&",'&',$xmlStr);
       return $xmlStr;
       } 
   
       // Opens a connection to a mySQL server
       $connection=mysql_connect (localhost, $username, $password);
       if (!$connection) {
         die('Not connected : ' . mysql_error());
       }
   
       // Set the active mySQL database
       $db_selected = mysql_select_db($database, $connection);
       if (!$db_selected) {
         die ('Can\'t use db : ' . mysql_error());
       }
   
       // 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");
   
       // 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 'name="' . parseToXML($row['name']) . '" ';
         echo 'type="' . $row['type'] . '" ';
         echo 'description="' . parseToXML($row['description']) . '" ';
         echo 'lat="' . $row['lat'] . '" ';
         echo 'lng="' . $row['lng'] . '" ';
         echo 'rank="' . $row['rank'] . '" ';
   
         echo '/>';
       }
   
       // End XML file
       echo '</markers>';
   
       ?>
       ```
   

The topic ‘Google maps SQL->XML->map marker tutorial in WordPress’ is closed to 
new replies.

## Tags

 * [tutorial](https://wordpress.org/support/topic-tag/tutorial/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 0 replies
 * 1 participant
 * Last reply from: [kelmann](https://wordpress.org/support/users/kelmann/)
 * Last activity: [13 years, 4 months ago](https://wordpress.org/support/topic/google-maps-sql-xml-map-marker-tutorial-in-wordpress/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
