Turns out that Google maps is really easy to use. First you need a key, just sing up and get one. Then you can start showing maps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<script src=”http://maps.google.com/maps?file=api&v=2&key=!!MYKEY!!” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
function showmap(geocode) {
if (GBrowserIsCompatible()) {
if ( null == geocode )
geocode = new GLatLng(37.4419, -122.1419)
var map = new GMap2(document.getElementById(”map”));
map.setCenter(geocode, 13);
}
}
//]]>
</script>
</head>
<body onload=”showmap()” onunload=”GUnload()”>
<div id=”map” style=”width: 500px; height: 300px”></div>
</body>
</html>
Now if you like, you can add two more js functions to lookup new addresses, get their lat & lng and show the new map. The function getLatLng will execute the callback function workongeocode with a geocode as the arg.
function lookupaddr(address) {
var geocoder = new GClientGeocoder();
return geocoder.getLatLng(address,workongeocode)
}
function workongeocode(geocode) {
if ( null == geocode )
return
var divReplace = document.getElementById("latlng");
newLi = document.createElement("li");
newLi.innerHTML = geocode.lat() + " " + geocode.lng();
if ( null == divReplace.childNodes[1] ) {
divReplace.childNodes[0].appendChild(newLi);
} else {
divReplace.childNodes[1].appendChild(newLi);
}
showmap(geocode)
}
Now just add this html/js after the <div id=map …. >
<div id="myaddr">
<input type="text" name="thisaddr" size="50" />
</div>
<button onclick="lookupaddr(document.getElementById('myaddr').childNodes[1].value)">Get Lat/Lng
<div id=”latlng” >
<ul>
<li> first!</li>
</ul>
</div>
There you go, easy right?