PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เริ่มต้น รู้จัก ก่อนการใช้งาน google map api

24 March 2010 By


Google 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&amp;v=2&amp;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&amp;v=2&amp;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>

 

 

Tags:: jquery google map



หมายเหตุ: บทความในลำดับต่อไปที่เกี่ยวกับ google map จะเรียกใช้งานร่วมกับ jQuery เสมอ

เนื้อหาในส่วนนี้ เป็นเนื้อหาเก่า ใช้งานกับ google map api v2
แนะนำให้อ่านเนื้อหาใหม่ ที่ใช้งาน google map api v3 ได้ที่ 
 
http://www.ninenik.com/Google_map_API_v.3_กับ_jQuery_ลากจุดหา_พิกัด_ค่า_latitude_และ_longitude_-326.html




URL สำหรับอ้างอิง