ปรับแต่ง Marker icon Google Maps ให้เข้ากับเว็บของเรา

น่าสนใจดีครับ เกี่ยวกับการปรับแต่ง Marker icon Google Maps ให้เข้ากับเว็บของเรา

นำมาจาก http://www.tanomsak.com

คิดว่าหลายๆคนคงจะรู้จัก Google Static Maps API กันบ้างนะครับ ตัว Static map จะเป็นรูปแผนที่ Google Maps แบบที่เป็นรูปภาพนิ่ง คือไม่สามารถลากเพื่อเปลี่ยนที่ และไม่สามารถว่าซูมเข้าออกได้ ประโยชน์ของมันก็คือโหลดเร็วเพราะว่าเป็นรูปภาพรูปเดียว เหมาะสำหรับการแสดงตำแหน่งแค่คร่าวๆ เพราะบางครั้งแผนที่ไม่ใช้ส่วนสำคัญในหน้าเวป จะได้ไม่ต้องเสียเวลาโหลดตัว API นานๆครับ

Google Static Maps มีการสนับสนุนการแสดงหมุดด้วยครับ แต่ว่าหมุดมันจะเป็นชุดมาตราฐานซึ่งอาจจะไม่เข้ากับเวปอันแสนสวย(??) ของเราเท่าไหร่ จะใช้วิธีการเปลี่ยนรูปหมุดใน Google Maps ที่แนะนำไปแล้วก็ไม่ได้ เนื่องจากแผนที่เป็นรูปภาพไม่ได้สร้างจาก Javascript API

และนี่เป็นหัวข้อของผมในวันนี้ครับ คือการ การทำ Custom marker icon สำหรับ Google Static Maps ผมพบวิธีนี้จากเวป Yelp.com ตอนที่เค้าเปลี่ยนมาใช้ static map ครับ

1. การใช้งาน Google Static Maps

ทำได้ง่ายมากๆครับ คือใช้ html img tag สำหรับแสดงรูปภาพตรงๆเลย แ่ต่ว่า source ของรูปให้ระบุเป็น maps.google.com พร้อมด้วย parameter ตัวอย่างเป็นแบบนี้ครับ

http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&zoom=14&size=300x300&maptype=roadmap&markers=13.6225480441,100.5334854126&key=YOUR_API_KEY

จาก code ข้างบนเป็นการขอรูปแผนที่จาก Google Static Maps โดยมี parameter ต่อไปนี้

• ให้มีจุดกึ่งกลางที่(Center) lattitude = 13.6225480441 และ longtitude = 100.5334854126
• ระดับการซูม (Zoomlevel) = 14
• ขนาดรูป (กว้างxยาว) = 300×200 pixel
• ประเภทแผนที่เป็นแบบถนน
• ให้มีหมุดวางอยู่ตรงตำแหน่ง lattitude = 13.6225480441 และ longtitude = 100.5334854126
• และสุดท้ายต้องใส่ Maps API Key ด้วยครับ (ดูวิธีการขอได้จาก ตอนก่อนหน้า นะครับ)

ใครสนใจความหมาย และ parameter ทั้งหมดที่มีดูได้จาก Google Static Maps API เราจะได้รูปแบบนี้ออกมาครับ

2. การจะเปลี่ยนหมุดจากแบบมาตราฐานเป็นรูปภาพที่เราต้องการ

ทำได้โดยการใช้เทคนิคเกี่ยวกับ CSS นิดหน่อยครับ หลักการก็คือ การแสดงรูปภาพสองรูปซ้อนกัน โดยเอารูปหมุดที่ต้องการวางทับบน static map โดยแสดง static map ให้ตรงกลางเป็นตัวแหน่งของสถานที่ ที่เราจะแสดงหมุด จากนั้นก็ให้ CSS กำหนดตำแหน่งรูปภาพหมุดให้อยู่กึ่งกลางครับ

วิธีการค่า left และ top เพื่อวางหมุดตรงกึ่งกลางแผนที่

html ที่ใช้เป็นแบบนี้ครับ อันนี้ไม่มีอะไรพิเศษ (เอา parameter เกี่ยวกับ markers ออกด้วย เวลาเรียก static map จะได้ไม่มีรูปหมุดซ้ำกับที่เรากำลังจะแสดง)

<div id="map_div">
<img style="border: 1px solid #c0c0c0; display: inline; width: 300px; height: 320px;" src="http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&amp;zoom=14&amp;size=300x300&amp;maptype=roadmap&amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g" alt="" width="300" height="320" />
<img class="marker" src="pin_blue.png"/>
</div>

ส่วน CSS เป็นแบบนี้ครับ

#map_div {
height:320px;
position:relative;
}
#map_div img.marker {
position:absolute;
height:37px;
width:25px;
left:142px;
top:125px;
}

property position ของ div ที่ใส่รูปทั้งสองต้องเป็น relative และ position ของรูปหมุดต้องเป็น absolute นะครับ

ใน IE6 จะมีปัญหากับ transparent png ทำให้รูปหมุดแสดงพื้นหลังเป็นแถบๆ เลือกวีธีแก้ในตามชอบใจเลยครับ

Tags: เรียน graphic design, เรียนเว็บ