รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Google map เขียนโปรแกรมบนเว็บแผนที่ ต้องรู้อะไรบ้าง


สอน Google
> Google map เขียนโปรแกรมบนเว็บแผนที่ ต้องรู้อะไรบ้าง


สิ่งที่จะต้องทำ 10 อย่างสำหรับการเขียนเว็บแผนที่โดยใช้ Google Map API ดังนี้ครับ

1. พื้นฐานการเขียนโปรแกรม


Google Map API เหมาะสำหรับคนที่คุ้นเคยกับการเขียนโปรแกรม Javascript การเขียนโปรแกรมเชิงวัตถุ OOP ,HTML และต้องเคยใช้งาน Google Maps มาก่อน เพื่อที่จะได้เข้าใจถึง Event ต่างๆ ในการพัฒนา

2. API Key


ในการประมวลผลเว็บแผนที่ จำเป็นต้องใช้ MAP API เพื่อติดต่อกับ Google ซึ่งเป็นช่องทางที่ Google จะตรวจสอบเราด้วยว่าเราใช้งานเกินลิมิตที่กำหนดให้ไว้หรือไม่ สามารถเข้าไปสมัครและรับ API Key ได้ที่ https://code.google.com/apis/console

3. HTML5


ประกาศเอกสารแบบ HTML5 เนื่องจากเบราวเซอร์ส่วนใหญ่ในปัจจุบันได้เปลี่ยนมารองรับ HTML5 กันแล้ว
ซึ่งอาจจะมีปัญหา CSS บางตัวที่ทำให้การแสดงผลผิดเพี้ยนได้



  Code
<! DOCTYPE html>



4. โหลด Google Maps API


เพิ่มสคริปต์ โค้ด API ที่ได้สมัครมาจากข้อ 2 ในส่วนบนของเอกสาร ซึ่งในลิงค์ API สามารถเซตค่าต่างๆ เช่น ภาษา,sensor, ระดับการซูม ได้



  Code
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE&language=th">
</script>



กำหนดภาษาที่แสดงในแผนที่ โดยปกติจะ Default ไปที่ภาษาอังกฤษ แต่ถ้าอยากเปลี่ยนให้เป็น ภาษาไทย ก็เพิ่มตัวแปรเข้าไปที่ URL ของ Api ดังนี้ language=th

5. การแสดงผลในบราวเซอร์


ช่องที่สแดงผลเราจะกำหนดพื้นที่ใน <div> ที่มีชื่อว่า "map-canvas" ซึ่งได้มีการกำหนดความกว้างและสูงไว้ 100% แล้วแต่เราจะกำหนดการแสดงผลจาก CSS เองก็ได้



  Code
<div id="map-canvas" style="width: 100%; height: 100%"></div>



6. เซตออพชั่นแผนที่


หลักๆ จะมีอยู่ 3 ส่วนได้แก่
1. จุดที่ต้องการให้แผนที่นั้น เซตศูนย์กลางไว้ที่พิกัดไหน ตาม Lattitudes และ Longitudes
center = new google.maps.LatLng(-34.397, 150.644)
2. ระยะการแสดงผล สามารถกำหนดระดับความสูงเองได้ ค่าต่ำสุดคือ 0 โดยอยู่ห่างจากพื้นโลกมากที่สุด ส่วนเลขสูงสุดคือ 18 ใกล้สุด ซึ่งบางพื้นที่อาจจะไม่มีภาพที่ระดับซูมนี้
zoom: 8
3. ประเภทการแสดงผลของแผนที่ ว่าจะให้เป็นแบบภาพถ่ายดาวเทียม , ถนน , Hybrid หรือแผนที่แบบภูมิประเทศ

7. The Map Object


สร้าง Object ของแผนที่ขึ้นมาเพื่อที่จะเรียกใช้ในหน้าเว็บไซต์ โดยจะมีการอ้างอิงพื้นที่การแสดงผล โดยต้องเป็นชื่อเดียวกันกับ <div> ที่สร้างไว้ในข้อ 5 และ ค่า ออพชั่นการแสดงผลจากการเซต Map Option ในข้อ 6




  Code
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);



8. โหลดแผนที่





  Code
<body onload="initialize()">



ให้ทำการเรียกฟังก์ชัน initialize ขณะที่หน้า HTML ถูกเรียกให้แสดงผล ซึ่งขณะที่โหลด โปรแกรมก็จะวิ่งไปอ่าน ค่าต่างๆ ที่อยู่ในฟังก์ชัน ซึ่งก็ล้วนแต่ฟังก์ชันที่ได้กล่าวมาจากข้อก่อนหน้านี้แล้ว

9. HTTPS


ถ้าโปรแกรมของคุณเป็นแบบ HTTPS คุณก็สามารถโหลด API ในรูปแบบของ HTTPS ได้เช่นกัน



  Code
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>



10. ทดลองสร้าง เว็บแผนที่อย่างง่าย


ลองทำความเข้าใจจากโค้ดด้านล่างดูก่อน และทำความเข้าใจว่าแต่ละส่วนทำงานอย่างไร คิดว่าคงไม่ยากจนเกินไปนะครับ


  Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=&sensor=true&language=th">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(13.795406203132826, 100.458984375),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas"/>
</body>
</html>



ตัวอย่าง http://mapsmile.com/map_sample/sample1.html

จาก: http://mapsmile.com/mapboard/google-maps-api/10-10/

Short URL click!
<< กลับคืน : เข้าชม 8,385 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/