กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map
11 September 2010รูปแบบ ประเภทของแผนที่ 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 ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ
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>
<button>SATELLITE</button>
<button>HYBRID</button>
<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: "http://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
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 1802 19 Oct 08 คำสั่ง SQL COUNT อ่าน 7773 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 3046 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1949 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 8026 22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2865 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 6157 10 Oct 10 การใช้งาน stream.publish ของ facebook Old REST API ด้วย php sdk อ่าน 2951 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2847 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 5297 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 2144 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2778 17 Feb 12 ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย อ่าน 3274 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 6735 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 5945 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4760 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7705 25 Sep 08 กรอกข้อมูลได้เฉพาะตัวเลข อ่าน 4165 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 6296 25 Sep 08 javasdcript กับการเข้ารหัส encoding และการถอดรหัส decoding อ่าน 4243