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

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

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

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

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

โพสต์โดย 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 โหมดเต็มหน้าจอ

รูปภาพ

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

โค้ด: เลือกทั้งหมด

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


การเพิ่มปุ่มควบคุมลงในแผนที่ :

โค้ด: เลือกทั้งหมด

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}


ตัวอย่าง การปิดปุ่มซูม และเปิดใช้งานปุ่ม Scale

โค้ด: เลือกทั้งหมด

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


รูปภาพ

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

โค้ด: เลือกทั้งหมด

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']
    }
  });
}


รูปภาพ

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

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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน