DeveloperFeaturedGoogle DevelopersHTML5Programming Language

รวมเทคนิคเขียนโปรแกรมร่วมกับ Google Static Maps API V2

รวมเทคนิคการพัฒนา Website ร่วมกับ Google Maps ด้วยวิธีการเรียกใช้งาน API อย่าง Static Maps API V2 ให้แสดงผลรูปภาพแผนที่ของคุณอย่างสมบูรณ์แบบ และสวยงามที่สุดวิธีการใช้งาน Static Maps API V2 นั้นจะเป็นการแสดงผล Google Maps ในรูปแบบของ รูปภาพที่ขยับไม่ได้ แต่มีความสวยงามตามแบบของ Google Maps เลยครับ วิธีการเรียกใช้งานเบื้องต้นนั้นขอเริ่มก่อนเลยแล้วกันคือการใช้คำสั่ง <img src=”” /> โดย Path รูปภาพนั้นคือ URL ของ Static Maps API V2 ครับ

หากลองเรียก URL ตามนี้

http://maps.googleapis.com/maps/api/staticmap?center=Bangkok,Thailand&zoom=14&size=600x400&sensor=false

รูปแบบการแสดงผลของกราฟิกผ่าน URL นี้จะเป็นดังนี้ครับ

ภาพของ Bangkok,Thailand
ภาพของ Bangkok,Thailand

โดย zoom คือการ ขยายแผนที่ของเราครับ หากว่าผมเปลี่ยน parameter ของ zoom จาก 12 เป็น 20 จะได้ผลลัพธ์ตามนี้ครับ

ใส่ http://maps.googleapis.com/maps/api/staticmap?center=Bangkok,Thailand&zoom=20&size=600×400&sensor=false

ขนาดของภาพ เช่นกันครับ ใน parameter ชื่อ size นั้น ภาพแรกผมเรียกที่ 600×400 คือ ขนาด กว้าง x สูง (Width x Height) ของรูปภาพ ผมลองเปลี่ยนค่าเป็น 200×200 และมีการ Zoom ที่ 14 ดู

เรียกโดย: http://maps.googleapis.com/maps/api/staticmap?center=Bangkok,Thailand&zoom=14&size=200×200&sensor=false

สำหรับ พิกัด บน parameter ชื่อ center นั้นผมสามารถใส่ Lat, Lon ที่หาจาก Google Maps ได้ อย่างเช่นตำแหน่งบ้านของผม มี  Lat และ Lon ที่ center=13.8169671,100.6159643

ลองใส่ค่าดูเล็กน้อย

ตำแหน่ง center=13.8169671,100.6159643

สามารถเปลี่ยนค่าจาก Maptype ให้เป็น Hybrid ได้โดยการต่อ &maptype=hybrid ดังนี้

เพิ่ม &maptype=hybrid

สำหรับค่าที่เราจะเล่นกับ Maptype ได้นั้นจะมีดังต่อไปนี้ครับ

roadmap
terrain
satellite
hybrid

ใส่ icon ปักหมุดลงใน Google Maps นั้นสามารถใช้ Parameter ตามนี้ครับ

markers=size:large%7Ccolor:red|Bangkok,Thailand|Surin,Thailand|Kalasin,Thailand

ขนาดของ Marker และ คั่นพิกัดแต่ละที่ด้วย | เท่านั้นเอง วิธีเรียกใช้

http://maps.googleapis.com/maps/api/staticmap?size=600x512&maptype=roadmap&markers=size:large%7Ccolor:red|Bangkok,Thailand|Surin,Thailand|Kalasin,Thailand&sensor=false

แสดงผลจะได้ดังนี้ครับ

หากจะลองทำเส้นทางพิกัด ตำแหน่งการเดินทางเราต้องมี Lat, Lon ต้นทาง และปลายทางครับ เช่นผมมีพิกัดที่ได้จาก GPRs ตามนี้

  • 13.8852911,100.7715043
  • 13.8616679,100.6815109
  • 13.8641054,100.6809744

ผมจะใช้เส้นสีแดง ลาเป็นเส้นทางบน Google Maps ด้วย URLs นี้ครับ

http://maps.googleapis.com/maps/api/staticmap?size=600x512&maptype=roadmap&path=color:red|weight:15|13.8852911,100.7715043|13.8616679,100.6815109|13.8641054,100.6809744&sensor=false

path=color:red สีเส้นเป็นสีแดง ใส่ code สี HTML ได้ ตามด้วย weight คือขนาดความหนาของเส้น

ตัวอย่างง่ายๆ เบื้องต้นในตอนนี้ คงพอแค่นี้ครับ หวังว่าคงจะใช้ประโยชน์อะไรได้ จาก Google Static Maps API V2 กันนะครับ

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน