อยากมีแผนที่ด้วย Google Maps ทำงายยย..
Tuesday, February 12th, 2008 |พอดีวันนี้น้องที่ทำงานถามผมเรื่องจะสมัคร หรือ เอา Google maps มาใส่ในเว็บได้ยังไง จะตอบให้น้องเขาคนเดียวก็เสียดาย ก็เลยเอามานั่งเขียนในนี้ดีกว่า เผื่อคนอยากได้ อยากมี Google Maps ในเว็บตัวเองบ้างจะได้รู้ว่าเอาไปใช้ยังไง
ไอ้ที่พวกเราหลายๆคนเอา Google maps มาใช้เนี่ยมันเรียกว่า Google API ครับ
จะเริ่มต้นยังไง ? (ผมแปลมาจากในเว็บ Google เลย)
1. สมัครเอา Google Maps API key โดยสมัครได้ที่
http://code.google.com/apis/maps/signup.html
2. อ่านคอนเซปต่างๆเกี่ยวกับ Google maps
http://code.google.com/apis/maps/documentation/index.html
3. ดูตัวอย่างต่างๆจาก Google
http://code.google.com/apis/maps/documentation/examples/
4. อ่านเนื้อหาและค่าตัวแปรต่างๆในการใช้งาน
http://code.google.com/apis/maps/documentation/reference.html
ว่าแล้วก็ลองสมัครซะเลย เข้า URL ตามข้อ 1 ก็จะเจอกฏต่างๆอ่านให้เรียบร้อยซะ แล้วก็ กรอกชื่อเว็บที่ต้องการเอา Google Maps ไปติด
เมื่อกรอกเสร็จ กดปุ๊บก็อาจจะมีการให้ใส่ Username ของสมาชิก Google ครับ ใครไม่มีก็สมัครไว้ซะนะครับ แล้วก็จะได้โค๊ด API Key มาครับ
ซึ่งในหน้านี้มันจะให้โค๊ดตัวอย่างมาด้วย ของผมได้มาเป็น
<!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”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-
SuS9hIGP65u9pZLTChUIxSefpL4RjRmrihBRnO8R1hbe2
FbQRTFofhgZGmnohgs0h4paRrNmEpapQ”
mce_src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-SuS9hIGP65u9pZLTChUIxSefpL4RjRmrihBRnO8R1hbe2Fb
QRTFofhgZGmnohgs0h4paRrNmEpapQ”
type=”text/javascript”></script>
<script type=”text/javascript”> //<![CDATA[ function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map”));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
} //]]>
</script>
</head>
<body onload=”load()” onunload=”GUnload()”>
<div id=”map” style=”width: 500px; height: 300px”></div>
</body>
</html>
ซึ่งต่อจากนั้นก็คงต้องเข้าไปดูเพิ่มเติมใน
http://code.google.com/apis/maps/documentation/examples/
ว่าจะแก้ไข หรือ ตกแต่ง Maps ของตัวเองแบบไหนยังไงนะครับ
อันนี้ที่ผมใช้กับ CMusedcar.com ครับ
หรือดูตามเว็บนี้ครับเพื่อศึกษาการใช้งาน Google Maps
http://code.google.com/support/bin/answer.py?answer=65622&topic=11369
การใช้งาน Google maps ร่วมกับ PHP MySQL ครับ
http://googlemapsmania.blogspot.com/
รวมเทคนิคจากเว็บต่างๆ ไปวิวโค๊ดกันดูเอาเอง
http://tech.reumer.net/google-maps/demo-google-maps/
รวบรวมเทคนิคการพัฒนา Google Maps
อีกอันหนึ่งครับสำหรับคนที่ต้องการตำแหน่งพิกัดของ จังหวัด หรือ ประเทศต่างๆทั่วโลก ทำออกมาเป็นไฟล์ให้ดาวน์โหลดเลยครับ สะดวกสุดๆ ของไทยเองก็มีครับ ทุกจังหวสัดเลย
http://earth-info.nga.mil/gns/html/namefiles.htm
เอ๊า….ว่าแล้วก็เอาไปใช้กันได้เลย ^_^
อ้อ!! ผมลืมบอกไป หากจะทดสอบในเครื่องก็กรอกชื่อเว็บตอนจะเอาโค๊ด API Key ก็ให้กรอกเป็น localhost หรือ 127.0.0.1 หรือตามแต่ที่ท่านจำลอง server แล้วเรียกแบบไหนนะครับ
