Menu
hi, iv got the google maps api and key etc, and i got the map working pretty much it shows markers depending on whats in my xml file which is populated from a mysql table
the problem im having is when i click on the markers on the map itself it only displays the last data held in the table being queried but clicking on the sidebar on the markers name displays the information corretly on the map
i got the code form a tutorial (link can be found in a code comment) iv looked thru loads of times now and cant see where i am going wrong any help is appreciated
[CODE] <script type=”text/javascript”>
//<![CDATA[
if (GBrowserIsCompatible()) {
var side_bar_html = “”;
var gmarkers = [];
var htmls = [];
// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];
// A function to create the marker and set up the event window
function createMarker(point,JobID,UnitID,JobDescription,Postcode) {
var marker = new GMarker(point);
var i = gmarkers.length;
// The info window version with the “to here” form open
to_htmls[i] = ‘<strong>’+ JobID +'</strong><br />’ + UnitID +'<br />’+ JobDescription + ‘<br />’ + Postcode + ‘<br>Directions: <b>To here</b> – <a href=”javascript:fromhere(‘ + i + ‘)”>From here</a>’ +
‘<br>Start address:<form action=”javascript:getDirections()”>’ +
‘<input type=”text” SIZE=40 MAXLENGTH=40 name=”saddr” id=”saddr” value=”” /><br>’ +
‘<INPUT value=”Get Directions” TYPE=”SUBMIT”><br>’ +
‘Walk <input type=”checkbox” name=”walk” id=”walk” /> Avoid Highways <input type=”checkbox” name=”highways” id=”highways” />’ +
‘<input type=”hidden” id=”daddr” value=”‘+JobID+”@”+ point.lat() + ‘,’ + point.lng() +
‘”/>’;
// The info window version with the “from here” form open
from_htmls[i] = ‘<strong>’+ JobID +'</strong><br />’ + UnitID +'<br />’+ JobDescription + ‘<br />’ + Postcode + ‘<br>Directions: <a href=”javascript:tohere(‘ + i + ‘)”>To here</a> – <b>From here</b>’ +
‘<br>End address:<form action=”javascript:getDirections()”>’ +
‘<input type=”text” SIZE=40 MAXLENGTH=40 name=”daddr” id=”daddr” value=”” /><br>’ +
‘<INPUT value=”Get Directions” TYPE=”SUBMIT”><br>’ +
‘Walk <input type=”checkbox” name=”walk” id=”walk” /> Avoid Highways <input type=”checkbox” name=”highways” id=”highways” />’ +
‘<input type=”hidden” id=”saddr” value=”‘+JobID+”@”+ point.lat() + ‘,’ + point.lng() +
‘”/>’;
// The inactive version of the direction info
html = ‘<strong>’+ JobID +'</strong><br />’ + UnitID +'<br />’+ JobDescription + ‘<br />’ + Postcode + ‘<br>Directions: <a href=”javascript:tohere(‘+i+’)”>To here</a> – <a href=”javascript:fromhere(‘+i+’)”>From here</a>’;
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += ‘<a href=”javascript:myclick(‘ + i + ‘)”>’ + JobID + ‘</a><br>’;
return marker;
}
// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var opts = {};
if (document.getElementById(“walk”).checked) {
opts.travelMode = G_TRAVEL_MODE_WALKING;
}
if (document.getElementById(“highways”).checked) {
opts.avoidHighways = true;
}
// ==== set the start and end locations ====
var saddr = document.getElementById(“saddr”).value
var daddr = document.getElementById(“daddr”).value
gdir.load(“from: “+saddr+” to: “+daddr, opts);
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// functions that open the directions forms
function tohere(i) {
gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
function fromhere(i) {
gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}
// create the map
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.797954,-3.183176), 9);
// === create a GDirections Object ===
var gdir=new GDirections(map, document.getElementById(“directions”));
// === Array for decoding the failure codes ===
var reasons=[];
reasons[G_GEO_SUCCESS] = “Success”;
reasons[G_GEO_MISSING_ADDRESS] = “Missing Address: The address was either missing or had no value.”;
reasons[G_GEO_UNKNOWN_ADDRESS] = “Unknown Address: No corresponding geographic location could be found for the specified address.”;
reasons[G_GEO_UNAVAILABLE_ADDRESS]= “Unavailable Address: The geocode for the given address cannot be returned due to legal or contractual reasons.”;
reasons[G_GEO_BAD_KEY] = “Bad Key: The API key is either invalid or does not match the domain for which it was given”;
reasons[G_GEO_TOO_MANY_QUERIES] = “Too Many Queries: The daily geocoding quota for this site has been exceeded.”;
reasons[G_GEO_SERVER_ERROR] = “Server error: The geocoding request could not be successfully processed.”;
reasons[G_GEO_BAD_REQUEST] = “A directions request could not be successfully parsed.”;
reasons[G_GEO_MISSING_QUERY] = “No query was specified in the input.”;
reasons[G_GEO_UNKNOWN_DIRECTIONS] = “The GDirections object could not compute directions between the points.”;
// === catch Directions errors ===
GEvent.addListener(gdir, “error”, function() {
var code = gdir.getStatus().code;
var reason=”Code “+code;
if (reasons[code]) {
reason = reasons[code]
}
alert(“Failed to obtain directions, “+reason);
});
// Read the data from example.xml
var request = GXmlHttp.create();
request.open(“GET”, “mapData.php”, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName(“marker”);
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute(“X”));
var lng = parseFloat(markers[i].getAttribute(“Y”));
var point = new GLatLng(lat,lng);
var JobDescription = markers[i].getAttribute(“JobDescription”);
var JobID = markers[i].getAttribute(“JobID”);
var UnitID = markers[i].getAttribute(“UnitID”);
var Postcode = markers[i].getAttribute(“Postcode”);
// create the marker
var marker = createMarker(point,JobID,UnitID,JobDescription,Postcode);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById(“side_bar”).innerHTML = side_bar_html;
}
}
request.send(null);
}
else {
alert(“Sorry, the Google Maps API is not compatible with this browser”);
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
also a bit off topic but does anyone know how i can set it so that instead of getting directions to or from a marker i can get directions between markers?
many thanks.