I am trying to follow the Google Maps tutorials: "Creating a Store Locator with PHP, MySQL & Google Maps" and "Using PHP/MySQL with Google Maps", but have run into something that is beyond my comprehension. I expect the answer is laughably obvious, but here goes...
I have generated an XML file, from the PHP code in the tutorial, that displays the locations I want in my browser. I also have a working Google Map. However, I don't understand how to load the former into the latter.
Inside the downloadUrl function below, I've changed url to xml_output.php - my PHP that extracts the locations I want from my MySQL database. Is this correct? Do I need to change anything else?
function downloadUrl("xml_output.php",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);
}
I also have the following code to produce the markers that contain the XML information. I've added in xml_output.php here too.
downloadUrl("xml_output.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 address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
Both tutorials say that the downloadUrl function created takes two parameters (i) url - which I'm assuming refers to my PHP file that creates the XML and (ii) callback. Do I need to replace callback with something? The function name in my PHP file is parseToXML($htmlStr) - does this need to occupy the callback position in the function?
Or is this not working because of something else entirely???
If you can help me, I would be beholden unto you and am prepared to name my first-born child after you.
Full code for the whole web page:
<!DOCTYPE html>
<html>
<head>
<script
src="http://ift.tt/1IyejDg">
</script>
<script>
var map;
var myMap=new google.maps.LatLng(51.267867, 0.504360);
function initialize()
{
var mapDiv = document.getElementById('googleMap');
var mapProp =
{
center:myMap,
zoom:12,
panControl:true,
zoomControl:true,
zoomControlOptions: {style:google.maps.ZoomControlStyle.SMALL},
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, position:google.maps.ControlPosition.TOP_Right},
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROAD
}
map = new google.maps.Map(mapDiv, mapProp);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
map.setTilt(0);
google.maps.event.addListener(marker,'click',function()
{infowindow.open(map,marker)}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
function downloadUrl("xml_output.php",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);
}
downloadUrl("xml_output.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 address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
</script>
<title>TEST MAP</title>
<style>
span
{
color:#000000
}
</style>
</head>
<body>
<hr />
<div style="border:2px solid #0066ff;padding:0px 20px;background:#E6F0FF;width:cover;border-radius:20px;">
<h2>TEST MAP</h2>
<div id="googleMap" style="width:100%;height:380px;"></div>
</div>
<hr />
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire