ionic & ngCordova GPS Map

ให้เปิดไฟล์ index.html ในส่วนของ Header ให้ แปะไว้ด้านบนลองลงมาจาก style.css

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;">
        </script>

ให้เปิดไฟล์ app.js แล้วแปะ Controller ลงไป

.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) {
  var myLocation = new google.maps.LatLng(13.770742, 100.5024268);
  var RMUTP = new google.maps.LatLng(13.770999, 100.504326);

  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myLocation,
    zoom: 15
  });


  console.log(map)

  $scope.map = map;
  $ionicLoading.show();
  var posOptions = {
    timeout: 10000,
    enableHighAccuracy: true
  };
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function(position) {


      $ionicLoading.hide();

      var lat = position.coords.latitude;
      var lng = position.coords.longitude;


      //  alert("Got position: " + lat + ", " + lng);



      var myLocation = new google.maps.LatLng(lat, lng);


      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLocation,
        zoom: 12
      });
      var marker = new google.maps.Marker({
        map: map,
        label: "U",
        position: myLocation
      });
      var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
      var beachMarker = new google.maps.Marker({
        position: RMUTP,
        map: map,
        icon: image
      });


    }, function(err) {

      $ionicLoading.hide();

      if (error.code == PositionError.PERMISSION_DENIED) {
        alert("Permission denied. check setting");
      } else if (error.code == PositionError.POSITION_UNAVAILABLE) {
        alert("Cannot get position. May be problem with network or can't get a satellite fix.");
      } else if (error.code == PositionError.TIMEOUT) {
        alert("Geolocation is timed out.");
      } else {
        alert(error.message);
      }
    });
})

ส่วนหน้า index.html ในส่วนของ body ให้ใส่ tag ด้านล่างลงไปเพื่อสแดงผล

    <!-- Google Maps -->
          <div id="map"></div>

          <div class="buttons" ng-click="locate()">
              <button class="button button-clear icon ion-android-locate"></button>
          </div>

ให้เปิดไฟล์ style.css ซึ่งจะอยู่ในฟอรเดอร์ www/css/ และกำหนด style ให้กับ element id map

/* Empty. Add your own CSS if you like */
#map {
  width: 100%;
  height: 80%;
  background-color: yellow;
}