เปิด-ปิด การใช้งานปุ่มต่าง ๆ ที่อยู่บน Google Maps API

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ik Kat
PHP Super Member
PHP Super Member
Posts: 291
Joined: 26/06/2017 2:32 pm

เปิด-ปิด การใช้งานปุ่มต่าง ๆ ที่อยู่บน Google Maps API

Post by Ik Kat » 03/07/2017 1:17 pm

Google Maps กำลังเป็นที่นิยมในปัจจุบันไม่ว่าจะเป็นการค้นหาที่ตั้งบนแผนที่ การค้นหาเส้นทาง นอกจากนี้ยังเหมาะสำหรับนักพัฒนาเว็บไซต์ที่ต้องการระบุสถานที่ตั้งของสถานประกอบการณ์นั้น ๆ ซึ่งหลายคนเลือกใช้เป็นค่า Default แต่ในวันนี้เราจะมาแนะนำการใช้งานปุ่มต่าง ๆ ที่อยู่บน Google Maps API และวิธีการเปิด-ปิดปุ่มเหล่านั้น หากไม่ต้องการใช้งาน

ปุ่มควบคุมที่มีอยู่บน Google Maps
- The Zoom control ใช้ในการปรับระดับการซูมของแผนที่ โดยจะประกอบด้วยปุ่ม "+" และ "-"
- The Map Type control การเลือกชนิดของแผนที่ เช่น ROADMAP, SATELLITE, HYBRID, และ TERRAIN จะแสดงอยู่ทางด้านซ้ายบนของแผนที่
- The Street View control จะมีไอคอน Pegman ซึ่งสามารถไว้ลากไปบนแผนที่ได้หากต้องการเปิดใช้ Street View
- The Rotate control ใช้ในการปรับค่าความเอียงและการหมุนของแผนที่
- The Scale control แสดงองค์ประกอบมาตราส่วนของแผนที่
- The Fullscreen control โหมดเต็มหน้าจอ

Image

การปิดค่าเริ่มต้น ของแผนที่ :

Code: Select all

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 13.8380209, lng: 100.5814654},
    disableDefaultUI: true
  });
}
การเพิ่มปุ่มควบคุมลงในแผนที่ :

Code: Select all

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}
ตัวอย่าง การปิดปุ่มซูม และเปิดใช้งานปุ่ม Scale

Code: Select all

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 13.8380209, lng: 100.5814654},
    zoomControl: false,
    scaleControl: true
  });
}
Image

ตัวอย่าง การเปลี่ยนรูปแบบของแผนที่

Code: Select all

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 13.8380209, lng: 100.5814654},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}
Image

ข้อจำกัด
- สามารถใช้ปุ่มควบคุมได้ เมื่อแผนที่มีขนาด 200x200px ขึ้นไป
- ระบบ IOS ไม่รองรับการใช้งานในโหมดเต็มหน้าจอ

ศึกษาข้อมูลเพิ่มเติมได้ที่ : https://developers.google.com/maps/docu ... t/controls

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests