Google Maps API
A well-know service, used by many people is Google Maps API. See them at work at maps.google.com.
You can integrate all these maps directly in your websites or applications. Google Maps API is based on JavaScript. You also need to register your ID key used in all map web pages. First thing, is to include Google JavaScript page from http://maps.google.com/maps :
<script src="http://maps.google.com/maps?file=api&v=1&key= … key ID …" type="text/javascript">
</script>
Then you can use all JavaScript objects and functions provided by this API, documented here. Here's a small example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8″/><title>Google Maps JavaScript API Example: simple</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRQjskl1-YgiA_BGX2yRrf7htVrbmBTEB0IH-F489GrwP8-dHLib7cKKIQ" mce_src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRQjskl1-YgiA_BGX2yRrf7htVrbmBTEB0IH-F489GrwP8-dHLib7cKKIQ"
type="text/javascript">
</script><script type="text/javascript">
function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
}
}
</script>
</head>
<body onload="onLoad()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Idea is simple: create an GMap object based on a GPoint object created from longitude and latitude. Then you can add more objects as layers (GMarker) with their own events (GEvent).
Let's see a little bit more complicated demo with more functionality (popup window). This sample will work only from our website because of the ID key (unless you change it). As you can see, after loading, the maps are independent from your webpage, with their own navigation. All points must be specified by their longitude and latitude, you can't use full addresses. To get this geocodes you can use other websites like www.infosports.com/m/map.htm or www.geocoder.us.
Google API offers much more functionality. You can add markers to the map, with their own events and HTML content. Let's see such an example, with a marker and custom text displayed when click it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAMWlN5S_pnUghkzaCL6OMMhRPit09n3FXh9HBeHPLQkDYD-WLrxTsecUOe9Urm4gtthzKpsI0hcmToA" mce_src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAMWlN5S_pnUghkzaCL6OMMhRPit09n3FXh9HBeHPLQkDYD-WLrxTsecUOe9Urm4gtthzKpsI0hcmToA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
var point = new GPoint(-79.3763, 43.6458);
map.centerAndZoom(point, 8 );
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Hi there!");
});
map.addOverlay(marker);
</script>
</body>
</html>
For a full description of the objects, their methods, events and properties see their documentation (including more complex samples).