example for maptypeid change (fixes GuillaumeLeclerc#117)

KiVeR · Jun 3, 2017 · 47013cd · 47013cd
1 parent 407ff38
commit 47013cd
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 3 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -27,9 +27,13 @@ <h1>Vue2 Google Maps - Examples</h1>
       </li>
 
       <li>
-        <a href="test-map-center-twoway.html">Basic tests on map centering and zoom</a>.
+        <a href="test-map-center-twoway.html">Basic tests on map centering two-way binding</a>.
       </li>
 
+      <li>
+        <a href="maptypeid.html">Test Map Type Id Changes (#117)</a>.
+      </li>
+
       <li>
         <a href="basic-marker.html">Basic markers on a map</a>.
       </li>

diff --git a/examples/maptypeid.html b/examples/maptypeid.html
@@ -0,0 +1,43 @@
+<body>
+  <div id="root">
+    Map type id
+
+    {{mapTypeId}}
+
+    <gmap-map :center="center" :zoom="15" style="width: 100%; height: 500px"
+        @maptypeid_changed="updateMapType"
+        :map-type-id="mapTypeId">
+    </gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
+  <script src="vue-google-maps.js"></script>
+
+  <script>
+    Vue.use(VueGoogleMaps, {
+      load: {
+        key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
+      },
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      new Vue({
+        el: '#root',
+        data: {
+          center: {
+            lat: 47.376332,
+            lng: 8.547511
+          },
+          mapTypeId: "terrain",
+        },
+        methods: {
+          updateMapType: function(type) {
+            this.mapTypeId = type
+          }
+        }
+      });
+    });
+  </script>
+
+</body>
diff --git a/examples/src/main.js b/examples/src/main.js
@@ -6,7 +6,6 @@ Vue.use(VueGoogleMaps, {
   installComponents: true,
   load: {
     key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
-    v: '3.26',
     libraries: 'places'
   }
 });

diff --git a/examples/test-map-center-twoway.html b/examples/test-map-center-twoway.html
@@ -32,7 +32,7 @@ <h2>Test 1</h2>
     </gmap-map>
 
     <gmap-street-view-panorama :position="mapCenter" :zoom="12"
-      @position_changed="updateCenter"
+      @position_changed="updateCenter" :pov="pov"
       class="map-container">
     </gmap-street-view-panorama>
   </div>
@@ -56,6 +56,10 @@ <h2>Test 1</h2>
             lat: 1.38,
             lng: 103.8,
           },
+          pov: {
+            pitch: 0,
+            heading: 0,
+          }
         },
         methods: {
           updateCenter(newCenter) {