Library Google Map ทีใช้กับ CodeIgniter
หากผู้ถึง library javascript ที่นิยมเกี่ยวกับการแสดงแผนที่แล้วนั้นคงนึกถึง google map แต่ทว่ามันต้องใช้ javascript เพื่อเรียกใช้งานแสดงผล แต่ตำแหน่งสถานที่ต่างนั้นกับเก็บอยู่ใน Datatabase ซึ่งจะใช้ภาษาพวก server side ในการดึงข้อมูล ทำให้ต้องมีการแปลงข้อมูลไปมาระหว่าง 2 ภาษาที่เราใช้งานอยู่ ซึ่งวันนี้ผมจะมาบอกวิธีใช้งาน CodeIgniter กับ Libarary ตัวนึกที่มีคนพัฒนาไว้ให้แล้วในการเชื่อมกับ Libary Google Map เพื่อแสดงตำแหน่งสถานที่ต่างๆได้ง่ายขึ้นนั้นเองครับ
ซึ่งเจ้า API ตัวนี้นั้นถูกพัฒนาโดย BIOSTALL ขั้นตอนแรกเราก็เข้าไปดาวโหลดได้ที่ biostall.com หลังจากที่ดาวโหลดเสร็จแล้วให้ทำการแตกไฟล์ จะได้ดังรูป
จากนั้นก็เข้าไปที่ Folder application\libraries แล้วทำการ copy file Googlemaps.php กับ Jsmin.php
แล้วเอาไปไว้ที่ folder application\libraries ของ CodeIginter ที่เราต้องการพัฒนา หลังจากนั้นผมจะทำการสร้าง Controller ที่มีชื่อว่า MapPlace โดยตั้งชื่อไฟล์ว่า mapplace.php
ต่อจากนั้นผมก็สร้างไฟล์ view ที่มีชื่อว่า mapdisplay.php ใน folder ของ view คือ application\views
ที่นี้เรามาดูโค้ดในไฟล์ controller กัน
[sourcecode language=”php”]
load->library(‘googlemaps’);
$config[‘center’] = ‘13.747408,100.540244’;
$config[‘zoom’] = 16;
$this->googlemaps->initialize($config);
$marker = array();
$marker[‘position’] = ‘13.747408,100.540244’;
$this->googlemaps->add_marker($marker);
$polygon = array();
$polygon[‘points’] = array(‘13.748263, 100.538356’,
‘13.747835, 100.540662’,
‘13.745126, 100.540115’,
‘13.745417, 100.538034’);
$polygon[‘strokeColor’] = ‘#000099’;
$polygon[‘fillColor’] = ‘#000099’;
$this->googlemaps->add_polygon($polygon);
$data[‘map’] = $this->googlemaps->create_map();
$this->load->view(‘mapdisplay’,$data);
}
}
[/sourcecode]
จากโค้ดจะเห็นว่าเราสามารถ load libary google map มาใช้ได้เลย จากนั้นก็เก็บการตั้งค่า map ในตัวแปร $config ไม่มาจะเป็นจุดกึ่งกลางของแผนที่ ระดับการ zoom ของ แผนที่ จากนั้นก็ทำการกำหนดการตั้งค่าโดยเรียกใช้ method initialize โดยมีโค้ดตัวอย่างนั้นนี้ $this->googlemaps->initialize($config);
จากนั้นก็ทำการกำหนดจุดบนแผนที่โดยในตัวอย่างโค้ดนั้นได้กำหนดจุดเก็บในตัวแปร $marker โดยกำหนดใน element ‘position’ โดยมีโค้ดนั้นนี้ $marker[‘position’] = ‘13.747408,100.540244’; ซึ่งจะอยู่ในรูปแบบ latitude,longitude นอกจากกำหนดจุดนั้น API นี้ยังสามารถแสดง polygon ได้อีกด้วย โดยเรากำหนด จุดต่างๆของ polygon ได้โดยเก็บเป็บ array ดังนี้
[sourcecode language=”php”]
$polygon = array();
$polygon[‘points’] = array(‘13.748263, 100.538356’,
‘13.747835, 100.540662’,
‘13.745126, 100.540115’,
‘13.745417, 100.538034’);
[/sourcecode]
หลังจากกำหนดจุดและการตั้งค่าแผนที่เสร็จแล้วให้ทำการสร้าง map โดยเรียกใช้ method $this->googlemaps->create_map(); เราจะได้ค่ามา 2 ค่าซึ่งผมเก็บในตัวแปร $data element ที่ชื่อว่า map จากนั้นก็ส่งไปยังหน้า view ที่สร้างไว้คือ mapdisplay.php
[sourcecode language=”php”]
$data[‘map’] = $this->googlemaps->create_map();
$this->load->view(‘mapdisplay’,$data);
[/sourcecode]
จากนั้นใน view จะต้องทำการแสดง 2 ค่าคือ html, js ซึ่งในโค้ดผมเก็บใน element map ในไฟล์ view จะทำการ
<?php echo $map[‘js’]; ?>
ในระหว่าง <head> </head> และ <?php echo $map[‘html’]; ?> ในส่วนของ tag body ที่เราต้องการซึ่งสามารถ download source ไปดูกันได้ครับ
เมื่อลองรันก็จะได้แบบนี้ครับ
จะเห็นว่า API ตัวนี้ช่วยประหยัดเวลาในการแปลงข้อมูลที่อยู่ใน database หรือ php ส่งไปยัง javascript ของ Google ได้อย่างมากแทนที่เราจะมาทำเองก็สามารถโหลดมาใช้ได้เลย นอกจากนี้ยังมีลูกเล่นอื่นๆอีกมากสามารถดู Document กันได้เลยครับ