Google Map (Reusable) View

สวัสดีวันแห่งความรักครับ วันนี้มีทริคง่ายๆ ในการใช้ smartform แสดงแผนที่แบบที่ไม่ต้องฝั่งโค๊ดมาฝากครับ

googlemapview-01

ก่อนอื่นต้องเล่่าก่อนว่า K2 Smartform มี control ตัวนึงที่ชื่อว่า Location Service ซึ่งจะช่วยให้เราสามารถ หาพิกัด Lat / Long  คราวนี้พอได้มาแล้ว หลายๆ ครั้งเราอยากจะแสดงให้เห็นเป็นภาพบน map ซึ่ง หลักเราก็มักจะไปใช้ map ของ google ซึ่งมี api มาให้เราใช้งานได้สบายๆ แต่คราวนี้ ถ้าเราไม่อยากเชียนโค๊ดหละทำแบบไหนได้ง่ายสุด โดยที่

  • ถ้าเรียก view นี้ ต้องแสดงที่อยู่ปัจจุบันของเราได้
  • ต้องส่งค่า Lat / Long ไปให้แล้วมีการเปลี่ยนแปลง

พอได้ ฟีเจอร์ที่อยากได้แล้วเราก็มาดูเรื่อง องค์ประกอบ ว่าต้องใช้อะไรบ้าง

  • Google Map Key โดยหาได้จากที่นี่เลย https://developers.google.com/maps/ ใช้ฟรีได้ตามเงื่อนไข google นาจา
  • Certificate ที่ใช้ทำ SSL (https นั่นแหละจ้า)  ของเสียเงินที่ไม่ใช่ Self-Signed Certificate นาจา
  • Content URL control
  • K2 Designer (อันนี้แน่นอนนะ)

ต่อมา เราก็ต้องรู้ว่า การที่จะเรียกแผนที่ Google แล้วให้แสดง Pin แบบภาพข้างบนต้องทำยังไง ซึ่งง่ายมาก URL จะมีโครงสร้างแบบนี้ (ในอนาคตอาจมีการเปลี่ยนแปลงก็ตามดูเอกสารของ Google ได้เลย

https://www.google.com/maps/embed/v1/place?key=GoogleMapAPIKey&q=Lat,Long

พอรู้เช่นนี้แล้ว ง่ายแล้วใช่ปะหล่า เราก็จัดการ เอา control มาวางแบบนี้googlemapview-02

ซึ่งประกอบไปด้วย

คราวนี้เราก็ไปสร้าง Expression ที่ประกอบร่าง URL ขึ้นมา ตามโครงสร้างด้านบน (ด้วยฟังก์ชั่น Concatenate )

googlemapview-03

เพียงเท่านี้ เราก็จะได้ view ที่เก็บไว้ใช้ในการแสดงแผนที่สำหรับทุกๆ แบบฟอร์มที่ต้องการแล้ว

ง่่ายใช่ปะ 🙂

ไปละ

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s