Google Maps - วิธีการปรับแต่งส่วนควบคุมของ Google Maps

Google Maps - วิธีการปรับแต่งส่วนควบคุมของ Google Maps

ผู้ใช้สามารถปรับการแสดงผลแผนที่ Google Maps ได้ผ่านส่วนควบคุมต่างๆ ประกอบด้วย Zoom control, Pan control, Scale control, Maptype control, Street View control, Rotate control, Overview Map control บทความนี้สอนการเขียนโค้ดเพื่อปรับแต่งส่วนควบคุมเหล่านี้

Jul 01, 2016

แก้ไขล่าสุด มีผู้อ่าน 6,444  |  GOOGLE MAPS

ผู้ใช้สามารถปรับการแสดงผลแผนที่ Google Maps เช่น การซูมเข้า ซูมออก, แสดงผล Street view, เลื่อนแผนที่และอื่นๆ ได้ผ่านส่วนควบคุมต่างๆ ประกอบด้วย Zoom control, Pan control, Scale control, Maptype control, Street View control, Rotate control, Overview Map control บทความนี้สอนการเขียนโค้ดเพื่อปรับแต่งส่วนควบคุมเหล่านี้ ตัวอย่างเช่น การย้ายตำแหน่ง การแสดงหรือไม่แสดงส่วนควบคุม การเปลี่ยนแปลงหน้าตาส่วนควบคุม เป็นต้น

 

ตัวอย่างส่วนควบคุมของแผนที่ Google Maps

 

  • Zoom control 
  • Pan control 
  • Scale control 
  • MapType control 
  • Street View control 
  • Rotate control 
  • Overview Map control 

 

1. เริ่มต้นด้วยวิธีการปิดการแสดงส่วนควบคุมทั้งหมด ดังรูป เมื่อต้องการให้แสดงแผนที่อย่างเดียว


 

Source Code

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
       mapOptions);
}

 

2. เลือกเปิดปิดส่วนควบคุมผ่านตัวแปรต่างๆ ตามด้านล่าง

{
  panControl: boolean,
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  overviewMapControl: boolean
}

 

เมื่อไม่ต้องการแสดงเพียง panControl, zoomControl แต่ต้องการแสดง scaleControl 

สังเกตุว่าถึงแม้เราจะไม่ได้ตั้งค่า streetViewControl, mapTypeControl ก็ยังแสดง เนื่องจากเป็นค่าเริ่มต้นของ Google Maps กำหนดให้แสดง ถ้าเราไม่ต้องการแสดงต้องตั้งค่าเป็นทั้งสองอันนี้เป็น false


 

Source Code

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
}

 

3. ส่วนควบคุมแต่ละอัน สามารถกำหนดคุณสมบัติได้

  ...
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
  }
  ...

 

เมื่อต้องการปรับ zoomControl ให้สั้นลงและ mapTypeControl เป็นแบบ Dropdown

 


Source Code

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    }
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}

 

4. วิธีกำหนดตำแหน่งให้กับส่วนควบคุม รูปภาพแสดงตำแหน่งต่างๆ ที่สามารถกำหนดได้

 

เมื่อต้องการเปลี่ยนตำแหน่งของส่วนควบคุม

 

Source Code

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com

หลักสูตร

สอนการใช้ Google Map Javascript Api

ปัจจุบันการนำแผนที่ Google Map มาใช้บน Website ช่วยอำนวยความสะดวก ให้ผู้เข้าชมได้มากด้วยฟังก์ชั่นการใช้หลากหลาย วิธีการใช้และติดตั้งเป็นยังไงติดตามผ่านหลักสูตรนี้ได้เลยครับ
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย