| สมัยนี้ เทคโนโลยีกว้างไกล เว็บไซต์ของเราก็ต้องกว้างตามเช่นกัน ทำเว็บทั้งที อยากจะให้คนเค้ารู้ว่าเราอยู่ที่ไหน แต่แผนที่เฉิ่มๆ แบบเดิม ก็คงจะดูไม่ดีอีกต่อไป ยิ่งถ้าหากคุณตกศิลปะด้วยแล้ว ผมว่า คงจะไม่มีใครมาตามแผนที่ได้ถูกอย่างง่ายแหงๆ เอาล่ะ ดังนั้น เราเปลี่ยนมาใช้แผนที่ของ Google ละกัน ด้วยคอมโพเน้นท์ Phoca Map |
หลายครั้งที่ผมพยายามหาคอมโพเน้นท์หรือปลั๊กอินที่แสดงผลจาก Google Map ให้สะดวกที่สุด และไม่เหมือนใคร แต่ผมก็ต้องพบกับอุปสรรคดังนี้
- ต้องระบุ Latitude และ Longitude เอาเอง โอ้ววว แล้วละติจูดเนี่ย ผมจะรู้ไหมครับว่ามันพิกัดที่เท่าไหร่
- ต้องกำหนด Scope ขอบเขตแผนที่ด้วย นอกจากความกว้างยาว ที่จะทำให้มองเห็นขอบเขตของแผนที่ Google Map ได้ เอ้อ.....
- นี่ยังไม่รวมถึงว่า ใส่รายละเอียดได้หรือไม่อีกด้วยนะเนี่ย เห้อ...
บางคนก็อาจจะใช้วิธีการไปที่เว็บไซต์ของ Google Map แล้วนำ Iframe มาใส่ ก็ใช้งานได้เช่นกัน แต่ ถ้าใครคิดว่าจะใช้วิธีนี้ ก็เชิญปิดหน้านี้ไปได้เลย เชอะ !!
คอมโพเน้นท์นี้ จะไปทำการดึงการแสดงผลจากแผนที่ Google Map มาอีกที แต่สิ่งที่ทำให้ต่างจากการแสดงผลแบบเดิมๆ นั้นคือ เราสามารถปรับเปลี่ยนตัวเลืกกการแสดงผลของแผนที่ได้แบบไม่เหมือนคนอื่นครับ
โม้มานาน ติดตั้งเลยดีกว่าครับ ซึ่งเราจะต้องทำการติดตั้ง Phoca Map 2 ส่วนด้วยกัน คือ Component และ Plugin เริ่มจากติดตั้ง Component ก่อน
ให้กดปุ่ม Install ครับ
จากนั้น ก็จะพบกับหน้านี้
จะเห็นว่า ไม่มีเมนูเยอะให้ปวดหัวเลยครับ หลักๆ เราจะใช้กันอยู่แค่ 2 เมนูหลัก คือ Maps และ Markers โดยเริ่มต้น เราจะต้องทำการสร้าง Maps ก่อนครับ เพื่อกำหนดพื้นที่ ของแผนที่ หรือเรียกว่าเป็น Scope ของแผนที่ ว่าสามารถมองเห็นได้จากระยะใด ถึงระยะใด ว่าไปก็ลองคลิกที่ไอคอนรูปโลก Maps เลยครับ
จะเข้าสู่หน้าการตั้งค่า Maps ให้เราตั้งชื่อแผนที่ของเราในช่อง Title ครับ แล้วกดปุ่ม Coordinates ด้านขวา จะปรากฏป๊อบแบบ Lightbox ขึ้นมาครับ
เมื่อป๊อบอัพขึ้นมาแล้ว คุณจะเห็น Marker สีแดง ซึ่งสามารถใช้เม้าส์จับเลื่อนไปมาได้ หรือ จะคลิกตรงพื้นที่ว่างของแผนที่ 1 ครั้ง ก็ได้ Marker จะเลื่อนตามมาให้เองครับ , ซึ่ง Marker ที่คุณกำลังใช้งานในส่วนของ Maps อยู่นี้ จะไม่ใช่ Marker ที่จะปรากฏอยู่บนแผนที่จริง เพียงแต่เป็นการกำหนดจุดศูนย์กลางของแผนที่ ที่เมื่อสร้างเสร็จแล้วเราจะสามารถมองเห็นขอบเขตของแผนที่ได้ครับ สังเกตว่า เมื่อเราชี้ไปที่จุดใด ก็จะมีค่า Latitude และ Longtitude ไปพร้อมกันด้วย ทำให้ไม่ต้องไปจำค่านี้มาจากไหนเลย , และค่า Zoom ก็หมายถึง ระยะมุมมองความใกล้ ไกล ของแผนที่ครับ เมื่อเราเปลี่ยนระยะ ค่า Zoom ในช่องด้านซ้าย ก็จะเปลี่ยนตามไปด้วย , เมื่อเสร็จแล้ว กดปุ่มกากบาทด้านบนขวาครับ
แล้ว Save ออกมา คุณจะได้รายการแผนที่ 1 รายการ
ซึ่งในตารางนั้น จะเห็นว่า มีคอลัมน์ Plugin Code ซึ่งอย่างที่เคยใช้กันมา คุณสามารถนำข้อความในวงเล็บปีกกานั้น ไปใส่ไว้ใน Editor หรือบทความใดๆ ก็ได้ ซึ่งจะทำให้ข้อความตั้งแต่ปีกกาเปิด ถึง ปีกกาปิด นั้นถูกตีความเป็นการแสดงผลแผนที่ไปแทน แต่ทั้งนี้คุณจะต้องทำการเปิดใช้งาน Plugin เสียก่อน ไม่เช่นนั้น มันก็จะแสดงผลเป็นข้อความปีกกาธรรมดา
ต่อไป ให้มาในส่วนของเมนู Markers ครับ แล้ว New ขึ้นมาใหม่ ซึ่งเมนูนี้ จะเป็นการสร้างจุด Marker จริงๆ ให้กับสถานที่นั้น โดยจะทำเครื่องหมายไว้บนแผนที่ ว่าอยู่ตำแหน่งใด โดยกดปุ่ม Coordinates เหมือนกับการสร้าง Map เลยครับ จะได้แบบนี้
ทีนี้ คุณก็จะเห็นตัว Marker สีแดงๆ เหมือนกับตอนที่คุณ New Map ขึ้นมา แต่ตรงนี้ที่ผมบอกไปแล้วว่า มันคือการสร้างจุด Marker ลงไปจริงๆ ไม่ใช่การกำหนด Scope ของแผนที่ ซึ่งเมื่อมีคนมาเปิดดูแผนที่ เค้าก็จะเห็นสัญลักษณ์ที่คุณได้ทำไว้ในขั้นตอนนี้แหล่ะครับ ตัวอย่างนี้ผมลองชี้ไปที่อนุเสาวรีย์ชัยสมรภูมิ
หากต้องการจะเปลี่ยนมุมมอง ก็มีเมนุด้านบนให้เลือกครับ มองแบบมุมมองของดาวเทียมก็ได้
แล้วก็ใส่รายละเอียดไปครับ พร้อมทั้งเลือก Map ในช่อง Map ด้วย ซึ่งเป็นการบอกว่า จุดที่คุณ Mark ไว้นั้น ให้ใช้กับแผนที่ใด
เลื่อนลงมาด้านล่างครับ จะพบกับตัวเลือก Marker ซึ่งปกติแล้ว หากคุณทำแผนที่ Google Map ขึ้นมา คุณจะได้แค่ Marker สีแดงๆ ธรรมดา แต่ตรงนี้คุณสามารถเลือกตัว Marker แบบอื่นได้ครับ ไม่ซ้ำใคร
เมื่อกำหนดส่วนต่างๆ เรียบร้อยแล้ว ก็ Save ออกมาครับ ถึงขั้นตอนที่เราจะทำการให้แผนที่แสดงผลกันแล้ว ซึ่งก่อนหน้านั้นเราได้ทำการติดตั้ง Component และ Plugin ลงไป ยังจำกันได้ไหม ดังนั้น เราต้องไปเปิด Plugin ใช้งานก่อนครับ
ต่อไป ก็นำข้อความในปีกกาที่เราได้ผ่านมาแล้ว ไปใส่ไว้ในบทความใดก็ได้ที่ต้องการให้แทรกแผนที่อยู่ด้วย
โดยผมจะใส่ไว้ 2 แบบคือ แบบที่แสดงแผนที่เลย และแบบลิ้งค์ ซึ่งต้องคลิกลิ้งค์ก่อน จึงจะมี Popup แสดงแผนที่ออกมา แล้วไปดูผลกัน
ได้แล้วครับ อันนี้ผมซูมไกลไปหน่อย ขอบก็ไม่สวย ว้าาาา งั้น ผมไปเปลี่ยนตัวเลือกใหม่ละกัน โดยเข้าไปแก้ไข Map อีกที
ผมลองเปลี่ยนระยะ zoom ครับ โดยให้ใกล้เข้าไปอีกนิด ชิดเข้าไปอีกหน่อย พร้อมทั้งความกว้าง และยาว ของแผนที่ด้วยครับ แล้วก็เลื่อนมาด้านล่าง ปรับการตั้งค่าเพิ่มเติม
ตรงนี้ ผมเปลี่ยน Border ครับ โดยให้แสดงผลแผนที่แบบ Hybridge ซึ่งก็จะเป็นการแสดงผลแผนที่เหมือนมุมมองดาวเทียมครับ แต่จะมีเส้นทางเดินรถให้ดูด้วย
หรือนอกจากนั้น ยังสามารถปรับตำแหน่งของตัวเลือกต่างๆได้ด้วย เช่น
Map Type Control : รูปแบบการเลือกการแสดงแผนที่ โดยจะมีให้เลือกแบบเป็น Dropdown หรือ เป็น Button เรียงกันธรรมดา หรือ อื่นๆ ก็ลองเลือกดู
Map Type Control Position : ให้รูปแบบการเลือกที่ว่า วางไว้ตำแหน่งใด
อะ ลองแค่นี้ครับ Save แล้วไปดูผลกัน
หรือยังสามารถปรับเปลี่ยนตัวควบคุมการ zoom หรือทิศทางอีกก็ได้
ซึ่งก็จะมีผลกับตัวควบคุมอันนี้
ก็แบบนี้แหล่ะครับ ถ้าอยากจะปรับการแสดงผลของแผนที่ ก็ให้ไปที่ Map หรือถ้าอยากจะเปลี่ยนไอคอนชี้ตำแหน่ง ก็ให้ไปที่ Markers แค่นี้เองครับ ของแบบนี้ต้องลองครับ
ตัวอย่างแผนที่ เมื่อคลิกแล้วก็แสดงรายละเอียดที่พิมพ์ไว้ได้ด้วย น่าใช้ไหมล่ะ
ข้อมูลจาก : http://www.pcnott.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น