รูปแบบของ Map Type ที่อยู่บน Google Maps :
- roadmap displays มุมมองปกติ เป็นค่าเริ่มต้นที่สามารถมองได้ในรูปแบบ 2 มิติ
- satellite displays การแสดงภาพจากดาวเทียม
- hybrid displays เป็นการผสมระหว่างมุมมองปกติ และภาพจากดาวเทียม
- terrain displays เป็นแผนที่ทางภูมิศาสตร์
ตัวอย่าง ROADMAP :
โค้ด: เลือกทั้งหมด
var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
ตัวอย่าง SATELLITE :
โค้ด: เลือกทั้งหมด
var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
ตัวอย่าง HYBRID :
โค้ด: เลือกทั้งหมด
var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: 'hybrid'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
ตัวอย่าง TERRAIN :
โค้ด: เลือกทั้งหมด
var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: 'terrain'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
โค้ด: เลือกทั้งหมด
การเปิดใช้งานและปิดใช้งานภาพ 45 องศา :
โค้ด: เลือกทั้งหมด
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 13.8380209, lng: 100.5814654},
zoom: 18,
mapTypeId: 'satellite'
});
map.setTilt(45);
}
- หากต้องการปิดให้ตั้งเป็น map.setTilt(0);
- หากต้องการเปิดให้ตั้งเป็น map.setTilt(45);
โค้ด: เลือกทั้งหมด
การหมุนภาพ 45 องศา :
โค้ด: เลือกทั้งหมด
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 13.8380209, lng: 100.5814654},
zoom: 15,
mapTypeId: 'satellite',
heading: 90,
tilt: 45
});
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery.
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}