แสดงตำแหน่งปัจจุบัน บนแผนที่ google map ใน app ionic material

C:\phonegap\learn001>phonegap plugin ls

cordova-plugin-geolocation 2.1.0 "Geolocation" 
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
com.phonegap.plugins.nativesettingsopener 1.2 "Native settings"

C:\phonegap\learn001>cordova plugin add cordova-plugin-geolocation

C:\phonegap\learn001>cordova plugin add cordova-plugin-spinner-dialog

C:\phonegap\learn001>cordova plugin add https://github.com/selahssea/Cordova-open-native-settings.git

C:\phonegap\learn001>phonegap plugin ls

.controller('MapCtrl', function(  
    $scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion  
    ,$ionicPlatform   ) {  
    $scope.$parent.showHeader();  
    $scope.$parent.clearFabs();  
    $scope.$parent.setHeaderFab(false);  
    $scope.$parent.hasShadow();  
  
    ............ // ส่วนของโค้ดเดิม 
    ..........

  
})  

.controller('MapCtrl', function(  
    $scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion  
    ,$ionicPlatform, $cordovaGeolocation, $cordovaSpinnerDialog ) {  
    $scope.$parent.showHeader();  
    $scope.$parent.clearFabs();  
    $scope.$parent.setHeaderFab(false);  
    $scope.$parent.hasShadow();  
  
    ............ // ส่วนของโค้ดเดิม 
    ..........

  
})  

.controller('MapCtrl', function(
    $scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion
    ,$ionicPlatform,$cordovaGeolocation, $cordovaSpinnerDialog) {
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();

    $timeout(function() {
        $scope.isExpanded = false;
        $scope.$parent.setExpanded(false);
    }, 300);

    // ฟังก์ชั่นหาตำแหน่งปัจจุบันในแผนที่ google map
    $scope.getMapLocation = function() {
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // กำหนดการตั้งค่าการระบุตำแหน่ง
            var posOptions = {timeout: 10000, enableHighAccuracy: false};
            // plugin เริ่มทำงานหาตำแหน่งปัจจุบันด้วยคำสั่ง getCurrentPosition
            $cordovaGeolocation
                .getCurrentPosition(posOptions)
                .then(function (position) { // พบตำแหน่ง
                    // เก็บค่าตำแหน่งในตัวไป
                    var lat  = position.coords.latitude;
                    var long = position.coords.longitude;
                    // เรียกฟังก์ชั่นสร้างแผนที่ โดยส่งค่าตำแหน่งไป
                    $scope.getMap(lat, long);
                }, function(err) { // ถ้าหาตำแหน่งไม่ได้ หรือไม่พบ
                    $cordovaSpinnerDialog.hide(); // ซ่อน loading
                    console.log(err);
                    // เช็คว่ามี plugin Native settings หรือไม่
                    if(typeof cordova.plugins.settings.openSetting != undefined){
                        // ถ้ามีก็เรียกใช้ ให้เปิดหน้าตั้งค่าที่ต้องการ
                        cordova.plugins.settings.open(function(){
                                 // ถ้าเปิดหน้าตั้งค่าได้ ให้เปิด หน้าตั้งค่า location
                                cordova.plugins.settings.openSetting(
                                "location_source",
                                function(){
                                    // ถ้าเปิดหน้า locaton แล้วและผู้ใช้ เปิด gps แล้วกลับมาที่ app
                                    // แสดง loading อีกครั้ง และเรียกฟังก์ชั่นหาตำแหน่งใหม่อีกครั้ง
                                    $cordovaSpinnerDialog.show(null,"รอสักครู่..");
                                    $scope.getMapLocation();
                                    console.log("opened location settings")
                                },
                                function(){// เปิดหน้าตั้งคา location ไม่ได้
                                    console.log("failed to open");
                                });
                                console.log("opened settings")
                            },
                            function(){ // ถ้าเปิดหน้าตั้งค่าไม่ได้
                                console.log("failed to open settings")
                            });
                    }
                });
        });
    };

    // ฟังก์ชั่นสร้างแผนที่ ตัว markder และ infowindow รับค่าตำแหน่งที่ได้มา
    $scope.getMap = function(latitude, longitude) {

        // กำหนดตำแหน่งของแผนที่ จากค่าที่ส่งมา
        var myLatLng = new google.maps.LatLng(latitude, longitude);

        // กำนหนด option การแสดงแผนที่
        var mapOption = {
            center:myLatLng,
            zoom:13,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        // แสดงแผนที่ในตำแหน่ง div id=map
        var map = new google.maps.Map(document.getElementById("map"),mapOption);

        // สร้างตัวแปรสำหรับ marker เพือแสดงตำแหน่งในแผนที่
        var marker = new google.maps.Marker({
            position: myLatLng
        });

        // แสดง markder ในแผนที่
        marker.setMap(map);

        // สร้างตัวแปร infowindow เพื่อแสดงข้อความเมื่อคลิกที่ marker
        var infowindow = new google.maps.InfoWindow({
            content: 'ฉันอยู่ที่ '+latitude+','+longitude
        });

        // กำหนด event ให้กับ markder ถ้า คลิก marker ให้เปิด infowindow
        google.maps.event.addListener(marker, "click", function(){
            infowindow.open(map,marker);
        });

        // กำหนด event ให้กับ แผนที่ ถ้าแผนที่ ไม่ได้ทำอะไรแล้ว คล้ายๆ แผนที่โหลดเสร็จแล้ว
        google.maps.event.addListenerOnce(map, 'idle', function(){
            $cordovaSpinnerDialog.hide(); // ซ่อน loading
        });

        // กำหนดค่าตัวแปร map เผื่อได้เรียกใช้งาน
        $scope.map = map;

    };

    // สร้างถูกเรียกใช้เมื่อเข้ามาหน้า map
    $scope.init = function(){
        $ionicPlatform.ready(function() { // กำหนดก่อนเรียกใช้ plugin
            $cordovaSpinnerDialog.show(null,"รอสักครู่.."); // แสดง loading
            $scope.getMapLocation(); // เรียกฟังก์ชั่นหาตำแหน่งในแผนที่ให้ทำงาน
        });
    };

   ionicMaterialMotion.fadeSlideInRight();

   ionicMaterialInk.displayEffect();

})

C:\phonegap\learn001>phonegap build android