ปกติ เราสามารถเขียน 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&v=2&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 พอเข้าใจนะครับตัวอย่างที่ได้ :
| ไฟล์แนบ | ขนาด |
|---|---|
 ipstar-th-beams.kml | 30.2 KB |
SiteTags:
ความเห็น
แจ่มมากคร
แจ่มมากครับหา อยู่พอดีเลย
เอาไปลองแล้ว พบว่า kml ต้องอยู่บน Net ด้วย
เอาไปลองแล้ว พบว่า kml ต้องอยู่บน Net ด้วย
ไม่สามารถเรียก file kml ได้จาก path หรือ http://localhost
ต้องอยู่บน Server ที่ Script หรือ fuction GGeoXml(""); เข้า file ได้ด้วย
อืม.... ถ้าเราหวง kml file เพราะการสำรวจ หรือทำ kml แต่ละอันอยากจะปกปิด มีวิธีไหนบ้างหน้อ....
แต่ก็ขอบคุณมากๆสำหรับ code ที่รวบรวมมา
จะทดลองเอา kml หรือ kmz ไปฝากได้ที่ไหนครับ
ไม่ทราบว่าจะเราทดลองเอา kml หรือ kmz ไปฝากไว้ที่ไหนได้มั่งครับ เพื่อทดลองใช้ script นี้ครับ ขอบคุณมากครับ
ตามที่คุณ @NanoSoftTech
ตามที่คุณ @NanoSoftTech ว่าไว้ถูกต้องแล้วครับ ต้องเอาไปไว้ใน hosting จริงๆ ครับ ซึ่งตอนนี้ก็มี hosting ฟรีให้ลองใช้หลายตัว ลอง search google ดูนะครับ "free hosting" ใช้ตัวไหนก็ได้ ก็ save script เป็น html ธรรมดา + kml ลงไป แก้นิดหน่อย ก็สามารถใช้ได้แล้วครับ
ปัญหาที่เกิด เพราะเรื่องความปลอดภัยของ javascipt ครับ
แก้นิดหน่อย
รบกวนสอบถามคุณ sake เพิ่มเติมหน่อยครับ คือสมมติผมมี host แล้วให้ผมนำไฟล์ script ที่เป็น html และไฟล์ kml วางลงไปด้วยกันใน host เลยใช่มั้ยครับ ยังไงขอคำแนะนำด้วยครับ ขอบคุณมากครับ
ใช่ครับแต่ก็ต้องเปลี่ยนค่าให้
ใช่ครับแต่ก็ต้องเปลี่ยนค่าให้เหมาะสม
เช่น
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 ไปรัน ทำการ
ผมลองนำ code ไปรัน ทำการ เปลี่ยน key กับ url .kml แล้ว รัน map ไม่ขึ้นครับ ไม่ทราบเป็น เพราะ อะไรเหรอครับ
ไม่แน่ใจลองกับเครื่องตัวเองรึ
ไม่แน่ใจลองกับเครื่องตัวเองรึเปล่าครับ เท่าที่เคยเป็น ถ้าเป็นเครื่อง localhost จะไม่ขึ้นนะครับ ติดเรื่องความปลอดภัยของ javascript
ใส่ ทั้ง KMZ , KML ที่ประสงให้แสดงแบบ Earth แต่กลับแสดงเป็นMap
ใส่ทั้ง Key Register ใส่ทั้ง KMZ , KML ที่ ทำมาแสดงในแบบ Earth แต่กลับ แสดงแบบ แบบ MAP คอนโทรล แบบ Google Earth ไม่ได้เลย เพราะอะไร .
หมายถึงไม่ขึ้นแบบในรูปรึเปล่า
หมายถึงไม่ขึ้นแบบในรูปรึเปล่าครับ
ไฟล์ต้องอยู่ในเครื่อง server จริง นะครับ ถ้าเป็นเครื่อง localhost จะไม่ขึ้นครับ