gmaps4rails 0.11.1 → 1.0.0

data/public/javascripts/gmaps4rails/gmaps4rails.base.js

@@ -1,34 +1,40 @@
-var Gmaps4Rails = {
-  
-  //map config
-  map: null,                  // contains the map we're working on
-  visibleInfoWindow: null,    //contains the current opened infowindow
-  userLocation: null,         //contains user's location if geolocalization was performed and successful
+var Gmaps = {mapsToLoad: []};
 
-  //empty slots
-  geolocationFailure: function() { return false;},  //triggered when geolocation fails. If customized, must be like: function(navigator_handles_geolocation){} where 'navigator_handles_geolocation' is a boolean
-  callback:           function() { return false;},  //to let user set a custom callback function
-  customClusterer:    function() { return null;},   //to let user set custom clusterer pictures
-  infobox:            function() { return null;},   //to let user use custom infoboxes
+Gmaps.loadMaps = function(){
+  for (var i = 0; i <  Gmaps.mapsToLoad.length; ++i) {
+    window[Gmaps.mapsToLoad[i]]();
+  }
+};
 
+function Gmaps4Rails() {
 
+  //map config
+  this.map =  null;                  // contains the map we're working on
+  this.visibleInfoWindow = null;    //contains the current opened infowindow
+  this.userLocation = null;         //contains user's location if geolocalization was performed and successful
+
+  //empty slots
+  this.geolocationFailure = function() { return false;}  //triggered when geolocation fails. If customized, must be like= function(navigator_handles_geolocation){} where 'navigator_handles_geolocation' is a boolean
+  this.callback =           function() { return false;}  //to let user set a custom callback function
+  this.customClusterer =    function() { return null;}   //to let user set custom clusterer pictures
+  this.infobox =            function() { return null;}   //to let user use custom infoboxes
 
-  map_options: {
-    id: 'gmaps4rails_map',
+  this.default_map_options = {
+    id: 'map',
     draggable: true,
     detect_location: false,  // should the browser attempt to use geolocation detection features of HTML5?
     center_on_user: false,   // centers map on the location detected through the browser
     center_latitude: 0,
     center_longitude: 0, 
-    zoom: 1,
+    zoom: 7,
     maxZoom: null,
     minZoom: null,
     auto_adjust : true,     // adjust the map to the markers if set to true
     auto_zoom: true,        // zoom given by auto-adjust
     bounds: []              // adjust map to these limits. Should be [{"lat": , "lng": }]    
-  },
+  };
   
-  markers_conf: {
+  this.default_markers_conf = {
     // Marker config
     title: "",
     // MarkerImage config
@@ -37,61 +43,63 @@ var Gmaps4Rails = {
     length: 32,
     draggable: false,         // how to modify: <%= gmaps( "markers" => { "data" => @object.to_gmaps4rails, "options" => { "draggable" => true }}) %>
     //clustering config
-    do_clustering: false,      // do clustering if set to true
+    do_clustering: true,      // do clustering if set to true
     randomize: false,         // Google maps can't display two markers which have the same coordinates. This randomizer enables to prevent this situation from happening.
     max_random_distance: 100, // in meters. Each marker coordinate could be altered by this distance in a random direction
     list_container: null,     // id of the ul that will host links to all markers
-    offset: 0                //used when adding_markers to an existing map. Because new markers are concated with previous one, offset is here to prevent the existing from being re-created.
-  },
+    offset: 0                 //used when adding_markers to an existing map. Because new markers are concated with previous one, offset is here to prevent the existing from being re-created.
+  };
   
   //Stored variables
-  markers: [],            // contains all markers. A marker contains the following: {"description": , "longitude": , "title":, "latitude":, "picture": "", "width": "", "length": "", "sidebar": "", "serviceObject": google_marker}
-  boundsObject: null,     // contains current bounds from markers, polylines etc...
-  polygons: [],           // contains raw data, array of arrays (first element could be a hash containing options)
-  polylines: [],          // contains raw data, array of arrays (first element could be a hash containing options)
-  circles: [],            // contains raw data, array of hash
-  markerClusterer: null,  // contains all marker clusterers
-  markerImages: [],
+  this.markers = [];            // contains all markers. A marker contains the following: {"description": , "longitude": , "title":, "latitude":, "picture": "", "width": "", "length": "", "sidebar": "", "serviceObject": google_marker}
+  this.boundsObject = null;     // contains current bounds from markers, polylines etc...
+  this.polygons = [];           // contains raw data, array of arrays (first element could be a hash containing options)
+  this.polylines = [];          // contains raw data, array of arrays (first element could be a hash containing options)
+  this.circles = [];            // contains raw data, array of hash
+  this.markerClusterer = null;  // contains all marker clusterers
+  this.markerImages = [];
   
   //initializes the map
-  initialize: function() {
+  this.initialize = function() {
 
-    this.map = Gmaps4Rails.createMap();
+    this.map = this.createMap();
 
     if (this.map_options.detect_location === true || this.map_options.center_on_user === true) { 
-      this.findUserLocation();
+      this.findUserLocation(this);
     }    
     //resets sidebar if needed
     this.resetSidebarContent();
-  },
+  }
 
-  findUserLocation: function() {
+ // this.initialize();
+
+  this.findUserLocation = function(map_object) {
     if(navigator.geolocation) {
       //try to retrieve user's position
       navigator.geolocation.getCurrentPosition(function(position) {
         //saves the position in the userLocation variable
-        Gmaps4Rails.userLocation = Gmaps4Rails.createLatLng(position.coords.latitude, position.coords.longitude);
+        map_object.userLocation = map_object.createLatLng(position.coords.latitude, position.coords.longitude);
         //change map's center to focus on user's geoloc if asked
-        if(Gmaps4Rails.map_options.center_on_user === true) {
-          Gmaps4Rails.centerMapOnUser();
+        if(map_object.map_options.center_on_user === true) {
+          map_object.centerMapOnUser();
         }
       },
       function() {
         //failure, but the navigator handles geolocation
-        this.geolocationFailure(true);
+        map_object.geolocationFailure(true);
       });
     }
     else {
       //failure but the navigator doesn't handle geolocation
-      this.geolocationFailure(false);
+      map_object.geolocationFailure(false);
     }
-  },
+  }
 
   ////////////////////////////////////////////////////
   //////////////////// DIRECTIONS ////////////////////
   ////////////////////////////////////////////////////
 
-  create_direction: function(){
+  this.create_direction = function(){
     var directionsDisplay = new google.maps.DirectionsRenderer();
     var directionsService = new google.maps.DirectionsService();
 
@@ -120,7 +128,7 @@ var Gmaps4Rails = {
         directionsDisplay.setDirections(response);
       }
     });
-  },
+  }
 
   ////////////////////////////////////////////////////
   ///////////////////// CIRCLES //////////////////////
@@ -128,14 +136,14 @@ var Gmaps4Rails = {
 
   //Loops through all circles
   //Loops through all circles and draws them
-  create_circles: function() {
+  this.create_circles = function() {
     for (var i = 0; i < this.circles.length; ++i) {
       //by convention, default style configuration could be integrated in the first element
       this.create_circle(this.circles[i]);
     }
-  },
+  }
 
-  create_circle: function(circle) {
+  this.create_circle = function(circle) {
     if ( i === 0 ) {
       if (this.exists(circle.strokeColor  )) { this.circles_conf.strokeColor   = circle.strokeColor; 	 }
       if (this.exists(circle.strokeOpacity)) { this.circles_conf.strokeOpacity = circle.strokeOpacity; }
@@ -147,7 +155,7 @@ var Gmaps4Rails = {
       // always check if a config is given, if not, use defaults
       // NOTE: is there a cleaner way to do this? Maybe a hash merge of some sort?
       var newCircle = new google.maps.Circle({
-        center:        Gmaps4Rails.createLatLng(circle.lat, circle.lng),
+        center:        this.createLatLng(circle.lat, circle.lng),
         strokeColor:   circle.strokeColor   || this.circles_conf.strokeColor,
         strokeOpacity: circle.strokeOpacity || this.circles_conf.strokeOpacity,
         strokeWeight:  circle.strokeWeight  || this.circles_conf.strokeWeight,
@@ -160,52 +168,52 @@ var Gmaps4Rails = {
       circle.serviceObject = newCircle;
       newCircle.setMap(this.map);
     }
-  },
+  }
 
   // clear circles
-  clear_circles: function() {
+  this.clear_circles = function() {
     for (var i = 0; i <  this.circles.length; ++i) {
       this.clear_circle(this.circles[i]);
     }
-  },
+  }
 
-  clear_circle: function(circle) {
+  this.clear_circle = function(circle) {
     circle.serviceObject.setMap(null);
-  },
+  }
 
-  hide_circles: function() {
+  this.hide_circles = function() {
     for (var i = 0; i <  this.circles.length; ++i) {
       this.hide_circle(this.circles[i]);
     }
-  },
+  }
 
-  hide_circle: function(circle) {
+  this.hide_circle = function(circle) {
     circle.serviceObject.setMap(null);
-  },
+  }
 
-  show_circles: function() {
+  this.show_circles = function() {
     for (var i = 0; i <  this.circles.length; ++i) {
       this.show_circle(this.circles[i]);
     }
-  },
+  }
 
-  show_circle: function(circle) {
+  this.show_circle = function(circle) {
     circle.serviceObject.setMap(this.map);
-  },
+  }
 
   ////////////////////////////////////////////////////
   ///////////////////// POLYGONS /////////////////////
   ////////////////////////////////////////////////////
 
   //polygons is an array of arrays. It loops.
-  create_polygons: function(){
+  this.create_polygons = function(){
     for (var i = 0; i < this.polygons.length; ++i) {
       this.create_polygon(i);
     }
-  },
+  }
 
   //creates a single polygon, triggered by create_polygons
-  create_polygon: function(i){
+  this.create_polygon = function(i){
     var polygon_coordinates = [];
     var strokeColor;   
     var strokeOpacity; 
@@ -214,7 +222,7 @@ var Gmaps4Rails = {
     var fillOpacity;
     //Polygon points are in an Array, that's why looping is necessary
     for (var j = 0; j < this.polygons[i].length; ++j) {
-      var latlng = Gmaps4Rails.createLatLng(this.polygons[i][j].lat, this.polygons[i][j].lng);
+      var latlng = this.createLatLng(this.polygons[i][j].lat, this.polygons[i][j].lng);
       polygon_coordinates.push(latlng);
       //first element of an Array could contain specific configuration for this particular polygon. If no config given, use default
       if (j===0) {
@@ -239,21 +247,21 @@ var Gmaps4Rails = {
     //save polygon in list
     this.polygons[i].serviceObject = new_poly;
     new_poly.setMap(this.map);
-  },
+  }
 
   ////////////////////////////////////////////////////
   /////////////////// POLYLINES //////////////////////
   ////////////////////////////////////////////////////
 
   //polylines is an array of arrays. It loops.
-  create_polylines: function(){
+  this.create_polylines = function(){
     for (var i = 0; i < this.polylines.length; ++i) {
       this.create_polyline(i);
     }
-  },
+  }
 
   //creates a single polyline, triggered by create_polylines
-  create_polyline: function(i) {
+  this.create_polyline = function(i) {
     var polyline_coordinates = [];
     var strokeColor;
     var strokeOpacity;
@@ -280,7 +288,7 @@ var Gmaps4Rails = {
         }
         //add latlng if positions provided
         if (this.exists(this.polylines[i][j].lat) && this.exists(this.polylines[i][j].lng)) {	
-          var latlng = Gmaps4Rails.createLatLng(this.polylines[i][j].lat, this.polylines[i][j].lng);
+          var latlng = this.createLatLng(this.polylines[i][j].lat, this.polylines[i][j].lng);
           polyline_coordinates.push(latlng);
         }
       }
@@ -296,37 +304,34 @@ var Gmaps4Rails = {
     //save polyline
     this.polylines[i].serviceObject = new_poly;
     new_poly.setMap(this.map);
-  },
+  }
 
   ////////////////////////////////////////////////////
   ///////////////////// MARKERS //////////////////////
   //////////////////tests coded///////////////////////
 
   //creates, clusterizes and adjusts map 
-  create_markers: function() {
-    this.markers_conf.offset = 0;
+  this.create_markers = function() {
     this.createServiceMarkersFromMarkers();
     this.clusterize();
     this.adjustMapToBounds();
-  },
+  }
 
   //create google.maps Markers from data provided by user
-  createServiceMarkersFromMarkers: function() {
+  this.createServiceMarkersFromMarkers = function() {
     for (var i = this.markers_conf.offset; i < this.markers.length; ++i) {
-      //check if the marker has not already been created
-      // if (!this.exists(this.markers[i].serviceObject && this.provider == "google")) {
         //extract options, test if value passed or use default
         var Lat = this.markers[i].lat;
         var Lng = this.markers[i].lng;
 
         //alter coordinates if randomize is true
         if ( this.markers_conf.randomize) {
-          var LatLng = Gmaps4Rails.randomize(Lat, Lng);
-          //retrieve coordinates from the array
+          var LatLng = this.randomize(Lat, Lng);
+          //retrieve coordinates from the æarray
           Lat = LatLng[0]; Lng = LatLng[1];
         }
         //save object
-        this.markers[i].serviceObject = Gmaps4Rails.createMarker({
+        this.markers[i].serviceObject = this.createMarker({
           "marker_picture":   this.exists(this.markers[i].picture)  ? this.markers[i].picture : this.markers_conf.picture,
           "marker_width":     this.exists(this.markers[i].width)    ? this.markers[i].width   : this.markers_conf.width,
           "marker_height":    this.exists(this.markers[i].height)   ? this.markers[i].height  : this.markers_conf.length,
@@ -346,47 +351,46 @@ var Gmaps4Rails = {
         this.createInfoWindow(this.markers[i]);
         //create sidebar if enabled
         this.createSidebar(this.markers[i]);
-      // }
     }
     this.markers_conf.offset = this.markers.length;
-  },
+  }
 
 
   // creates Image Anchor Position or return null if nothing passed	
-  createImageAnchorPosition: function(anchorLocation) {
+  this.createImageAnchorPosition = function(anchorLocation) {
     if (anchorLocation === null)
     { return null; }
     else
-    { return Gmaps4Rails.createPoint(anchorLocation[0], anchorLocation[1]); }
-  },
+    { return this.createPoint(anchorLocation[0], anchorLocation[1]); }
+  }
 
   // replace old markers with new markers on an existing map
-  replaceMarkers: function(new_markers){
+  this.replaceMarkers = function(new_markers){
     this.clearMarkers();
     //reset previous markers
     this.markers = new Array;
     //reset current bounds
-    this.boundsObject = Gmaps4Rails.createLatLngBounds();
+    this.boundsObject = this.createLatLngBounds();
     //reset sidebar content if exists
     this.resetSidebarContent();
     //add new markers
     this.addMarkers(new_markers);
-  },
+  }
 
   //add new markers to on an existing map
-  addMarkers: function(new_markers){
+  this.addMarkers = function(new_markers){
     //update the list of markers to take into account
     this.markers = this.markers.concat(new_markers);
     //put markers on the map
     this.create_markers();
-  },
+  }  
 
   ////////////////////////////////////////////////////
   ///////////////////// SIDEBAR //////////////////////
   ////////////////////////////////////////////////////
 
   //creates sidebar
-  createSidebar: function(marker_container){
+  this.createSidebar = function(marker_container){
     if (this.markers_conf.list_container)
     {
       var ul = document.getElementById(this.markers_conf.list_container);
@@ -399,48 +403,53 @@ var Gmaps4Rails = {
       li.appendChild(aSel);
       ul.appendChild(li);
     }
-  },
+  }
 
   //moves map to marker clicked + open infowindow
-  sidebar_element_handler: function(marker, eventType) {
+  this.sidebar_element_handler = function(marker, eventType) {
     return function() {
-      Gmaps4Rails.map.panTo(marker.position);
+      this.map.panTo(marker.position);
       google.maps.event.trigger(marker, eventType);
     };
-  },	
+  }
 
-  resetSidebarContent: function(){
+  this.resetSidebarContent = function(){
     if (this.markers_conf.list_container !== null ){
       var ul = document.getElementById(this.markers_conf.list_container);
       ul.innerHTML = "";
     }
-  },
+  }
 
   ////////////////////////////////////////////////////
   ////////////////// MISCELLANEOUS ///////////////////
   ////////////////////////////////////////////////////
 
   //to make the map fit the different LatLng points
-  adjustMapToBounds: function(latlng) {
+  this.adjustMapToBounds = function(latlng) {
 
     //FIRST_STEP: retrieve all bounds
     //create the bounds object only if necessary
     if (this.map_options.auto_adjust || this.map_options.bounds !== null) {
-      this.boundsObject = Gmaps4Rails.createLatLngBounds();
+      this.boundsObject = this.createLatLngBounds();
     }
 
     //if autodjust is true, must get bounds from markers polylines etc...
     if (this.map_options.auto_adjust) {
       //from markers
-      Gmaps4Rails.extendBoundsWithMarkers();
-
-      //from polygons:
-      for (var i = 0; i <  this.polylines.length; ++i) {
-        this.polylines[i].serviceObject.latLngs.forEach(function(obj1){ obj1.forEach(function(obj2){ Gmaps4Rails.boundsObject.extend(obj2);} );});
-      }
+      this.extendBoundsWithMarkers();
       //from polylines:
-      for (var i = 0; i <  this.polygons.length; ++i) {
-        this.polygons[i].serviceObject.latLngs.forEach(function(obj1){ obj1.forEach(function(obj2){ Gmaps4Rails.boundsObject.extend(obj2);} );});
+      for (var i = 0; i < this.polylines.length; ++i) {        
+        var polyline_points = this.polylines[i].serviceObject.latLngs.getArray()[0].getArray();
+        for (var j = 0; j < polyline_points.length; ++j) {
+         this.boundsObject.extend(polyline_points[j]);
+        }
+      }
+      //from polygons:
+      for (var i = 0; i < this.polygons.length; ++i) {
+        var polygon_points = this.polygons[i].serviceObject.latLngs.getArray()[0].getArray();
+        for (var j = 0; j < polygon_points.length; ++j) {
+          this.boundsObject.extend(polygon_points[j]);
+        }
       }
       //from circles
       for (var i = 0; i <  this.circles.length; ++i) {
@@ -451,7 +460,7 @@ var Gmaps4Rails = {
     //in every case, I've to take into account the bounds set up by the user	
     for (var i = 0; i < this.map_options.bounds.length; ++i) {
       //create points from bounds provided
-      var bound = Gmaps4Rails.createLatLng(this.map_options.bounds[i].lat, this.map_options.bounds[i].lng);
+      var bound = this.createLatLng(this.map_options.bounds[i].lat, this.map_options.bounds[i].lng);
       this.boundsObject.extend(bound);
     }
 
@@ -466,10 +475,20 @@ var Gmaps4Rails = {
         this.map.setCenter(map_center);
       }
       else {
-        Gmaps4Rails.fitBounds();
+        this.fitBounds();
       }
     }
-  },
+  }
+  
+  ////////////////////////////////////////////////////
+  /////////////////        KML      //////////////////
+  ////////////////////////////////////////////////////
+  
+  this.create_kml = function(){
+    for (var i = 0; i <  this.kml.length; ++i) {
+      this.kml[i].serviceObject = this.createKmlLayer(this.kml[i]);
+    }
+  }
 
 
   ////////////////////////////////////////////////////
@@ -477,21 +496,37 @@ var Gmaps4Rails = {
   ///////////////////tests coded//////////////////////
 
   //basic function to check existence of a variable
-  exists: function(var_name) {
+  this.exists = function(var_name) {
     return (var_name	!== "" && typeof var_name !== "undefined");
-  },
+  }
 
   //randomize
-  randomize: function(Lat0, Lng0) {
+  this.randomize = function(Lat0, Lng0) {
     //distance in meters between 0 and max_random_distance (positive or negative)
     var dx = this.markers_conf.max_random_distance * this.random();
     var dy = this.markers_conf.max_random_distance * this.random();
     var Lat = parseFloat(Lat0) + (180/Math.PI)*(dy/6378137);
     var Lng = parseFloat(Lng0) + ( 90/Math.PI)*(dx/6378137)/Math.cos(Lat0);
     return [Lat, Lng];
-  },
-
+  }
+  
+  this.mergeObjectWithDefault = function(object1, object2){
+    var copy_object1 = object1;
+    for (var attrname in object2) {
+      if ( typeof(copy_object1[attrname]) === "undefined") {
+        copy_object1[attrname] = object2[attrname];
+      } 
+    }
+    return copy_object1;
+  }
+  
+  this.mergeWithDefault = function(objectName){
+    var default_object = this["default_" + objectName];
+    var object = this[objectName];
+    this[objectName] = this.mergeObjectWithDefault(object, default_object);
+    return true;
+  }
   //gives a value between -1 and 1
-  random: function() { return(Math.random() * 2 -1); }	
+  this.random = function() { return(Math.random() * 2 -1); }	
 
-};
+}