Writing Web Apps with Google, Yahoo and Microsoft Maps

Google Maps

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>