Documentation updates for container and code review amends

marmat · Nov 30, 2015 · 513172f · 513172f
1 parent 01a9c22
commit 513172f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/panomarker/examples/basic.html b/panomarker/examples/basic.html
@@ -21,7 +21,8 @@
   grid: {
     location: {
       pano: 'grid',
-      description: 'A simple test grid'
+      description: 'A simple test grid',
+      latLng: new google.maps.LatLng(50.5818747, 5.9815603)
     },
     links: [],
     copyright: 'Imagery (c) Martin Matysiak',
@@ -35,7 +36,8 @@
   gileppe: {
     location: {
       pano: 'gileppe',
-      description: 'Lac de la Gileppe'
+      description: 'Lac de la Gileppe',
+      latLng: new google.maps.LatLng(50.5818747, 5.9815603)
     },
     links: [],
     copyright: 'Imagery (c) Martin Matysiak',
@@ -49,8 +51,9 @@
 };
 
 function init() {
+  var container = document.getElementById('map');
   var panorama = new google.maps.StreetViewPanorama(
-    document.getElementById('map'),
+    container,
     {
       pano: 'grid',
       panoProvider: function(pano) { return AVAILABLE_PANORAMAS[pano]; }
@@ -59,6 +62,7 @@
   var marker = new PanoMarker(
     {
       pano: panorama,
+      container: container,
       anchor: new google.maps.Point(16,32)
     });
 }
@@ -68,8 +72,10 @@
     <body onload="init()">
         <div id="map" style="width:620px; height:500px"></div>
         <pre>
+var container = document.getElementById('map');
+
 var panorama = new google.maps.StreetViewPanorama(
-  document.getElementById('map'),
+  container,
   {
     pano: 'grid',
     panoProvider: function(pano) { return AVAILABLE_PANORAMAS[pano]; }

diff --git a/panomarker/examples/fancy.html b/panomarker/examples/fancy.html
@@ -21,7 +21,8 @@
   grid: {
     location: {
       pano: 'grid',
-      description: 'A simple test grid'
+      description: 'A simple test grid',
+      latLng: new google.maps.LatLng(50.5818747, 5.9815603)
     },
     links: [],
     copyright: 'Imagery (c) Martin Matysiak',
@@ -35,7 +36,8 @@
   gileppe: {
     location: {
       pano: 'gileppe',
-      description: 'Lac de la Gileppe'
+      description: 'Lac de la Gileppe',
+      latLng: new google.maps.LatLng(50.5818747, 5.9815603)
     },
     links: [],
     copyright: 'Imagery (c) Martin Matysiak',
@@ -49,17 +51,20 @@
 };
 
 function init() {
-  window.panorama = new google.maps.StreetViewPanorama(
-    document.getElementById('map'),
+  var container = document.getElementById('map');
+
+  var panorama = new google.maps.StreetViewPanorama(
+    container,
     {
       pano: 'gileppe',
       pov: {heading: 47.11, pitch: -13.1},
       panoProvider: function(pano) { return AVAILABLE_PANORAMAS[pano]; }
     });
 
-  window.marker = new PanoMarker(
+  var marker = new PanoMarker(
     {
       pano: panorama,
+      container: container,
       position: {heading: 89.63, pitch: -27.22},
       anchor: new google.maps.Point(20,20),
       size: new google.maps.Size(40,40),
@@ -77,8 +82,10 @@
     <body onload="init()">
         <div id="map" style="width:620px; height:500px"></div>
         <pre>
+var container = document.getElementById('map');
+
 var panorama = new google.maps.StreetViewPanorama(
-  document.getElementById('map'),
+  container,
   {
     pano: 'gileppe',
     pov: {heading: 47.11, pitch: -13.1},

diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js
@@ -40,6 +40,7 @@
  * {google.maps.Point} anchor The point (in pixels) to which objects will snap.
  * {string} className The class name which will be assigned to the
  *    created div node.
+ * {HTMLDivElement} container The container holding the panorama.
  * {string} icon URL to an image file that shall be used.
  * {string} id A unique identifier that will be assigned to the
  *    created div-node.
@@ -87,12 +88,12 @@ var PanoMarker = function(opts) {
 
   // panorama.getContainer has been deprecated in the Google Maps API. The user
   // now explicity needs to pass in the container for the panorama.
-  if (opts.panoContainer) {
-    this.panoContainer_ = opts.panoContainer;
-  }
-  else {
+  if (!opts.container) {
     throw 'A panorama container needs to be defined.';
-  }  
+  }
+
+  /** @private @type {HTMLDivElement} */
+  this.container_ = opts.container;
 
   /**
    * Currently only Chrome is rendering panoramas in a 3D sphere. The other
@@ -150,7 +151,7 @@ var PanoMarker = function(opts) {
   this.zIndex_ = opts.zIndex || 1;
 
   // At last, call some methods which use the initialized parameters
-  this.setPano(opts.pano || null, opts.panoContainer);
+  this.setPano(opts.pano || null, opts.container);
 };
 
 PanoMarker.prototype = new google.maps.OverlayView();
@@ -431,7 +432,7 @@ PanoMarker.prototype.draw = function() {
   var offset = this.povToPixel_(this.position_,
       this.pano_.getPov(),
       this.pano_.getZoom() !== null ? this.pano_.getZoom() : 1,
-      this.panoContainer_);
+      this.container_);
 
   if (offset !== null) {
     this.marker_.style.left = (offset.left - this.anchor_.x) + 'px';
@@ -493,7 +494,6 @@ PanoMarker.prototype.getIcon = function() { return this.icon_; };
 /** @return {string} The identifier or null if not set upon marker creation. */
 PanoMarker.prototype.getId = function() { return this.id_; };
 
-
 /** @return {google.maps.StreetViewPanorama} The current panorama. */
 PanoMarker.prototype.getPano = function() { return this.pano_; };
 
@@ -569,9 +569,9 @@ PanoMarker.prototype.setId = function(id) {
  *
  * @param {google.maps.StreetViewPanorama} pano The panorama in which to show
  *    the marker.
- * @param {HTMLDivElement} panoContainer The container holding the panorama.
+ * @param {HTMLDivElement} container The container holding the panorama.
  */
-PanoMarker.prototype.setPano = function(pano, panoContainer) {
+PanoMarker.prototype.setPano = function(pano, container) {
   // In contrast to regular OverlayViews, we are disallowing the usage on
   // regular maps
   if (!!pano && !(pano instanceof google.maps.StreetViewPanorama)) {
@@ -586,7 +586,7 @@ PanoMarker.prototype.setPano = function(pano, panoContainer) {
   // Call method from superclass
   this.setMap(pano);
   this.pano_ = pano;
-  this.panoContainer_ = panoContainer;
+  this.container_ = container;
 
   // Fire the onAdd Event manually as soon as the pano is ready
   if (!!pano) {

diff --git a/panomarker/src/panomarker.min.js b/panomarker/src/panomarker.min.js