การนำ google map มาใส่บนเว็บแบบ simple simple (ง่ายมักมาก)

google map api lv3 no key

สวัสดีครับวันนี้ผมจะมาแนะนำ การนำ google map api lv3 มาใส่บนเว็บ ซึ่งเวอร์ชั่นนี้เราสามารถนำมาใช้ได้โดยไม่ต้องสมัคร google map api key
หมายเหตุ: อนาคตอาจต้องสมัคร -*- แต่ ณ ตอนนี้ผมลองแล้วสามารถแสดง map ได้ปกติครับ

เราลองมาดูวิธีการนำ google map มาใช้กันครับ
สิ่งสำคัญที่ทำให้ google map สามารถแสดงบนเว็บของเราได้หลักๆมีสามสิ่งดังนี้ครับ

1. การดึง script ของ google map api มาใช้ โดยใช้ script tag มันเรียกว่าอะไรหว่า ฮ่าๆ
ดูตัวอย่างด้านล่างดีกว่าครับ

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

2. เมื่อเราดึง script ของ google map api มาได้แล้ว จากนั้นเราจะเรียกใช้ class หรือ function ต่าง
ๆ ซึ่งเป็น javascript มาใช้ในการสร้างแผนที่
เรามาดู code กันเลยดีกว่า

 var map;
      function initialize() {

  var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(15.000682,103.728207),  // ตัวเลขแสดงถึงพิกัด lat lng ในประเทศไทย จังหวัดสุรินทร์ อิอิ
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),  // วาดแผนที่ลง tag div ที่มี id ชื่อว่า map_canvas
            myOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize); // สร้างแผนที่เมื่อโหลดหน้าเว็บ

3. tag DIV ที่ใช้ในการแสดงแผนที่ ก็ไม่มีอะไรมากครับเอาแท็ก DIV มาใส่แล้วก็กำหนด
ความกว้าง ความสูงให้มัน ตามต้องการ และอย่าลืมกำหนด ID ให้มันด้วย แบบนี้

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

มาดูตัวอย่างไฟล์ html เต็มๆกันดีกว่า

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> google map api lv 3 by step juice </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

<script type="text/javascript">
      var map;
      function initialize() {

  var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(15.000682,103.728207),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


 </head>

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


 </body>
</html>

ภาพตัวอย่าง