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

  • kelmann

    (@kelmann)


    13 years, 4 months ago

    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:

    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:

    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