เริ่มต้น รู้จัก ก่อนการใช้งาน google map api
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&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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
