Plotting 'lat lngs' on a map is a fairly straight forward task. Especially doing it on a Google map.
Using a .NET implementation of a Google map is nice and easy. Doing it with PHP and javaScript is a bit more of a work up, but perhaps more satisfying when you get dirty and use some of the natty little Google features available.
However, in the course of writing a site for a Letting agent [www.batterseaflats.com] I came across an unexpected result when geocoding via HTTP with Google.
To make the site really easy to administrate details of properties I thought it would be nice to have a field containing the property's postcode, and during the save process, geocode up the postcode to get a nice 'lat lng' to show on a map. Of course I based the expected result on the performance of locating a postcode via Google's own maps.google.co.uk interface, which is nice and accurate.
Unfortunately, I often ended up with addresses that weren't quite in the right place. Much as I like Germany, I was quite sure I shouldn't be displaying properties outside of London!
I switched to using the GClientGeocoder Google object, but it still wasn't accurate enough. (Consider having four or five properties in the same street to advertise, you really want them to be in the right place on the street).
So I thought I'd let the user geocode an address string (because flats are sometimes in blocks with a name that can cause problems trying to guess what the user has typed in), then allow them to move the point around on the map. A simple feature, which the client really liked!
Use GClientGeocoder to get location:
function locateAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
showPoint(point);
}
});
}
When creating the marker on the map, enable the 'draggable' GMarker property:
var marker = new GMarker(point, { icon: iconAvailable, draggable: true, dragCrossmove: true });
and listen for the marker's 'dragend' and capture the new location:
GEvent.addListener(marker, "dragend", function(latlng) {
captureLatLng(latlng);
});
And when displaying the list of properties, go crazy by synchronising the mouse hovering on the sidebar list of entries with the markers by adding a Event Listeners for 'mouseover' and 'mouseout' switching the styles as needed:
GEvent.addDomListener(div, 'mouseover', function() {
div.className = 'sideHighlight';
marker.setImage('images/highlightHouse.png');
});
GEvent.addDomListener(div, 'mouseout', function() {
div.className = 'sideNormal';
marker.setImage('images/house.png');
});
Details of the Battersea Flats project can be found here: http://www.compsoft.co.uk/Portfolio_Battersea_Flats