I am developing a feature to allow site users to enter their address, see it on google maps and adjust the position if necessary.
My site then collects the long/lat and the address details to use later on.
The script itself is working fine, as a standalone feature as you can see at thelondonminibuscompany dot com/a-test2 dot php
(Not allowed to post links but that should lead you there!)
However, currently all of the variables (map div, address box, items to update etc) are hardcoded in, making it tricky to duplicate on the same page and a hassle when I come to update the script later.
I have almost got it working as a javascript object which I can reuse, except for one obstacle I cant figure out how to overcome.
When the marker is dragged to adjust the position a callback function is triggered, but within this function I am unable to access any of the variables declared when calling the original object. I need these variables to know which form fields to update with the new info.
The code is below and you can see the almost working example at thelondonminibuscompany dot com/a-test1 dot php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAqNV6he3XqI9IwO7nWxZLwRSu-gEjJymhTavPnhB6rQ-WpMdzbhTOJFpVL2QuN5shdSuZlitci7_NUA" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAqNV6he3XqI9IwO7nWxZLwRSu-gEjJymhTavPnhB6rQ-WpMdzbhTOJFpVL2QuN5shdSuZlitci7_NUA" type="text/javascript"></script>
<!--<script src="gmap.js" type="text/javascript"></script>-->
<script type="text/javascript">
//<![CDATA[
function draggableMapSearch(myName, map, searchBox, longBox, latBox)
{
if (GBrowserIsCompatible()) {
var myName;
var map;
var searchBox;
var longBox;
var latBox;
var map;
var geo;
var reasons=[];
this.load = function() {
map = new GMap(map);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.498,-0.126),7);
map.enableScrollWheelZoom();
// ====== Create a Client Geocoder ======
geo = new GClientGeocoder();
// ====== Array for decoding the failure codes ======
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.";
}
this.updateLong = function(long) {
longBox.innerHTML = long;
}
this.updateAddress = function(addr) {
searchBox.value = addr;
}
this.place = function(lat, lng) {
}
// ====== Geocoding ======
this.showAddress = function() {
var search = searchBox.value + " UK";
this.showAddress2(search);
}
this.showAddress2 = function(search) {
// ====== Perform the Geocoding ======
geo.getLocations(search, this.callBack);
}
this.callBack = function (result)
{
map.clearOverlays();
if (result.Status.code == G_GEO_SUCCESS) {
// ===== If there was more than one result, "ask did you mean" on them all =====
if (result.Placemark.length > 1) {
document.getElementById("message").innerHTML = "Did you mean:";
// Loop through the results
for (var i=0; i<result.Placemark.length; i++) {
var p = result.Placemark[i].Point.coordinates;
document.getElementById("message").innerHTML += "<br>"+(i+1)+": <a href='javascript:"+myName+".showAddress2(\\"" +result.Placemark[i].address+"\\")'>"+ result.Placemark[i].address+"<\\/a>";
}
}
// ===== If there was a single marker =====
else {
document.getElementById("message").innerHTML = "";
var p = result.Placemark[0].Point.coordinates;
var lat = p[1];
var lng = p[0];
var point = new GLatLng(lat,lng);
map.setCenter(point,15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
document.getElementById("message").innerHTML = "";
document.getElementById("lon").innerHTML = lng;
document.getElementById("lat").innerHTML = lat;
GEvent.addListener(marker, 'dragend', function(position, longBox) {
var pt = marker.getPoint();
map.panTo(pt);
//this.updateLong(pt.lng());
longBox.innerHTML = pt.lng();
//latBox.innerHTML = pt.lat();
geo.getLocations(pt, function (result)
{
//searchBox.value = result.Placemark[0].address;
});
});
searchBox.value = result.Placemark[0].address;
}
}
// ====== 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");
}
};
var map1;
function loadMaps()
{
map1 = new draggableMapSearch("map1", document.getElementById("map"), document.getElementById("search"), document.getElementById("lng"), document.getElementById("lat"));
map1.load()
}
</script>
</head>
<body onload="loadMaps()" >
<form onsubmit="map1.showAddress(); return false" action="#">
<input id="search" size="60" type="text" value="Sydney road, London" />
<input type="submit" value="Go!" />
</form>
<div id="message"></div>
<div id="map" style="width: 300px; height: 200px"></div><p>
<div>address: <span id='add'>.</span ></div>
<div>lon: <span id='lon'>.</span ></div>
<div>lat: <span id='lat'>.</span ></div>
</body>
</html>
Any suggestions will be welcomed.