Using Google Maps

javaScript: using google Maps  get it now

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);
 };

Comments