Deprecated
Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications. 

javaScript: Flying around and asynchronicity in google Earth

This relates to Data Driven Mapping applications and the Javascript HowTo section

Google Maps Api

You will find tons of content on Google Maps, most of which is described much better than I can. In this section I will cover the small items of interest that I found to be hard to track down when I was developing this application.

Deciding the zoom level and centering a map

With google maps you can create ‘bounds’ which is essentially the area you want shown by default when the map starts up. The zoom level can also be adjusted to be appropriate to that ‘bounding box’. However when you only have one point it zooms up real close, so it’s a bit messy. Here is my work around for that where I set a default zoom level, either arriving as a URL parameter or a default.
var bounds = new google.maps.LatLngBounds();
     for ( var i = 0; i < cj.length; i++ )
      bounds.extend (new google.maps.LatLng
                   (cj[i].Latitude, cj[i].Longtitude));
     
     var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    // get parameters if any
     var qparams = mcpherGetqparams();
     if (!qparams['zoom']) qparams['zoom'] = 2;
     myOptions['zoom'] = parseInt(qparams['zoom']);
    // create the map 
     vMap.mapDiv = document.getElementById('map_canvas');
     vMap.map = new google.maps.Map(vMap.mapDiv, myOptions);
     vMap.map.fitBounds(bounds);

Create a marker on the map

Here is how to create a marker for each data item and associate an event with a click on that marker
mcpherSpot.prototype.createSpot = function () {
   
  // create a marker on the map
   
   var gMarker = new google.maps.Marker({
      position: new google.maps.LatLng(this.lat,this.lng), 
      map: this.parent.map,
      title: this.title
      });;
   this.marker = gMarker;
   var spot = this;
   google.maps.event.addListener(gMarker, 'click', function() {
            spot.createInfoWindow  (0);
     }); 
   
   return this;
  };

Marker click event

When one of my markers is clicked I bring up a tabbed infowindow. Tabbed infowindows are not supported directly by Google Maps V3. See Creating a tabbed Google Mapping InfoWindow for how to do this.
mcpherSpot.prototype.createInfoWindow = function (startTabIndex){
      //default is the first tab
   var vm = this.parent;
   var spot=this;
   var gMap = spot.parent.map;
   var uItem = vm.items[spot.usingIndex];
   vm.statusUpdate('..creating info for '+spot.title,true);
   var iw = spot.infoWindow = new google.maps.InfoWindow (); 
   // select the appropriate tab
   uItem.fillDiv(uItem.infoTabs[startTabIndex]);
   // set the content

   var iDiv = document.createElement('div');
   this.container = iDiv;
   iDiv.appendChild (uItem.container);
   iDiv.className = vm.cssShow + ' ' + vm.cssInfoWindow;
   iw.setContent (iDiv);
   iw.open(gMap,spot.marker);
   
   var s= '..plotted info for '+spot.title;
   google.maps.event.addListener(iw, 'domready', function() {
       vm.statusUpdate(s,false,null);
      }); 
      
   return (iw);
 };

As usual questions, feedback and comments are welcome at our forum. Now lets take a look at more javaScript snippets from this application

For help and more information join our forum, follow the blog or follow me on Twitter