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/docu ... t/controls
[b][url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/3780-google-map-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5.html]Google Maps[/url][/b] กำลังเป็นที่นิยมในปัจจุบันไม่ว่าจะเป็นการค้นหาที่ตั้งบนแผนที่ การค้นหาเส้นทาง นอกจากนี้ยังเหมาะสำหรับนักพัฒนาเว็บไซต์ที่ต้องการระบุสถานที่ตั้งของสถานประกอบการณ์นั้น ๆ ซึ่งหลายคนเลือกใช้เป็นค่า Default แต่ในวันนี้เราจะมาแนะนำการใช้งานปุ่มต่าง ๆ ที่อยู่บน Google Maps [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2038-api-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]API[/url] และวิธีการเปิด-ปิดปุ่มเหล่านั้น หากไม่ต้องการใช้งาน
[b]ปุ่มควบคุมที่มีอยู่บน Google Maps[/b]
- 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 โหมดเต็มหน้าจอ
[img]http://snap.mindphp.com/index.php?view=2017Jul03_5959d95085867[/img]
[b]การปิดค่าเริ่มต้น ของแผนที่ :[/b]
[code]function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 13.8380209, lng: 100.5814654},
disableDefaultUI: true
});
}[/code]
การเพิ่มปุ่มควบคุมลงในแผนที่ :
[code]{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}[/code]
[b]ตัวอย่าง[/b] การปิดปุ่มซูม และเปิดใช้งานปุ่ม Scale
[code]function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 13.8380209, lng: 100.5814654},
zoomControl: false,
scaleControl: true
});
}[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_5959ddfe9d3b1[/img]
[b]ตัวอย่าง[/b] การเปลี่ยนรูปแบบของแผนที่
[code]
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']
}
});
}[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_5959de245c54c[/img]
[b]ข้อจำกัด[/b]
- สามารถใช้ปุ่มควบคุมได้ เมื่อแผนที่มีขนาด 200x200px ขึ้นไป
- ระบบ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3546-ios-%E0%B9%84%E0%B8%AD-%E0%B9%82%E0%B8%AD-%E0%B9%80%E0%B8%AD%E0%B8%AA-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]IOS[/url] ไม่รองรับการใช้งานในโหมดเต็มหน้าจอ
ศึกษาข้อมูลเพิ่มเติมได้ที่ : [url]https://developers.google.com/maps/documentation/javascript/controls[/url]