การแสดง google map ใน mobile application ( ionic2)

google map นับว่า เป็นส่วนสำคัญสำหรับ Mobile Application ที่ต้องการระบุตำแหน่งสถานที่ต่างๆ ในบทความนี้จะแสดงให้เห็นวิธีการแสดงแผนที่ google map  ใน ionic2 ซึ่งคือ platform การพัฒนา mobile application แบบ cross platform

สำหรับผู้ที่ยังไม่รู้จัก ionic สามาถอ่าน
การติดตั้ง ionic2 
และ
การ link หน้าใน ionic2 

ขั้นตอนการแสดง google map  สำหรับ Mobile Application (ionic)

1.  ในไฟล์ src/pages/index.html ให้ใส่ google map api library ใน tag header

<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&language=th"type="text/javascript"></script>

2. ในไฟล์ interface .html ใส่ tag div ภายใต้ <ion-content > สำหรับแสดงแผนที่

<div id="map_div" style="width: 100%;height:100%"></div>

3. หลัง คำสั่ง import  ใส่

declare var google;//เพื่อให้ type script รู้จัก google map

4.  สร้างคำสั่ง วาด แผนที่ ใน ไฟล์ type script ภายใต้ class

public  map: any;//ตัวแปรอ้างอิงค์แผนที่
public marker:any;//ตัวแปรสำหรับหมุดใน google map


 ionViewDidLoad(){ //คำสั่งสร้างแผนที่จะต้องอยู่ภายใต้ ionViewDidLoad 
     

     let latLng = new google.maps.LatLng(13.829,100.528);//กำหนดจุดกึ่งกลางแผนที่

    let mapOptions = {
      center: latLng,//จุดกึ่งกลาง
      zoom: 6,//การซูมที่ระดับ 6
      mapTypeId: google.maps.MapTypeId.ROADMAP//ให้แสดงถนน
    }
 
   //กำหนดให้แสดงแผนที่ใน map_div ( div tag ที่เราสร้างไว้)
    this.map = new google.maps.Map( document.getElementById("map_div"),mapOptions);
 
       //ให้สรา้ง marker บนแผนที่
          this.marker = new google.maps.Marker({
                        position: new google.maps.LatLng(13.829,100.528) ,
        });
        this.marker.setMap(this.map);

        //ให้กึ่งกลางแผนที่อยู่ที่ 13.829,100.528
        this.map.setCenter(new google.maps.LatLng(13.829,100.528));
        this.map.setZoom(6);//ให้แผนที่มีการการซูมที่ระดับ 6


  }