google maps and javascript help

hargi · 17 Sep 2009 at 21:53

working thru a 'beginers guide to google maps with php and ajax'

I have a test going here http://www.hargitech.co.uk/map.php you click on the map and you can enet a club and how good the strike is. When you click save it should write this info to an xml file.
i have set a data.xml file up with write permissions.

map_functions.js

Code:

 var centerLatitude = 54.71464;
 var centerLongitude = -1.72918;
 var startZoom = 17;
  
 var map;
  
 function init() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
 map.setMapType(G_SATELLITE_MAP); 
 
 //allow the user to click the map to create a marker
	 GEvent.addListener(map, "click", function(overlay, latlng) {
	 //create an HTML DOM form element
	 var inputForm = document.createElement("form");
	 inputForm.setAttribute("action","");
	 inputForm.onsubmit = function() {storeMarker(); return false;};
	  
	 //retrieve the longitude and lattitude of the click point
	 var lng = latlng.lng();
	 var lat = latlng.lat();
	  
	 inputForm.innerHTML = '<fieldset style="width:150px;">'
	 + '<legend>New Shot</legend>'
	 + '<label for="Club">Club</label>'
	+ ' <select name="Club">'
	+ '<option value="Driver">Driver</option>'
	+ '<option value="3 Wood">3 Wood</option>'
	+ '<option value="5 Wood">5 Wood</option>'
	+ '<option value="Rescue">Rescue</option>'
	+ '<option value="3 Iron">3 Iron</option>'
	+ '<option value="4 Iron">4 Iron</option>'
	+ '<option value="5 Iron">5 Iron</option>'
	+ '<option value="6 Iron">6 Iron</option>'
	+ '<option value="7 Iron">7 Iron</option>'
	+ '<option value="8 Iron">8 Iron</option>'
	+ '<option value="9 Iron">9 Iron</option>'
	+ '<option value="PW">PW</option>'
	+ '<option value="51 Degrees">51 Degrees</option>'
	+ '<option value="SW">SW</option>'
	+ '<option value="LW">LW</option>'
	+ '</select>'
	 + '<label for="strike">Strike</label>'
	+ ' <select name="strike">'
	+ '<option value="Good">Good</option>'
	+ '<option value="Average">Average</option>'
	+ '<option value="Fat">Fat</option>'
	+ '<option value="Thin">Thin</option>'
	+ '<option value="Hook">Hook</option>'
	+ '<option value="Slice">Slice</option>'
	+ '<option value="Pull">Pull</option>'
	+ '<option value="Push">Push</option>'
	+ '</select>'
	 + '<input type="submit" value="Save"/>'
	 + '<input type="hidden" id="longitude" value="' + lng + '"/>'
	 + '<input type="hidden" id="latitude" value="' + lat + '"/>'
	 + '</fieldset>';
	  
	 map.openInfoWindow (latlng,inputForm);
	 });
	 }
	
 }
  
  
  
 window.onload = init;
  function storeMarker(){
 var lng = document.getElementById("longitude").value;
 var lat = document.getElementById("latitude").value;
  
 var getVars = "?club=" + document.getElementById("club").value
 + "&strike=" + document.getElementById("strike").value
 + "&lng=" + lng
 + "&lat=" + lat ;
  
 var request = GXmlHttp.create();
  
 //open the request to storeMakres.php on your server
 request.open('GET', 'storeMarker.php' + getVars, true);
 request.onreadystatechange = function() {
 if (request.readyState == 4) {
 //the request in complete
  
 var xmlDoc = request.responseXML;
  
 //retrieve the root document element (response)
 var responseNode = xmlDoc.documentElement;
  
 //retrieve the type attribute of the node
 var type = responseNode.getAttribute("type");
  
 //retrieve the content of the responseNode
 var content = responseNode.firstChild.nodeValue;
  
 //check to see if it was an error or success
 if(type!='success') {
 alert(content);
 } else {
 //Create a new marker and add its info window.
 var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));
 var marker = createMarker(latlng, content);
 map.addOverlay(marker);
 map.closeInfoWindow();
 }
 }
 }
 request.send(null);
 return false;
 }
  
 function createMarker(latlng, html) {
 var marker = new GMarker(latlng);
 GEvent.addListener(marker, 'click', function() {
 var markerHTML = html;
 marker.openInfoWindowHtml(markerHTML);
 });
 return marker;
 }
  
 
 window.onunload = GUnload;

storeMarker.php

Code:

    <?php
    header('Content-Type: text/xml;charset=UTF-8');
     
    //see Listing 3-9 for icon related items in the code
     
    $lat = (float)$_GET['lat'];
    $lng = (float)$_GET['lng'];
    $club = htmlspecialchars(strip_tags(utf8_encode($_GET['club'])));
    $strike = htmlspecialchars(strip_tags(utf8_encode($_GET['strike'])));
 
    
   //Create an XML node
   $marker = <<<MARKER
   <marker lat="$lat" lng="$lng" club="$club" strike="$strike"/>
   MARKER;
    
   //open the data.xml file for appending
   $f=@fopen('data.xml', 'a+');
   if(!$f) die('<?xml version="1.0"?>
   <response type="error"><![CDATA[Could not open data.xml file]]></response>
   ');
    
   //add the node
   $w=@fwrite($f, $marker);
   if(!$w) die('<?xml version="1.0"?>
   <response type="error"><![CDATA[Could not write to data.xml file]]></response>');
    
   @fclose($f);
    
   //return a response
   $newMarkerContent = "<div><b>Club</b> $club</div><div><b>strike</b> $strike</div>";
    
   echo <<<XML
   <?xml version="1.0"?>
   <response type="success" ><![CDATA[$newMarkerContent]]></response>
   XML;
   ?>

As you see nothing happens when you click save, and nothing is been wrote to the data.xml file but theres no error messages so is the storeMarker.php been called or what do you thinks the matter

TIA

fez · 18 Sep 2009 at 09:41

Use firebug or something like that to debug.

google maps and javascript help

hargi

hargi

fez

fez