commit test

.gitignore

@@ -19,7 +19,6 @@ npm-debug.log*
 .tmp/
 .versions/
 coverage/
-www/
 node_modules/
 tmp/
 temp/

config.xml

@@ -82,10 +82,10 @@
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
     <plugin name="cordova-plugin-ionic-webview" spec="^2.0.2" />
     <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
-    <allow-navigation href="http://192.168.86.41:8101" />
-    <allow-navigation href="http://192.168.86.41:8100" />
     <plugin name="cordova-plugin-googlemaps" spec="/Users/masashi/Documents/workspace2/cordova-plugin-googlemaps">
         <variable name="API_KEY_FOR_BROWSER" value="AIzaSyBzTWTKaMEeABaeBSa3_E6ZMxseK4xXl4k" />
     </plugin>
+    <engine name="android" spec="^7.1.1" />
+    <engine name="ios" spec="^4.5.5" />
     <engine name="browser" spec="5.0.4" />
 </widget>

docs

@@ -0,0 +1 @@
+www

package.json

@@ -28,9 +28,10 @@
     "@ionic/ng-toolkit": "1.0.0",
     "@ionic/schematics-angular": "1.0.1",
     "cordova-android": "^7.1.1",
+    "cordova-browser": "5.0.4",
     "cordova-ios": "^4.5.5",
     "cordova-plugin-device": "^2.0.2",
-    "cordova-plugin-googlemaps": "https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps",
+    "cordova-plugin-googlemaps": "file:../cordova-plugin-googlemaps",
     "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
     "cordova-plugin-ionic-keyboard": "^2.1.2",
     "cordova-plugin-ionic-webview": "^2.0.2",
@@ -71,21 +72,19 @@
   "description": "An Ionic project",
   "cordova": {
     "plugins": {
-      "cordova-plugin-googlemaps": {
-        "API_KEY_FOR_ANDROID": "(API key)",
-        "API_KEY_FOR_IOS": "(API key)",
-        "PLAY_SERVICES_VERSION": "15.0.1",
-        "ANDROID_SUPPORT_V4_VERSION": "27.+"
-      },
       "cordova-plugin-whitelist": {},
       "cordova-plugin-device": {},
       "cordova-plugin-splashscreen": {},
       "cordova-plugin-ionic-webview": {},
-      "cordova-plugin-ionic-keyboard": {}
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-plugin-googlemaps": {
+        "API_KEY_FOR_BROWSER": "AIzaSyBzTWTKaMEeABaeBSa3_E6ZMxseK4xXl4k"
+      }
     },
     "platforms": [
       "android",
-      "ios"
+      "ios",
+      "browser"
     ]
   }
-}
+}

src/app/geocoding/geocoding.page.ts

