ขันแรกเลยครับ เราต้องลง ทะเบียน API KEY กับ google ก่อน ที่ http://code.google.com/intl/th/apis/maps/signup.htmlถ้าเราใช้ localhost ก็ใส่ localhost หรือ 127.0.0.1 ก็ได้ติ๊กที่ checkbox I have read and agree with the terms and conditions (printable version) กด Gennerate key เราจะได้ API มาชุดหนึ่งผมใช้ http://localhost แล้ว generate จะได้ Code<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAg38oHhN2wV_zgKsKydXuIRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQ3S4_IiZWFHj-fcaSsEj07Q6YVsA" type="text/javascript"></script>
มาใช้งานแล้วต่อไป .. หาจุดพิกัดตัวเองซะก่อน เราจะได้เอาแค่ค่า Latitude , Longtitude ครับผมไปหาจากเว็บนี้ http://www.gorissen.info/Pierre/maps/googleMapLocation.phpซูม ซูม แล้วคลิ๊กดูข้างขวาจะเห็น แล้วมาลองสร้างแมปง่าย ๆ กันดูนะครับCode<!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 ของฉัน</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAg38oHhN2wV_zgKsKydXuIRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQ3S4_IiZWFHj-fcaSsEj07Q6YVsA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
//ใส่ค่าละติจูด , ลองติจูด , ระยะการซูม
map.setCenter(new GLatLng(12.182634, 99.849243), 11);
map.setUIToDefault();
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 640px; height: 480px"></div>
</body>
</html>
แค่นี้ ก็ได้แมปมาแสดงอย่างสวยหรูในเว็บเราแล้ว .. เย้ !! ส่วนรูปนี้คือ ระบบแหล่งท่องเที่ยวออนไลน์ ที่ผมทำเสร็จแล้ว