setting

PockyDesign: สอนแทรก google map api

สอนแทรก google map api

เริ่มต้น รู้จัก ก่อนการใช้งาน google map api

Google Api
Google Api


Google Maps API คืออะไร
Google Maps API ทำให้ท่าน สามารถแทรก Google Maps  หรือแผนที่จาก Google ลงในเว็บเพจของท่าน
เพื่อประโยชน์ เช่น ระบุตำแหน่งที่ตั้งของ บริษัท ,สถานที่, ที่นัดหมาย เป็นต้น ได้ โดยสามารถจะจัดการรายละเอียด
ต่างๆในแผนที่ เช่นเดียวกับที่ใช้งานใน http://maps.google.com ได้
การใช้งาน Google Maps API  จำเป็นจะต้องมี Google Maps API Key
ซึ่งสามารถเข้าไปขอรับได้ที่ url ตามด้านล่างนี้
http://code.google.com/apis/maps/signup.html
เมื่อเข้าไปแล้วให้กดเลือก ยอมรับเงื่อนไข การใช้งาน และกรอก url เว็บไซต์ที่ต้องการนำ google map ไปใช้
ในกรณีต้องการทดสอบที่เครื่องการใช้จริง สามารถ ใช้ script ด้านล่างแทนได้ เมื่อใช้งานจริง จึงค่อยเปลี่ยน
ในส่วนค่า key=AAAAAAAAAAAAAAAAAAABBBBBBBBBCCCCCCDDDDDDDEEEEEEEEFFFFFFFF_G

  1. <script src="http://maps.google.com/mapsfile=api&amp;v=2&amp;key=
    AAAAAAAAAAAAAAAAAAABBBBBBBBBCCCCCCDDDDDDDEEEEEEEEFFFFFFFF_G"
    type=    "text/javascript"></script>  

ตัวอย่างโค้ด google map พื้นฐาน แสดงแผนที่ประเทศไทย

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>google map api</title>  
  7. <style type="text/css">  
  8. html{  
  9.     padding:0px;  
  10.     margin:0px;  
  11. }  
  12. div#map_canvas{  
  13.     margin:auto;  
  14.     width:500px;  
  15.     height:450px;  
  16.     overflow:hidden;  
  17. }  
  18. </style>  
  19.   
  20. </head>  
  21.   
  22. <body onload="initialize()" onunload="GUnload()">  
  23.   
  24. <div id="map_canvas">  
  25. </div>   
  26.   
  27.   
  28. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRRn0sJCm-CFhvGa72HC9maIDPrX5RTjV4z1TYBiTrysASJhAHZCMDeQ_A" type="text/javascript"></script>  
  29. <script type="text/javascript">   
  30. function initialize() {   
  31.   if (GBrowserIsCompatible()) {   
  32.     var map = new GMap2(document.getElementById("map_canvas"));   
  33.     map.setCenter(new GLatLng(13.77436,100.53458), 5);   
  34.     map.setUIToDefault();   
  35.   }   
  36. }   
  37. </script>   
  38.   แฟนเพจ :: https://www.facebook.com/pocky.design
  39. </body>  
  40. </html>  
ผิดพลาดประการณ์ใดขออภัย...ติดตามบทความต่อไปได้นะครับจะขอบทความใดก็ แนะนำกันมาได้เลย
    		เพิ่มเพื่อนและติดตาม Webmaster Pocky GunSanguine.
    ป้ายกำกับ: เขียนโดย ที่
    < >
    Copyright © PockyDesign Pocky.design