15 October 2013

Google Map API : การใช้ Google Map อย่างง่าย

[ย้ายบทความจาก Gushared.com]
   เมื่อครั้งที่แล้วเราได้ทำการขอ API Key สำหรับ Google Map เป็นที่เรียบร้อย ครั้งนี้เราจะลองนำ Google Map มาใส่ในเว็บเรากันครับ
ขั้นที่ 1 : เพิ่มแท็ก Script เพื่อเรียกใช้ Google Maps API 
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
   ในส่วน Key เป็น API Key ที่เราขอไปเมื่อบทความที่แล้ว และส่วน Sensor เป็นส่วนที่จำเป็นต้องใส่ ส่วนใหญ่จะใช้เกี่ยวกับพวก GPS ถ้าหากเป็นธรรมดาแบบไม่อะไรมากก็ใส่เป็น false ไปเลยครับ
ขั้นที่ 2 : ทำการ Set Property ของแผนที่ที่เราต้องการโดยรายละเอียดหลักๆมีดังนี้

  • center : ตำแหน่งที่เราสนใจใส่เป็นละติจูดและลองจิจูด
  • zoom : ขนาดของแผนที่เริ่มต้นที่จะให้แสดง
  • mapTypeId : ลักษณะของแผนที่ที่ต้องการแสดง
    • - ROADMAP : แผนที่ถนน
    • - SATELLITEP : แผนที่ดาวเทียม
    • - HYBRID : ROADMAP+SATELLITEP
    • - TERRAIN : แผนที่ภูมิประเทศ
ขั้นที่ 3 : สร้าง Map Object 
var map=new google.maps.Map(document.getElementById("googleMap"),mapSet);
โดยที่ googleMap จะเป็น Element div ที่จะให้แสดงแผนที่ ขั้นที่ 4 : ส่วนที่ใช้โหลดแผนที่ 
google.maps.event.addDomListener(window, 'load', loadmap);
Code ทั้งหมด 



Simple show google map.

ตัวอย่างแผนที่แบบ ROADMAP

ตัวอย่างแผนที่แบบ SATELLITE

ตัวอย่างแผนที่แบบ HYBRID

ตัวอย่างแผนที่แบบ TERRAIN
ป้ายกำกับ: ,