กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map

11 September 2010 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

google map รูปแบบแผนที่ ประเภทแผนที่

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google map รูปแบบแผนที่ ประเภทแผนที่

ดูแล้ว 19,458 ครั้ง

รูปแบบ ประเภทของแผนที่ google map ตามการใช้งาน

ROADMAP ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน และเส้นทาง
SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ

การกำหนด แก้ไข และเปลี่ยนแปลงรูปแบบ ประเภทของ แผนที่ google map สามารถ
ทำได้ใน 2 วิธี
(ในที่นี้ไม่ได้หมายถึง การเปลี่ยนมุมมองจากตัวแผนที่โดยตรงจากผู้ใช้งาน แต่เป็นการกำหนดในส่วนของโปรแกรม)

1.การกำหนด ตอนเริ่มต้นสร้างแผนที่

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP // การกำหนดตอนเริ่มสร้างแผนที่
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

2.การกำหนด จากใช้งาน ฟังก์ชัน คำสั่งในภายหลัง ด้วย setMapTypeId()

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

ROADMAP ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน
SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ

ตัวอย่างโค้ดการกำหนด การใช้งาน ตามข้อ 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
  <div style="margin:auto;text-align:center;">
  <div style="width:500px;text-align:left;margin:auto;">
	ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน<br />
	SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม<br />
	HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน<br />
	TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ 	  <br />
    </div>
  <button>ROADMAP</button>&nbsp;
  <button>SATELLITE</button>&nbsp;
  <button>HYBRID</button>&nbsp;
  <button>TERRAIN</button> 
  </div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);

	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	
//	MapTypeId.ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน
//	MapTypeId.SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
//	MapTypeId.HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
//	MapTypeId.TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ 	
	
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 15, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.HYBRID // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
//		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"ไตเติลที่ต้องการแสดง!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});

}
$("button").click(function(){ 
	var mapType=$(this).text();
	map.setMapTypeId(eval("GGM.MapTypeId."+mapType)); 
});
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งที่เปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
	$("<script/>", {
	  "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ข้อสังเกต เราจะไม่สามารถกำหนด ประเภทของ แผนที่โดยตรง แต่ต้องกำหนดโดยอ้างอิง ผ่าน MapTypeId class คือต้องกำหนดเป็น
google.maps.MapTypeId.TERRAIN
แทนที่จะกำหนด TERRAIN

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