[jQuery] Geocoding with Google Maps while a page is loading
For several hours I tried to get the Google Map GeoCoding Script of
Blackpool Community Church Javascript Team working with jQuery but I
failed. Loading the script from an external file is no problem. But I
can´t get the function showAddress() starting when the page is
loaded. I tried $(window).load(function(showAddress), $
(document).ready(function() - no one worked. The address is stored in
a paragraph with the id "address" which one I can manipulate. When I
put the JavaScript-Code inside the XHTML-Code an call showAdress with
<body onload="showAddress()"> everthing is working fine. But really -
I don't like JavaScript and XHTML mixed up.
So anyone has an advice for me?
Thank you
Mazso
$(document).ready(function() {
if (GBrowserIsCompatible()) {
var map = new GMap($("#map")[0]);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(20,0),2);
// ====== Create a Client Geocoder ======
var geo = new GClientGeocoder();
// ====== 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.";
// ====== Geocoding ======
function showAddress() {
var search = $("#address").text();
// var search = document.getElementById("search").value;
// ====== Perform the Geocoding ======
geo.getLocations(search, function (result)
{
// If that was successful
if (result.Status.code == G_GEO_SUCCESS) {
// How many resuts were found
document.getElementById("message").innerHTML = "Found "
+result.Placemark.length +" results";
// Loop through the results, placing markers
for (var i=0; i<result.Placemark.length; i++) {
var p = result.Placemark[i].Point.coordinates;
var marker = new GMarker(new GLatLng(p[1],p[0]));
document.getElementById("message").innerHTML +=
"
"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
map.addOverlay(marker);
}
// centre the map on the first result
var p = result.Placemark[0].Point.coordinates;
map.setCenter(new GLatLng(p[1],p[0]),14);
}
// ====== Decode the error status ======
else {
var reason="Code "+result.Status.code;
if (reasons[result.Status.code]) {
reason = reasons[result.Status.code]
}
alert('Could not find "'+search+ '" ' + reason);
}
}
);
}
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
});