เขียน Google Map โดยใส่ไฟล์ kml จาก Google Earth

ปกติ เราสามารถเขียน Google map ได้ง่าย ๆ โดยใส่ไว้ในเว็บเรา
โดยที่ชุด Google Map API นั้น เป็น Java Script อยู่แล้ว เราจึงสามารถ include ได้
โดย link ไปยังเว็บที่ google กำหนด โดยเราต้องนำ URL ของหน้าเพจที่เราจะใช้
ลงทะเบียน โดยลงได้ที่ http://code.google.com/apis/maps/signup.html
ใส่ URL ลงไปก็จะได้ key สำหรับใช้งานต่อไปครับ
ตัวอย่างที่ยกมา เป็นของ IPStar ครับ ที่วงเขตบีมให้บริการไว้

จากนั้นเราเริ่มทำการเขียน html ตามนี้ครับ

 

<!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>IPStar Coverage Region</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var marker = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(10.833306, 103.75488), 5);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
// Add KMZ overlay
var geoXml = new GGeoXml("http://sake.in.th/files/ipstar-th-beams.kml");
map.addOverlay(geoXml);

geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 9);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<h3>IPStar Coverage Region</h3>
<p>Search for locations on the map below to find out is it in coverage region.</p>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="" />
<input type="submit" value="Find Location" />
</p>
</form>
<div id="map" style="width: 650px; height: 550px"></div>
</body>
</html>


หวังว่าจะอ่าน code พอเข้าใจนะครับ

ตัวอย่างที่ได้ :

 


AttachmentSize
File ipstar-th-beams.kml30.2 KB

Comments

แจ่มมากครับหา อยู่พอดีเลย

เอาไปลองแล้ว พบว่า kml ต้องอยู่บน Net ด้วย

ไม่สามารถเรียก file kml ได้จาก path หรือ http://localhost

ต้องอยู่บน Server ที่ Script หรือ fuction GGeoXml(""); เข้า file ได้ด้วย

อืม.... ถ้าเราหวง kml file เพราะการสำรวจ หรือทำ kml แต่ละอันอยากจะปกปิด มีวิธีไหนบ้างหน้อ....

แต่ก็ขอบคุณมากๆสำหรับ code ที่รวบรวมมา

ไม่ทราบว่าจะเราทดลองเอา kml หรือ kmz ไปฝากไว้ที่ไหนได้มั่งครับ เพื่อทดลองใช้ script นี้ครับ ขอบคุณมากครับ

sake's picture

ตามที่คุณ @NanoSoftTech ว่าไว้ถูกต้องแล้วครับ ต้องเอาไปไว้ใน hosting จริงๆ ครับ ซึ่งตอนนี้ก็มี hosting ฟรีให้ลองใช้หลายตัว ลอง search google ดูนะครับ "free hosting" ใช้ตัวไหนก็ได้ ก็ save script เป็น html ธรรมดา + kml ลงไป แก้นิดหน่อย ก็สามารถใช้ได้แล้วครับ

ปัญหาที่เกิด เพราะเรื่องความปลอดภัยของ javascipt ครับ

รบกวนสอบถามคุณ sake เพิ่มเติมหน่อยครับ คือสมมติผมมี host แล้วให้ผมนำไฟล์ script ที่เป็น html และไฟล์ kml วางลงไปด้วยกันใน host เลยใช่มั้ยครับ ยังไงขอคำแนะนำด้วยครับ ขอบคุณมากครับ

sake's picture

ใช่ครับแต่ก็ต้องเปลี่ยนค่าให้เหมาะสม
เช่น

map.setCenter(new GLatLng(10.833306, 103.75488), 5); // จุดกึ่งกลางแผนที่
...
var geoXml = new GGeoXml("http://sake.in.th/files/ipstar-th-beams.kml"); // เปลี่ยน URL เป็น kml ของคุณ

ผมลองนำ code ไปรัน ทำการ เปลี่ยน key กับ url .kml แล้ว รัน map ไม่ขึ้นครับ ไม่ทราบเป็น เพราะ อะไรเหรอครับ

sake's picture

ไม่แน่ใจลองกับเครื่องตัวเองรึเปล่าครับ เท่าที่เคยเป็น ถ้าเป็นเครื่อง localhost จะไม่ขึ้นนะครับ ติดเรื่องความปลอดภัยของ javascript

ใส่ทั้ง Key Register ใส่ทั้ง KMZ , KML ที่ ทำมาแสดงในแบบ Earth แต่กลับ แสดงแบบ แบบ MAP คอนโทรล แบบ Google Earth ไม่ได้เลย เพราะอะไร .

sake's picture

หมายถึงไม่ขึ้นแบบในรูปรึเปล่าครับ
ไฟล์ต้องอยู่ในเครื่อง server จริง นะครับ ถ้าเป็นเครื่อง localhost จะไม่ขึ้นครับ