Google Maps Tips

How to redraw a Google Map with proper Zoom and Center properties

Step 1: Define global JS variables  
  var googleMapsCenter;          // and  googleMapsCenter/googleMapsZoom can be used to redraw
  var googleMapsZoom;            // the MAP without any resize operation

Step 2: Step through your LatLng coordinates and re-calculate new Bounds 
        and reisze your Google map with googleGlobalMap.fitBounds()
   var lbounds =     new google.maps.LatLngBounds ();           
   for ( i = 0; i<=lidx ; i++ )         
     {               
     if ( tracks[i].gpxLoaded == true )                 
       {                 
       var northeastLatLong = tracks[i].bounds.getNorthEast();       
       lbounds.extend(northeastLatLong);     
       var southwestLatLong = tracks[i].bounds.getSouthWest();     
       lbounds.extend(southwestLatLong);                
       }         
     } 
 googleGlobalMap.fitBounds( lbounds);  <- Redraw the MAP aligned Bounds  

Step 3: After the MAP is resized save the Center and Zoom settings 
  function getGoogleMapsData()     
   {     
   if ( googleGlobalMap != null )         
     {             
     googleMapsCenter = googleGlobalMap.getCenter();             
     googleMapsZoom  = googleGlobalMap.getZoom();             
     logMessage(    "getGoogleMapData():: googleMapsCenter : " + googleMapsCenter + " - googleMapsZoom: " + googleMapsZoom  );             
     } ...  

Step 4: Use the saved Center and Zoom properties to redraw the Google MAP  
  function redrawMap()     
    {     
    googleGlobalMap = new google.maps.Map(document.getElementById("slider"),       
       {    
       mapTypeId: google.maps.MapTypeId.TERRAIN ,
       center:    googleMapsCenter  ,   
       zoom: googleMapsZoom        });    
       }