PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

24 March 2010 By
google map jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google map jquery



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>

 

 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017


หมายเหตุ: บทความในลำดับต่อไปที่เกี่ยวกับ 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







Tags:: jquery google map






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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