Google provides a nice API allowing developers to integrate Google Maps to their web applications. For that you first need to create a Google Map API key from here, http://code.google.com/apis/maps/signup.html. It is free and you can create as many amount of keys as needed for all of your web sites. After generaing the key it will give you a nice piece of sample code. You can use this code to start your work. What you needed to do is include the the Google map API script to your web page and create a GMap2 object. Optionally you can set what should be focused, what controls (navigation, zooming) should be available in the view.

Here is a very simple code I wrote using this API. You can run this code live from here.

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAASLxXDwVRuSoGL8Q-tFgkwBS4YfDDHXLghwcnNbKI3a0b78AiZBS4d4SXNzmv-OUqc8l8T_bziKPHTg"
            type="text/javascript"></script>
    <script type="text/javascript">

   // replace the latitude, logitude, zoom values for your location
   var lat = 8;
   var lon = 80.5;
   var zoom = 8;

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));

        // setting lat lon
        map.setCenter(new GLatLng(lat, lon), zoom);

        // adding the map controls for navigation
        map.addControl(new GSmallMapControl());
      }
    }

    </script>

Yahoo Maps

Yahoo provides two different technologies to add a map to a web page. One is just using Javascript with Ajax and the second is using Javascript with Flash. They both are very simple to use. Similar to Google, you have to have your own app id to run yahoo maps. You can register for an appid from https://developer.yahoo.com/wsregapp/.

Here is the code you may use to have a Flash map. (Click here to view the demo. Remember You need flash to view this).

<script type="text/javascript" src="http://maps.yahooapis.com/v3.5.2/fl/javascript/apiloader.js?appid=CyVSsM_V34GOZUkb9MnakFBTrwVHqfHebJ6LC6nZtoxXMJvbaxczvPh71MXUi_K3"></script>
<script type="text/javascript">

// replace the latitude, logitude, zoom values for your location
var lat = 8;
var lon = 80.5;
var zoom = 10;

// Create a latitude/longitude object 
var latlon = new LatLon(lat, lon);

// Display the map centered on that location. Add your Yahoo! Application
var map = new Map("mapContainer", "CyVSsM_V34GOZUkb9MnakFBTrwVHqfHebJ6LC6nZtoxXMJvbaxczvPh71MXUi_K3", latlon, zoom); 

// Make the map draggable
map.addTool( new PanTool(), true );
</script>

Using Ajax + Javascript Yahoo Map API is very similar to its Flash + javascript API.  Here is the same map is viewed with the Ajax map. (Click here for the live demo of the following code)

<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=CyVSsM_V34GOZUkb9MnakFBTrwVHqfHebJ6LC6nZtoxXMJvbaxczvPh71MXUi_K3"></script>
<script type="text/javascript">  

    // replace the latitude, logitude, zoom values for your location
    var lat = 8;
    var lon = 80.5;
    var zoom = 10;

    // geo point from lat and lon
    var point = new YGeoPoint(lat, lon);

    // Create a map object  
    var map = new YMap(document.getElementById('map'));  

    // Add map type control  
    map.addTypeControl();  

    // Add map zoom (long) control  
    map.addZoomLong();  

    // Add the Pan Control  
    map.addPanControl();  

    // Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG  
    map.setMapType(YAHOO_MAP_SAT);  

    // Display the map centered on a geocoded location  
    map.drawZoomAndCenter(point, zoom);
</script>

Microsoft Virtual Earth

Microsoft Virtual Earth also provides a map API. And it has a really cool interactive map SDK. You can get a nice map with just few lines of javascripts.

      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
      <script type="text/javascript">
         var map = null;

         // replace the latitude, logitude, zoom values for your location
         var lat = 8;
         var lon = 80.5;
         var zoom = 8;

         function GetMap()
         {
            map = new VEMap('map');
            map.LoadMap(new VELatLong(lat, lon), zoom, 'r', false);
         }
      </script>

Here is how this code run.

All Together with OpenLayers

So now we know how to create web based map applications using each of these providers. But how if you want to create map using all the providers. Actually you can do it with some effort in javascripts. But you don’t need to.

That is when openlayers help. You can add maps from Google, Yahoo, Microsoft or any Map Server as layers in a openlayers map.

See how it is done in the following code. You can view a running instance of this code at here.

<!-- you have to include all the maps provider api script + openlayer script -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAASLxXDwVRuSoGL8Q-tFgkwBS4YfDDHXLghwcnNbKI3a0b78AiZBS4d4SXNzmv-OUqc8l8T_bziKPHTg"
            type="text/javascript"></script>
