เริ่มต้น รู้จัก ก่อนการใช้งาน google map api
24 March 2010Google Maps API คืออะไร
Google Maps API ทำให้ท่าน สามารถแทรก Google Maps หรือแผนที่จาก Google ลงในเว็บเพจของท่าน
เพื่อประโยชน์ เช่น ระบุตำแหน่งที่ตั้งของ บริษัท ,สถานที่, ที่นัดหมาย เป็นต้น ได้ โดยสามารถจะจัดการรายละเอียด
ต่างๆในแผนที่ เช่นเดียวกับที่ใช้งานใน http://maps.google.com ได้
การใช้งาน Google Maps API จำเป็นจะต้องมี Google Maps API Key
ซึ่งสามารถเข้าไปขอรับได้ที่ url ตามด้านล่างนี้
http://code.google.com/apis/maps/signup.html
เมื่อเข้าไปแล้วให้กดเลือก ยอมรับเงื่อนไข การใช้งาน และกรอก url เว็บไซต์ที่ต้องการนำ google map ไปใช้
ในกรณีต้องการทดสอบที่เครื่องการใช้จริง สามารถ ใช้ script ด้านล่างแทนได้ เมื่อใช้งานจริง จึงค่อยเปลี่ยน
ในส่วนค่า key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A
เป็นค่าใหม่
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A" type="text/javascript"></script>
ตัวอย่างโค้ด google map พื้นฐาน แสดงแผนที่ประเทศไทย
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html{
padding:0px;
margin:0px;
}
div#map_canvas{
margin:auto;
width:500px;
height:450px;
overflow:hidden;
}
</style>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas">
</div>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(13.77436,100.53458), 5);
map.setUIToDefault();
}
}
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
26 Mar 09 กำหนดข้อความเริ่มต้นให้กับ input text ด้วย jquery อย่างง่าย อ่าน 3200 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 2320 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4126 28 Oct 08 การ hilight form ฟอร์มด้วย javascript อย่างง่าย อ่าน 3530 07 Jul 10 เทคนิค php ดึงข้อมูล comment จาก facebook มาใช้งาน อ่าน 5272 14 Feb 09 ข้อแตกต่างระหว่าง mysql_pconnect กับ mysql_connect อ่าน 2664 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 2700 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 30 Sep 08 แปลงตัวแปร String เป็นค่าตัวเเลข อ่าน 2767 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2126 25 Nov 09 สร้างระบบ สมาชิกออนไลน์ member online ด้วย php และ ajax ใน jQuery อย่างง่าย อ่าน 7642 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2541 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 4989 26 Oct 08 การสร้างปุ่มยืนยันให้กับ ลิ้งค์ ด้วย function return confirm() อ่าน 3791 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 6347 11 Nov 10 แนะนำ การแทรก swf ไฟล์ ด้วย jQuery SWFObject Plugin อ่าน 2364 25 Sep 08 Upload รูปภาพ หรือไฟล์ด้วย ฟังก์ชั่น ใช้ง่าย อ่าน 4655 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2291 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4467