เปิด-ปิด การใช้งานปุ่มต่าง ๆ ที่อยู่บน Google Maps API
โพสต์แล้ว: 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 โหมดเต็มหน้าจอ
การปิดค่าเริ่มต้น ของแผนที่ :
การเพิ่มปุ่มควบคุมลงในแผนที่ :
ตัวอย่าง การปิดปุ่มซูม และเปิดใช้งานปุ่ม Scale
ตัวอย่าง การเปลี่ยนรูปแบบของแผนที่
ข้อจำกัด
- สามารถใช้ปุ่มควบคุมได้ เมื่อแผนที่มีขนาด 200x200px ขึ้นไป
- ระบบ IOS ไม่รองรับการใช้งานในโหมดเต็มหน้าจอ
ศึกษาข้อมูลเพิ่มเติมได้ที่ : https://developers.google.com/maps/docu ... t/controls
ปุ่มควบคุมที่มีอยู่บน 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
}
โค้ด: เลือกทั้งหมด
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/docu ... t/controls