ในบทความนี้ผมจะกล่าวถึงการใช้ Google Maps APIอย่างง่ายเพื่อเป็นตัวอย่างให้ผู้สนใจได้ทำขึ้นเพื่อเริ่มต้นทดลองใช้งาน หรือเรียนรู้ทำความเข้าใจในเทคโนโลยของ Google Maps API
ความรู้พื้นฐานเบื้องต้นที่จำเป็นในงานพัฒนา Google Maps mashup ซึ่งควรมี ดังนี้
1. html/ xhtml
2. javascript
เริ่มต้นการ Google Map API
ก่อนอื่นเราต้องทำการยื่นคำขอ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API เว็บไซต์นั้นเป็นที่ที่เราจะนำเว็บเพจที่มี Google Maps เป็นองค์ประกอบไปวางไว้ หากไม่ใส่ API Key ลงไปจะไม่สามารถใช้บริการ Google Maps API ได้
(URL ที่ยื่นคำขอรับ API Key:- http://www.google.com/apis/maps/signup.html)
*แต่ถ้ารันบนเครื่องผู้ใช้เอง(localhost)ยังไม่จำเป็นต้องใส่ API Key ก็ได้
เค้าโครงของแฟ้มข้อมูล HTML สำหรับการสร้าง Google Maps API อย่างง่าย
โค้ด
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>My Google Maps Mash-up</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
</head>
<body onload='initialize()' onunload='unloadGmap()'>
<!-- body content here -->
<!-- some javascript here -->
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>My Google Maps Mash-up</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
</head>
<body onload='initialize()' onunload='unloadGmap()'>
<!-- body content here -->
<!-- some javascript here -->
</body>
</html>
คำอธิบาย
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
ข้อความ v=2คือเป็นพารามีเตอร์ระบุความต้องการขอใช้ Google Maps API เวอร์ชัน 2 เพื่อทำการประมวลผล(ปัจจุบันมีถึงเวอร์ชัน 3)
ข้อความ key=abcdefg... คือจุดที่ใส่ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API
ในส่วน <!-- body content here --> ควรมี <div id='map_canvas' /> เพื่อทำหน้าที่เป็นกรอบของขอบเขตแสดงแผนที่ และ <!-- some javascript here --> เตรียมไว้เป็นที่ของจาวาสคริปต์ซึ่งจะนำมาแทรกภายหลัง
ข้อความ v=2คือเป็นพารามีเตอร์ระบุความต้องการขอใช้ Google Maps API เวอร์ชัน 2 เพื่อทำการประมวลผล(ปัจจุบันมีถึงเวอร์ชัน 3)
ข้อความ key=abcdefg... คือจุดที่ใส่ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API
ในส่วน <!-- body content here --> ควรมี <div id='map_canvas' /> เพื่อทำหน้าที่เป็นกรอบของขอบเขตแสดงแผนที่ และ <!-- some javascript here --> เตรียมไว้เป็นที่ของจาวาสคริปต์ซึ่งจะนำมาแทรกภายหลัง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น