การนำ Google Map มาใช้ใน 4 ขั้นตอน

by JUICE14:260 Comments
การนำ Google Map มาใช้ใน 4 ขั้นตอน

1. ใส่ Javascript Link (ไม่รู้มันเรียกอะไรผมขอเรียกมันแบบนี้แล้วกัน ฮ่าๆ)
ไว้ภายใน tag <head></head> ของ html
เพื่อที่เราจะสามารถเรียกใช้ API และ Function ต่างๆของ Google Map ได้

ตัวอย่าง


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
        type="text/javascript"></script>
</head>


เห็นตรงนี้ไหมครับ
key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA

ตรงนี้คือ Key ที่เราได้จากการลงทะเบียนของ Google Map
ให้เปลี่ยนตรงนี้เป็น Key ที่เราลงทะเบียนไว้นะครับ
Key เว็บใครเว็บมันครับ ทำแทนกันไม่ได้ -*-

2. เพิ่ม Function ของ Javascript ลงไป ต่อจากอันข้างบน
คือภายใน tag <head></head> ของ html
และต้องอยุ่ด้านล่างของ Javascript Link ที่ผมตั้งชื่อให้มันเมื่อสักครู่ -*-

ตัวอย่าง Function initialize()

    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);//เช็ทพิกัด Lat,Lng กึ่งกลางของแผนที่
        map.setUIToDefault();
      }
    }

    </script>


นี่เป็นฟังก์ชั่นพื้นฐานตามตัวอย่างจากเว็บของ Google Map เลยครับผมไปลอกมาเอง -*-
function ตัวนี้ใช้สำหรับติดตั้งแผนที่ลงบนเว็บไซต์ของเราครับ
สิ่งที่น่าสนใจอยู่ที่ตัวนี้ครับ

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

ตัวเลขนี้ 37.4419, -122.1419 คือพิกัดที่ใช้อ้างถึงพื้นที่บนแผนที่ครับ
อันนี้อยู่แถวอเมริกามั้ง ถ้าจะให้แผนที่แสดงพื้นที่ประเทศไทย
ก็ไปหาพิกัดของประเทศไทยมาใส่แทนตรงนี้ครับ


3. ใส่ Event Onload ให้ Tag <body></body> -*-

เราจำเป็นต้องสั่งให้ function initialize() ที่ใช้ในการติดตั้งแผนที่ทำงาน
ตอนที่เอกสารเว็บของเราโหลดขึ้นมาครับ วิธีทำก็ไม่ยาก ทำแบบนี้ครับ


 <body onload="initialize()">


คือเพิ่ม onload="initialize()" ลงไปใน Tag Body


4. ใส่ Tag <div></div> ลงปาย
Tag Div ตัวนี้เป็นตัวที่ใช้แสดง Map ของเรานี่เอง
เลือกใส่ไว้ตรงตามที่เราต้องการได้เลยครับ ใส่แบบนี้ครับ


<div id="map_canvas" style="width: 500px; height: 300px"></div>


หากต้องการปรับขนาดของแผนที่ให้เล็ก หรือใหญ่ ก็ปรับตรง width height ได้เลยครับ
ตรงนี้ใส่เป็น style="width: 500px; height: 300px" ก็กว้าง 500px สูง 300px นั้นเอง

ครบ 4 ขั้นตอนง่ายๆ ใช้ Google Map *o*
เอาล่ะทีนี้เรามาดูตัวอย่างแบบเต็มๆกันครับ


<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

    </script>
  </head>

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


ง่ายมากๆเลยใช่ไหมครับ 4 ขั้นตอนก็เสร็จเรียบร้อยแระ
ต่อไปผมจะแนะนำเทคนิคการใช้ Google Map ขั้นเมพ
ให้ทุกคนได้เมพไปตามๆกัน
โปรดติดตามบทความต่อไปครับ

0 ความคิดเห็น