WordPress.org

Ready to get started?Download WordPress

Forums

Google maps SQL->XML->map marker tutorial in WordPress (1 post)

  1. kelmann
    Member
    Posted 1 year 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>';
    
    ?>

Topic Closed

This topic has been closed to new replies.

About this Topic