ปุ่มควบคุมที่มีอยู่บน 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