เทคนิคเปิดแอพ Google Maps จากแอพ Cordova/Ionic Framework

เมื่อคืนมีผู้เข้าอบรมถามเข้ามาในกลุ่ม After Course ของมหาวิทยาลัยราชมงคล ล้านนา ว่า

ถ้าต้องการเปิดแอพแผนที่ (Google Maps) ที่อยู่ในเครื่อง Android จากแอพเราจะทำอย่างไร?

ไหนๆ ก็ไหนๆ โค้ชพลขอใช้ Ionic Framework ในการสาธิตเลยแล้วกันเนอะ การทำจะแบ่งเป็น 4 ขั้นตอนครับ

1. สร้างโปรเจค

อย่างแรกเลย ให้เราสร้างโปรเจคขึ้นมาด้วยคำสั่ง

ionic start NextflowMap blank

แล้วก็ใช้คำสั่งด้านล่างเพื่อเข้าไปรอคำสั่งต่อไป

cd NextflowMap

2. สร้างตัวแอพ

2.1 สร้าง UI

เปิดไฟล์ www/index.html  แล้วเพิ่ม ionic-button เพื่อสร้างปุ่มขึ้นมา

...
<ion-content>
  <button class="button button-stable button-block">
    Open Map
  </button>
</ion-content>
...

2.2 สร้าง Controller

เปิดไฟล์ app.js  ที่อยู่ใน www/js  ขึ้นมาแล้วเพิ่มโค้ดด้านล่างลงไป

.controller('MapController', ['$scope', '$window', function($scope, $window){

  $scope.openMap = function() {
    $window.location.href = 'geo:18.8163885,98.8919444';
  }


}])

จะสังเกตว่าเราได้กำหนด link ใหม่ ที่มี prefix ขึ้นต้นด้วย geo:

กลับมาที่ index.html  เราจะกำหนด ng-controller  ใน <ion-pane>

<ion-pane ng-controller="MapController">
...     
</ion-pane>

และเพิ่มโค้ดด้านล่างนี้ เพื่อเวลากดที่ปุ่มจะเป็นการเรียกใช้ method ใน Angular Controller ของเรา

<button ... ng-click="openMap()">
   Open Map
</button>

3. เพิ่ม Whitelist

เปิดไฟล์ config.xml  แล้วเพิ่ม Whitelist เพื่อให้ link ที่เรากำหนดไว้ในแอพ สามารถเปิดใช้งานแอพภายนอกได้

<access origin="geo:*" launch-external="yes" />

เสร็จแล้วบันทึกไฟล์

4. ทดสอบ

ใช้คำสั่ง ionic build และ run เพื่อทดสอบตัวแอพในเครื่อง Android ที่เตรียมไว้ได้เลย