How To Google Map
By Thipbodee Sittibusaya [ Monday, January 25th, 2010 ]
Google Map
คือ Applicationแผนที่onlineที่ GoogleเปิดAPIให้เราเรียกงานผ่านWebโดยไม่ต้องเสียค่า
ใช้จ่ายแต่อยางใดโดยgoogleได้เปิดช่องทางให้ท่านสามารถเรียกใช้งาน Google Mapsผ่าน
API ให้ไปปรากฏบนหน้าwebsiteของท่านได้และมีวิธีการทำที่ไม่ซับซ้อนมากจนเกินไป
ความรู้ที่เพื่อนควรมีก่อนการทำGoogle Map
1 FlashScript หรือ JAVAScript
2 Form HTMLและCSS
วิธีทำGoogle Mapนั้นมีขั้นตอนดังต่อไปนี้
1 ต้องทำการสมัครAPI keyก่อนโดยการใส่ชื่อ websiteของ ท่าน และgoogleจะทำการ
Generate APIKey ให้ และใช้Key นี้เพื่อใช้ในตรวจสอบก่อนการการเรียกใช้งาน Google Map
<link ที่ใช้สมัคร API key>http://code.google.com/apis/maps/
2 เราได้ใส่ชื่อแล้วเราจะได้ APIที่มีหน้าตาแบบนี้
Your key is:ABQIAAAAZldylSKaT1dVGBqo83Q24RStgBFla87IauNVcdIb-lDNqlsAbxR
Uu6uROJCOT9dSBfzZWpAnEtJ0Hg
This key is good for all URLs consisting of this registered domain (and directory if applicable)
:http://192.168.1.53/What2Eat/
3 หลังจากได้key มแล้วให้เราทำการbookmarkหน้านั้น เอาไวเพื่อง่ายต่อการจดจำหรือแล้วแต่เทคนิคที่
จำของแต่ละคน
4 เราใช้คำสั่งนั้นในการตรวจสอบและเรียกใช้งานgoogle maps ไปใส่ในหน้าที่เราต้องการแสดงGoogle Map
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAA
AA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
5 หลังจากนั้นเราจะเขียนส่วนประกอบของGoogle Mapที่เราตองการผ่าน Func. initialize()
6 เราจะสั่งให้bodyทำการLoad Func. initialize()เพื่อShow Google Map
7 เราใช้<div id="map_canvas" style="width: 500px; height: 300px"></div>เพื่อกำหนดขนาดของ
Google Mapได้ที่style="width: 500px; height: 300px"
**ข้อแนะนำในการสมัครAPI-key ควรใช้ชื่อURLหรือMap URL เพื่อความสะดวกเวลาทำการย้ายServerและไม่ควรใช้ IP AddressในการสมัครAPI Key
ตัวอย่างการเขียนGoogle Maps
<!–
copyright (c) 2009 Google inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
–>
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA1XbMiDxx_BTCY2_Fk
Ph06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
ส่วนเพิ่มเติม
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
37.4419, -122.141เป็นการกำหนดค่าเริ่มต้นให้กับแผนที่และ 13คือการกำหนดว่าเราจะมองแผนที่ละเอียดแค่ไหน
เราสามารถเพิ่มเติมเครื่องมือและลูกเล่นให้กับGoogle Mapได้โดย
เรียกคำสั้งต่อจากการsetตำแหน่ง
map.addControl(new GSmallMapControl());คือการเพิ่มเครื่องมือปรับระดับความละเอียดของGoogle Map
map.addControl(new GMapTypeControl());คือการเพิ่มเครื่องมือเรียกชนิดmapต่างๆของGoogle Map
สรุป
ในการสมัครใช้งานGoogle Map นั้นทำได้ง่ายมากและไม่เสียค่าใช้จ่ายแต่อย่างใด Google Map จึงเป็นอีกทางเลือกหนึ่งในการเพิ่ม
Function การใช้งานให้กับWeb Site ซึ่งวิธ๊ที่ผมได้นำเสนอไป นั้นเป็นเพียงการเรียกใช้งานGoogle Map เบื้องต้นเท่านั้น หากท่าผู้อ่านต้อง
การใช้งานในส่วนอื่นก็สามารถศึกษาเพิ่มเติมได้ที่Reference สุดท้ายผมหวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้ที่ต้องการศึกษาวิธีการใช้งาน
Google Map
ข้อมูลเพิ่มเติมสามารถหาอ่านได้ที่
http://code.google.com/apis/maps/documentation/
ตัวอย่างการเขียนCode
http://code.google.com/apis/ajax/playground/?exp=maps#map_control_simple
Reference
http://code.google.com/apis/ajax/playground/?exp=maps#map_control_simple
http://code.google.com/apis/maps/documentation/
Leave comment...