Getting around XMLHttpRequest's cross-domain incompatibility
This may be old news to the more advanced users, but I wanted to post
the working example I came up with with the help of another thread (and
Larry :) ):
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/3ea7a2164ab73038/f4f6458b68f2b3da?lnk=raot#f4f6458b68f2b3da
Again, note that this is not my brainchild and there already is a lot
of info about this sort of thing on the Group, but I couldn't find an
actual full example...
The problem:
*****************************************************
Your map gets its data from an XML file that you don't "own", meaning
it's on someone else's server. You'd like to use XMLHttpRequest, but
that will fail because of the cross-domain situation. The example below
shows implementation of that with mutliple XML files that will generate
different sets of markers on your map (for example, the apartments for
rent on one XML file, the houses for rent on another XML file).
The solution:
Create an "application proxy" (an asp file) on your server that reads
the xml file and then serves it to whoever wants it (the map
javascript).
The code:
*****************************************************
aspproxy.asp
*****************************************************
<%
' Get the name of the XML file from the requestor
filename = Request.QueryString("filename")
' Set the repository where all the xml files are kept at the foreign
server
repository =
"http://www.theforeigndomain.com/directorywheretheykeepthexmlfiles/"
url = repository&filename
set xmlhttp = CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.open "GET", url, false
xmlhttp.send ""
' The following basically gives back to the requestor the contents of
the XML file
Response.write xmlhttp.responseText
set xmlhttp = nothing
%>
*****************************************************
Javascript to create the map
*****************************************************
//<![CDATA[
function loadMap(route) {
if (GBrowserIsCompatible()) {
// Create a custom icon
var icon = new GIcon();
icon.image = "myicon.gif";
icon.iconSize = new GSize(20, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Create your map
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(YOUR_LONG,YOUR_LAT), YOUR_ZOOM_LEVEL);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Function to create markers
function createMarker(point,label) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, 'click', function()
{marker.openInfoWindowHtml(label);});
return marker;
}
// Create the XML request
var request = GXmlHttp.create();
// Call the application proxy and give it the filename
request.open('GET', 'aspproxy.asp?filename=SOMETHING.xml',
true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
// Parse the XML we got as a response to our request to the
application proxy
var xmlDoc = GXml.parse(request.responseText);
// Create markers based on info contained in the XML, in this
case html for the label as well as lat and long for all the points
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new
GPoint(parseFloat(markers[i].getAttribute("lng")),parseFloat(markers[i].getAttribute("lat")));
var marker = new
createMarker(point,markers[i].getAttribute("label"));
//var marker = new
GMarker(point,icon);
map.addOverlay(marker);
}
}
}
request.send(null);
}
}
//]]>
0 Comments:
Yorum Gönder
<< Home