Home › Blogs › admin's blog

สร้างแผนที่ของเราเองจาก Google map

Fri, 04/15/2011 - 15:05 — admin

ขั้นตอนที่ 1 : ลงทะเบียนที่ Google Map
เราต้องลง ทะเบียน 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 จะได้

<script rc="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;
key=ABQIAAAAefLDmgWKBq7DpuIB9DBNXxRhyLAo2wgnIR
v3LNNsAzMiIaeSExTya5yMienx18RypzCTBPY2kU_kEw" type="text/javascript"></script>

ขั้นตอนที่ 2 : หาพิกัด Lat,Long ของแผนที่ที่ต้องการ

ค่าที่ต้องการคือ Latitude , Longtitude
ไปหาจากเว็บนี้ http://www.gorissen.info/Pierre/maps/googleMapLocation.php


หรือจะหาจากเวปของ Google map โดยตรงก็ได้
ตัวอย่างขะได้ค่า 15.235545, 104.853376

ขั้นตอนที่ 3 : นำโค้ดที่ได้มาใส่เวปเรา
โดยอย่าลืมแก้โค้ดตรง sensor=true& ด้วย

<!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&amp;v=2&amp;sensor=true&amp;
key=ABQIAAAAefLDmgWKBq7DpuIB9DBNXxRhyLAo2wgnIR
v3LNNsAzMiIaeSExTya5yMienx18RypzCTBPY2kU_kEw" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
//ใส่ค่าละติจูด , ลองติจูด , ระยะการซูม
map.setCenter(new GLatLng(15.235545, 104.853376), 11);
map.setUIToDefault();
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 640px; height: 480px"></div>
</body>
</html>