การสร้างหน้า google maps ใน ionic slide menu

สร้าง Project โดยใช้ SlideMenu Template

เพิ่ม <script src="http://maps.google.com/maps/api/js?key=API_KEY"></script> ใน www\index.html

เพิ่มหน้าแผนที่โดยเพิ่ม code ในไฟล์ \www\templates\map.html

<ion-view view-title="Map">

    <ion-content>

        <div id="map" data-tap-disabled="true"></div>

    </ion-content>

</ion-view>

เพิ่ม menu item โดยเพิ่ม code ในไฟล์ \www\templates\menu.html

        <ion-item menu-close href="#/app/map">

            Map

        </ion-item>

เพิ่ม code ใน \www\js\app.js

  .state('app.map', {

      url: '/map',

      views: {

          'menuContent': {

              templateUrl: 'templates/map.html',

              controller: 'MapCtrl'

          }

      }

  })

เพิ่ม controller ใน \www\js\controller.js โดยเบื้องต้นได้กำหนดพิกัดตายตัว

.controller('MapCtrl', function ($scope) {

    var latLng = new google.maps.LatLng(14.03592, 100.72543);

    var mapOptions = {

        center: latLng,

        zoom: 15,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

})

เพิ่ม stylesheet ใน \www\css\style.css

.scroll {

    height: 100%;

}

#map {

    width: 100%;

    height: 100%;

}

ทดลอง run ก็จะสามารถทำงานได้ตามรูป

 

ที่มา:

[1] http://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/