Something between the line of code.

Monday, December 04, 2006

เริ่มเขียน Google Maps

ภาพดีๆสักภาพหนึ่ง แทนคำอธิบายได้นับพัน
คุณสามารถนำภาพถ่ายผ่านดาวเทียมสวยๆ จาก Google Maps มาติดในเวบเพจของคุณได้ โดยใช้ JavaScript code แค่ไม่กี่บรรทัด

สิ่งที่คุณต้องเตรียม ก็เริ่มจาก
1.มี URL มีเวบเพจ ที่คุณจะนำภาพไปติด
2.มี Google account เช่น Gmail
ถัดไปก็ไปขอ key code ที่นี่ Google Maps
(จะต้องใช้ URL และ Google account ในการขอ Google Maps key code)
ซึ่งkey codeนี้จะต้องใช้ในการเขียน เวบเพจทุกหน้าที่ต้องการติดรูป จาก Google Maps และใช้ได้เฉพาะกับ URL ที่ได้ลงทะเบียนขอไว้ ในแต่ละ key code เท่านั้น

ได้มาแล้วก็เริ่มกันเลย
Code ประมาณนี้ จะแสดงภาพถ่ายผ่านดาวเทียม ของท้องสนามหลวง
(นำ Google Maps key code (ยาวเหยียด) ที่ได้มา ใส่แทน code123)
(ไฟล์ .html นี้ต้อง upload ไว้ในsubfolder ของ URLที่ลงทะเบียนไว้)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=code123"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(13.754976,100.493000),16);
map.setMapType( G_SATELLITE_TYPE );
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

จากcodeข้างบน
กำหนด charset เป็น utf-8
คุณก็ต้อง save ไฟล์ .html ซึ่ง Encoding เป็นแบบ utf-8 ด้วย

ในส่วนtag head ของไฟล์ .html
จะมี JavaScript อยู่ 2 ท่อน
ท่อนแรกจะเหมือนๆกันในทุกเวบเพจของคุณ

<script src="http://maps.google.com/maps?file=api&v=2&key=code123"
type="text/javascript"></script>

เป็นการบอกว่ามี JavaScript code ส่วนหนึ่งอยู่ที่ http://maps.google.com
ต้องใส่ Google Maps key code ที่ได้มา ใส่แทนตัวอักษร code123 (ที่ผมลงไว้)

JavaScript ท่อนถัดมาเป็นคำสั่งทำการ load Google Map
ลงไปในส่วน <div id="map" style="width: 500px; height: 300px"></div> ในเวบเพจ

<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(13.754976,100.493000),16);
map.setMapType( G_SATELLITE_TYPE );
}
}
</script>

จะเห็นว่าเป็นการเรียกใช้คำสั่งของ Gmap version2 (Gmap2)
บรรทัด
map.setCenter(new GLatLng(13.754976,100.493000),16);
คือคำสั่ง กำหนดกึ่งกลางภาพเป็นพิกัด ละติจูด 13.754976
ลองติจูด 100.493000 และกำหนด Zoom ระดับ 16
ถ้าคุณไม่ทราบพิกัดของสถานที่ ที่ต้องการ
ลองแวะไปที่ http://maps.google.com/
เลือกดูจนพบสถานที่ ที่คุณต้องการ แล้วคลิกที่ Link to this page
รอสักพักจะแสดง URL พร้อมพิกัด (บน navigate ของ browser) ให้คุณcopyไปใช้ได้
เช่น สนามหลวง (13.754976,100.493000)

posted by bpitk at 12:04 PM