<script type="text/javascript"
        src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=CyVSsM_V34GOZUkb9MnakFBTrwVHqfHebJ6LC6nZtoxXMJvbaxczvPh71MXUi_K3"></script>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script language="javascript">
    // replace the latitude, logitude, zoom values for your location
    var lat = 8;
    var lon = 80.5;
    var zoom = 8;

    var map;

    init();

    function init() {

        // creating the base map
        map = new OpenLayers.Map( 'map' );

        // we will add all the google layers

        gphy = new OpenLayers.Layer.Google(
            "Google Physical",
            {type: G_PHYSICAL_MAP}
        );
        gmap = new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 20}
        );
        gsat = new OpenLayers.Layer.Google(
            "Google Satellite",
            {type: G_SATELLITE_MAP, numZoomLevels: 20}
        );
        ghyb = new OpenLayers.Layer.Google(
            "Google Hybrid",
            {type: G_HYBRID_MAP, numZoomLevels: 20}
        );

        map.addLayers([gphy, gmap, gsat, ghyb]);

        // Now we will add the yahoo layer
        yahooLayer = new OpenLayers.Layer.Yahoo( "Yahoo");
        map.addLayer(yahooLayer);

        // finally adding the MS virtual earth layer
        velayer = new OpenLayers.Layer.VirtualEarth( "VE",
                                {'type': VEMapStyle.Aerial});
        map.addLayer(velayer);

        // adding some control
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
        map.addControl(new OpenLayers.Control.MousePosition());

        // adding the layer switcher
        map.addControl(new OpenLayers.Control.LayerSwitcher());

    }

</script>

There I use the WSO2 Mashup Server to create the stub to invoke the weather forecasting web service. This stub can be easily used to invoke the service from a javascript in a HTML page.

You can visit the mashup from the Mashup Server community site mooshup.com from here, http://mooshup.com/services/Dimuthu/weatherMap/.

Here are the steps I used to create this mashup.

1. First I wrote a javascript to wrap the web service. It has a function that can be used as a stub to invoke the web service operation just as a javascript function call. Here is the source of the javascript I wrote. It wraps the “GmlLatLonList” service operation in the “fetchWeatherInfo” function. I gave this javascript service the name “weatherMap”.

   this.serviceName = "weatherMap";
   this.scope = "application";
   this.documentation = "Visit the weather information from just a mouse click";
   
   fetchWeatherInfo.documentation = "Retrieve the weather information for the given inputs" ;
   fetchWeatherInfo.inputTypes = {"listLatLon" : "string",
                                  "startTime" : "string",
                                  "endTime" : "string"};
   fetchWeatherInfo.outputType = "xml";
   function fetchWeatherInfo(listLatLon, startTime, endTime){
   
       var url = "http://www.weather.gov/forecasts/xml/SOAP_server/ndfdXMLserver.php";
   
       // setting up the the WSRequest
       var request = new WSRequest();
   
       var options = new Array();
       options.useSOAP = 1.1;
       options.useWSA = false;
   
       // do the request
       request.open(options, url, false);
   
       var reqXml =
           <ns:GmlTimeSeries xmlns:ns="uri:DWMLgen">
               <listLatLon>{listLatLon}</listLatLon>
               <startTime>{startTime}</startTime>
               <endTime>{endTime}</endTime>
               <compType>Between</compType>
               <featureType>Ndfd_KmlPoint</featureType>
               <propertyName></propertyName>
           </ns:GmlTimeSeries>
   
       request.send(reqXml);
   
       return request.responseXML;
   }

2. Deployed it in the WSO2 Mashup server. I downloaded and setup the mashup server locally. Then I just needed to put the script inside “scripts/dimuthu” directory. There is an online instance of mashup server called mooshup.com in which I later deployed my service. After deployed it in the mashup, it will generate the javascript stub for that service. You can view the generated stub by adding a “?stub” to the mashup url. Here is the stub for the “weatherMap” mashup deployed in the mooshup server, http://mooshup.com/services/Dimuthu/weatherMap?stub. Similarly you can view the try out page for the service from, http://mooshup.com/services/Dimuthu/weatherMap?tryit
3. Wrote an HTML interface for the service. I used the openlayers javascript library to load google map in to my page. And added a custom control that handles the click. In the click handler, I just call the stub and get the response KML string back using a code similar to this.

   <!-- include the script for the stub -->
   <script type="text/javascript" src="../weatherMap?stub"></script>
   
   <script language="javascript">
   ...
   
   // the code inside the handler of the click control
   
      // preparing the stub call
      weatherMap.fetchWeatherInfo.onError = handleError;
      weatherMap.fetchWeatherInfo.callback = function(response) {
          if(response && response.firstChild.firstChild.nodeValue) {
   
              // handling kml document
              var kmlDoc = response.firstChild.firstChild.nodeValue;
   
              // the code to add the kml layer to the map and render it
              ....
            }
       };
      // preparing the startTime, endTIme, lat, lon values
      ...
   
      // doing the request call
      weatherMap.fetchWeatherInfo(lat + "," + lon, startTime, endTime);
   
   </script>

   The KML style icon will be shown in the map after adding the KML layer to the map. And we can render the KML style details which in this case contain the weather forecast data in detail in some other place easily.

So this way you can create a mashup using openlayers and the data retrieved from different web services. You can find another mashup that shows the twitter updates on a map in real time at here, http://mooshup.com/services/tyrell/TwitterMap/.