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

ไฟล์แนบ	ขนาด
ipstar-th-beams.kml [1]	30.2 KB
ปกติ เราสามารถเขียน 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 พอเข้าใจนะครับ
ตัวอย่างที่ได้ :
อ่าน 30027 ครั้ง
SiteTags:
programming [2]
Google Map API [3]