รวมเทคนิคการพัฒนา 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 นี้จะเป็นดังนี้ครับ
โดย zoom คือการ ขยายแผนที่ของเราครับ หากว่าผมเปลี่ยน parameter ของ zoom จาก 12 เป็น 20 จะได้ผลลัพธ์ตามนี้ครับ
ขนาดของภาพ เช่นกันครับ ใน parameter ชื่อ size นั้น ภาพแรกผมเรียกที่ 600×400 คือ ขนาด กว้าง x สูง (Width x Height) ของรูปภาพ ผมลองเปลี่ยนค่าเป็น 200×200 และมีการ Zoom ที่ 14 ดู
สำหรับ พิกัด บน parameter ชื่อ center นั้นผมสามารถใส่ Lat, Lon ที่หาจาก Google Maps ได้ อย่างเช่นตำแหน่งบ้านของผม มี Lat และ Lon ที่ center=13.8169671,100.6159643
ลองใส่ค่าดูเล็กน้อย
สามารถเปลี่ยนค่าจาก 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 กันนะครับ