@@ -48,7 +48,7 @@ export class GeocodingPage implements OnInit {
       "address": this.search_address.nativeElement.value
     })
     .then((results: GeocoderResult[]) => {
-      console.log(results);
+      //console.log(results);
       this.loading.dismiss();
 
       let marker: Marker = this.map1.addMarkerSync({
@@ -110,18 +110,16 @@ export class GeocodingPage implements OnInit {
     })
     .then((mvcArray: BaseArrayClass<GeocoderResult[]>) => {
 
-      mvcArray.one('finish').then(() => {
-        let results: any[] = mvcArray.getArray();
-        results.forEach((result: GeocoderResult[]) => {
-          if (!result || result.length === 0) {
-            // Geocoder can not get the result
-            return;
-          }
-          this.map2.addMarkerSync({
-            'position': result[0].position,
-            'title':  JSON.stringify(result)
-          });
+      mvcArray.on('insert_at').subscribe((index:number) => {
+        let result: GeocoderResult = mvcArray.getAt(index);
+        this.map2.addMarkerSync({
+          'position': result[0].position,
+          'title':  JSON.stringify(result)
         });
+      });
+      mvcArray.one('finish').then(() => {
+        //let results: any[] = mvcArray.getArray();
+
         this.loading.dismiss();
         let end = Date.now();
         alert("duration: " + ((end - start) / 1000).toFixed(1) + " seconds");

src/app/home/home.page.scss

@@ -1,6 +1,6 @@
 
 #map_canvas {
-  width: 80%;
+  width: 90%;
   height: 80%;
   border: 1px solid red;
 }

src/app/html-info-window/html-info-window.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, NgZone } from '@angular/core';
 import {
   GoogleMaps,
   GoogleMap,
@@ -17,7 +17,7 @@ export class HtmlInfoWindowPage implements OnInit {
 
   map: GoogleMap;
 
-  constructor(private platform: Platform) { }
+  constructor(private platform: Platform, private _ngZone: NgZone) { }
 
   async ngOnInit() {
     // Since ngOnInit() is executed before `deviceready` event,
@@ -42,17 +42,33 @@ export class HtmlInfoWindowPage implements OnInit {
 
     let htmlInfoWindow = new HtmlInfoWindow();
 
+    // flip-flop contents
+    // https://davidwalsh.name/css-flip
     let frame: HTMLElement = document.createElement('div');
-    frame.innerHTML = [
-      '<b>Hearst Castle</b>',
-      '<img src="assets/imgs/hearst_castle.jpg">'
-    ].join("");
-    frame.getElementsByTagName("img")[0].addEventListener("click", () => {
-      htmlInfoWindow.setBackgroundColor('red');
+    frame.innerHTML = `
+<div class="flip-container" id="flip-container">
+  <div class="flipper">
+    <div class="front">
+    <h3>Click this photo!</h3>
+    <img src="assets/imgs/hearst_castle.jpg">
+  </div>
+  <div class="back">
+    <!-- back content -->
+    Hearst Castle above the clouds on top of The Enchanted Hill. William Randolph Hearst started to build a fabulous estate on his ranchland overlooking the village of San Simeon in 1919.
+    </div>
+  </div>
+</div>`;
+
+    frame.addEventListener("click", (evt) => {
+      let container = document.getElementById('flip-container');
+      if (container.className.indexOf(' hover') > -1) {
+        container.className = container.className.replace(" hover", "");
+      } else {
+        container.className += " hover";
+      }
     });
     htmlInfoWindow.setContent(frame, {
-      width: "280px",
-      height: "330px"
+      width: "170px"
     });
 
     let marker: Marker = this.map.addMarkerSync({
@@ -62,7 +78,7 @@ export class HtmlInfoWindowPage implements OnInit {
     });
 
     marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
-      htmlInfoWindow.open(marker);
+        htmlInfoWindow.open(marker);
     });
     marker.trigger(GoogleMapsEvent.MARKER_CLICK);
 

src/global.scss

@@ -10,3 +10,84 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
+
+.flip-container h3 {
+	font-size: 20px;
+  margin: auto;
+}
+.flip-container img {
+	width: 160px;
+  height: auto;
+}
+/* entire container, keeps perspective */
+.flip-container {
+  -webkit-perspective: 1000;
+  -moz-perspective: 1000;
+  -o-perspective: 1000;
+  perspective: 1000;
+}
+/* flip the pane when hovered */
+.flip-container.hover .flipper {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+
+.flip-container, .front, .back {
+  width: 170px;
+  height: 200px;
+}
+
+/* flip speed goes here */
+.flipper {
+  transform-style: preserve-3d;
+  -moz-transform: perspective(1000px);
+  -moz-transform-style: preserve-3d;
+  -webkit-transition: 0.6s;
+  -moz-transition: 0.6s;
+  -o-transition: 0.6s;
+  -ms-transition: 0.6s;
+  transition: 0.6s;
+
+  position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-color: white;
+
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* front pane, placed above back */
+.front {
+  z-index: 2;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+
+/* back, initially hidden pane */
+.back {
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+  -o-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}