improvement & bug fixes of Google-Map component

superlloyd · superlloyd · commit cfa5abcba561 · 2015-10-26T21:59:18.000+10:00
diff --git a/TestApp/Sample.MapControl.html b/TestApp/Sample.MapControl.html
@@ -14,12 +14,6 @@
 
     <!-- sample styles -->
     <link href="Content/samples.css" rel="stylesheet" />
-    <style>
-        #myMap {
-            width: 600px;
-            height: 400px;
-        }
-    </style>
 </head>
 <body>
 
@@ -45,7 +39,9 @@ <h1>Vue Samples Collection</h1>
                 <h2>Live Example</h2>
                 <div class="liveExample">
 
-                    <google-map id="myMap" lat="-27.468" lng="153.025" zoom="10" :markers="markers"></google-map>
+                    <google-map id="myMap" :lat="-27.468" :lng="153.025" :zoom="10" :markers="markers"></google-map>
+                    <br />
+                    <google-map id="myMap2" :lat="-27.468" :lng="153.025" :zoom="12" :markers="markers"></google-map>
 
                 </div>
 
diff --git a/TestApp/Sample.Modal.html b/TestApp/Sample.Modal.html
@@ -40,6 +40,7 @@ <h2>Live Example</h2>
                     <modal :show.sync="showModal">
                         <div slot="header">
                             <h3>customized header</h3>
+                            <button @click="showModal = false">Hide</button>
                         </div>
                         <div slot="body">
                             <p>Name <input type="text" /></p>
diff --git a/TestApp/ScriptsLocal/components/GoogleMap.js b/TestApp/ScriptsLocal/components/GoogleMap.js
@@ -32,11 +32,23 @@ Vue.component('google-map', function (resolve, reject) {
                     type: Number,
                     required: false,
                 },
+                width: {
+                    type: String,
+                    required: false,
+                    default: '510pt',
+                },
+                height: {
+                    type: String,
+                    required: false,
+                    default: '340pt',
+                },
                 markers: null,
             },
             attached: function () {
                 var getv = function (x, y) { return x == undefined ? y : x; };
-                var lat;
+                var mm = this.$el;
+                mm.style.width = this.width;
+                mm.style.height = this.height;
                 var map = new google.maps.Map(this.$el, {
                     center: new google.maps.LatLng(getv(this.lat, -27.468), getv(this.lng, 153.025)),
                     zoom: getv(this.zoom, 10),
diff --git a/TestApp/ScriptsLocal/components/GoogleMap.ts b/TestApp/ScriptsLocal/components/GoogleMap.ts
@@ -33,11 +33,23 @@ Vue.component('google-map', function (resolve, reject) {
                     type: Number,
                     required: false,
                 },
+                width: {
+                    type: String,
+                    required: false,
+                    default: '510pt',
+                },
+                height: {
+                    type: String,
+                    required: false,
+                    default: '340pt',
+                },
                 markers: null, // google.maps.LatLng | google.maps.LatLng[]
             },
             attached: function () {
                 var getv = (x, y) => x == undefined ? y : x;
-                var lat
+                var mm: HTMLElement = this.$el;
+                mm.style.width = this.width;
+                mm.style.height = this.height;
                 var map = new google.maps.Map(this.$el, {
                     center: new google.maps.LatLng(getv(this.lat, -27.468), getv(this.lng, 153.025)),
                     zoom: getv(this.zoom, 10),
