Repository: yagoferrer/map-tools
Pull request #195 (2015-03-01 03:02:55)

Rename bubble to infoWindow to make it consistent. Rel: #187


Patch:
diff --git a/README.md b/README.md
index 6945c48..2f46996 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 
 ## Benefits
 - Less Code: The [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference) it is of considerable size. You'll be writing way **less** code with map-tools.js
-- More Fun: Add [Marker animations](#animate-markers), use [handlebars style](#info-bubble) variables.
+- More Fun: Add [Marker animations](#animate-markers), use [handlebars style](#info-window) variables.
 - Easy To Use: Intuitive APIs, easy to understand.
 - Non Intrusive: it extends the API, you can use any other native methods, properties and events anywhere.
 - Query elements on the Map to update their options using [Crossfilter](#crossfilter-support-for-markers)
@@ -166,12 +166,12 @@ map.updateGroup('myGroup', {visible: true});
 
 #### Info Bubble
 
-Adds an info bubble with HTML content.
+Adds an info window with HTML content.
 ```javascript
 map.addMarker({
   lat: 41.3833,
   lng: 2.1833,
-  bubble: {
+  infoWindow: {
     event: 'mouseover',
     content: '<p>{city} City</p>'
   },
@@ -182,7 +182,7 @@ map.addMarker({
 ```
 Use curly brackets to display variables from `data` 
 
-Add more [infoWindow options](https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) inside `bubble`.
+Add more [infoWindow options](https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) inside `infoWindow`.
 The default **event** is `click` but you can change it with the `event` property.
 
 
diff --git a/examples/code.snippet/add.bubble.snippet.html b/examples/code.snippet/add.info.window.snippet.html
similarity index 83%
rename from examples/code.snippet/add.bubble.snippet.html
rename to examples/code.snippet/add.info.window.snippet.html
index 42b2591..afe3d06 100644
--- a/examples/code.snippet/add.bubble.snippet.html
+++ b/examples/code.snippet/add.info.window.snippet.html
@@ -3,7 +3,7 @@
 		lat: 41.3833,
 		lng: 2.1833,
 		title: 'Barcelona',
-		bubble: {
+    infoWindow: {
 			event: 'mouseover',
 			content: '<p>{city}</p>'
 		},
@@ -13,6 +13,6 @@
 	});
 	...
 	map.updateMarker(marker, {
-		bubble: {content: '<p>Click Me!</p>'}
+    infoWindow: {content: '<p>Click Me!</p>'}
 	});
 </code></pre></div>
diff --git a/examples/index.html b/examples/index.html
index b01ebe5..3088532 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -111,7 +111,7 @@
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/add.multiple.markers.html">Add Multiple Markers</a></h4>
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/animate.markers.html">Animate Markers</a></h4>
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/add.group.html">Add Group</a></h4>
-			<h4><i class="fa fa-map-marker"></i><a href="../examples/bubble.html">Add Info Bubble</a></h4>
+			<h4><i class="fa fa-map-marker"></i><a href="../examples/info.window.html">Add Info Window</a></h4>
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/data.querying.html">Data querying</a></h4>
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/geojson.html">GeoJSON</a></h4>
 			<h4><i class="fa fa-map-marker"></i><a href="../examples/topojson.html">TopoJSON</a></h4>
diff --git a/examples/bubble.html b/examples/info.window.html
similarity index 88%
rename from examples/bubble.html
rename to examples/info.window.html
index 6a0fd19..89b7fc0 100644
--- a/examples/bubble.html
+++ b/examples/info.window.html
@@ -27,7 +27,7 @@
 		    position: 'right center',
 		    events: {
 			    '.update click': function (e) {
-				    map.updateMarker(marker, {bubble: {content: '<p>Click Me!</p>'}});
+				    map.updateMarker(marker, {infoWindow: {content: '<p>Click Me!</p>'}});
 				    e.preventDefault();
 			    }
 		    }
@@ -35,7 +35,7 @@
 
 
 	    map.addPanel({
-		    templateURL: 'code.snippet/add.bubble.snippet.html',
+		    templateURL: 'code.snippet/add.info.window.snippet.html',
 		    position:'right center'
       }, function() {
         Prism.highlightAll();
@@ -50,7 +50,7 @@
       lat: 41.3833,
       lng: 2.1833,
       title: 'Barcelona',
-      bubble: {
+      infoWindow: {
         event: 'mouseover',
         content: '<p>{city}</p>'
       },
diff --git a/lib/map-tools/addMarker.js b/lib/map-tools/addMarker.js
index 4ce8f7c..c819246 100644
--- a/lib/map-tools/addMarker.js
+++ b/lib/map-tools/addMarker.js
@@ -3,7 +3,7 @@
 var utils = require('map-tools/utils');
 
 module.exports = function (global, that) {
-  var bubble = require('map-tools/bubble')(global);
+  var infoWindow = require('map-tools/infoWindow')(global);
   var addFilter = require('map-tools/addFilter')(global, that);
 
   function addMarker(marker, options) {
@@ -56,8 +56,8 @@ module.exports = function (global, that) {
       instance.setAnimation(global.google.maps.Animation[marker.move.toUpperCase()]);
     }
 
-    if (marker.bubble) {
-      bubble.create(instance, marker.bubble, that.instance);
+    if (marker.infoWindow) {
+      infoWindow.create(instance, marker.infoWindow, that.instance);
     }
 
 
diff --git a/lib/map-tools/config.js b/lib/map-tools/config.js
index d2edf46..af8e22b 100644
--- a/lib/map-tools/config.js
+++ b/lib/map-tools/config.js
@@ -4,6 +4,6 @@ module.exports = {
   version: '3.18', // Released: May 15, 2014
   zoom: 8,
   customMapOptions: ['id', 'lat', 'lng', 'type'],
-  customMarkerOptions: ['lat', 'lng', 'move', 'bubble'],
+  customMarkerOptions: ['lat', 'lng', 'move', 'infoWindow'],
   panelPosition: 'TOP_LEFT'
 };
diff --git a/lib/map-tools/findUpdateMarker.js b/lib/map-tools/findUpdateMarker.js
index 9eea3ae..c54e68a 100644
--- a/lib/map-tools/findUpdateMarker.js
+++ b/lib/map-tools/findUpdateMarker.js
@@ -13,8 +13,8 @@ module.exports = function (global, that) {
         marker.setPosition(new global.google.maps.LatLng(options.custom.lat, options.custom.lng));
       }
 
-      if (options.custom.bubble && options.custom.bubble.content) {
-        marker.bubble.instance.setContent(options.custom.bubble.content);
+      if (options.custom.infoWindow && options.custom.infoWindow.content) {
+        marker.infoWindow.instance.setContent(options.custom.infoWindow.content);
       }
     }
 
diff --git a/lib/map-tools/bubble.js b/lib/map-tools/infoWindow.js
similarity index 76%
rename from lib/map-tools/bubble.js
rename to lib/map-tools/infoWindow.js
index 254e52f..307e89e 100644
--- a/lib/map-tools/bubble.js
+++ b/lib/map-tools/infoWindow.js
@@ -9,10 +9,10 @@ module.exports = function (global) {
       return marker.data[variable] || '';
     });
 
-    marker.bubble.instance = new global.google.maps.InfoWindow(options);
+    marker.infoWindow.instance = new global.google.maps.InfoWindow(options);
 
     global.google.maps.event.addListener(marker, event, function () {
-      marker.bubble.instance.open(map, marker);
+      marker.infoWindow.instance.open(map, marker);
     });
   }
 


Test patch:
diff --git a/test/functional/addMarker.Spec.js b/test/functional/addMarker.Spec.js
index 0fd7ad2..c073da4 100644
--- a/test/functional/addMarker.Spec.js
+++ b/test/functional/addMarker.Spec.js
@@ -45,7 +45,7 @@ describe('when calling addMarker()', function () {
       var marker = {
         lat: 41.3833,
         lng: 2.1833,
-        bubble: {
+        infoWindow: {
           content: '{city}'
         },
         data: {
@@ -53,7 +53,7 @@ describe('when calling addMarker()', function () {
         }
       };
       var result = map.addMarker(marker);
-      expect(result.bubble.content).to.equal('barcelona');
+      expect(result.infoWindow.content).to.equal('barcelona');
     });
   });
 
diff --git a/test/functional/updateMarker.Spec.js b/test/functional/updateMarker.Spec.js
index ae2a5ee..95710a0 100644
--- a/test/functional/updateMarker.Spec.js
+++ b/test/functional/updateMarker.Spec.js
@@ -8,7 +8,7 @@ describe('when calling updateMarker()', function () {
       lng: 2.1833,
       title: 'Barcelona',
       visible: false,
-      bubble: {
+      infoWindow: {
         content: 'Barcelona!'
       }
     };
@@ -17,12 +17,12 @@ describe('when calling updateMarker()', function () {
     var uid = result.data.uid;
     expect(GMP.maps.mymap.markers.all[uid].visible).to.be.false;
 
-    map.updateMarker({uid: uid}, {visible: true, move: 'bounce', lat: 100, lng: 30, bubble: {content: 'click me'}});
+    map.updateMarker({uid: uid}, {visible: true, move: 'bounce', lat: 100, lng: 30, infoWindow: {content: 'click me'}});
 
     expect(GMP.maps.mymap.markers.all[uid].visible).to.be.true;
     expect(GMP.maps.mymap.markers.all[uid].position.lat()).to.eql(100);
     expect(GMP.maps.mymap.markers.all[uid].position.lng()).to.eql(30);
-    expect(GMP.maps.mymap.markers.all[uid].bubble.instance.content).to.eql('click me');
+    expect(GMP.maps.mymap.markers.all[uid].infoWindow.instance.content).to.eql('click me');
   });
 
   it('should invoke multiple Markers options setters for each property passed', function () {