Menampilkan google map dengan google map API menggunakan Codeigniter

Hello sahabat programmer, gimana kabarnya hehe? Semoga sehat selalu ya.

Pada kesempatan kali ini saya ingin sharing sesuatu yang cukup menarik nich, yaitu bagaimana menampilkan google map dengan google map API menggunakan codeigniter.

Google map sangat bermanfaat untuk menunjukkan suatu lokasi atau arah.
Jadi sangat bermanfaat bagi teman-teman yang ingin membuat aplikasi berbasis Geographic Information System (GIS).

Pada tutorial kali ini saya akan sharing tentang basic pengunaan dari google map API. Jadi, apa itu google map API?

Google Map API merupakan API (Application Programming Interface) yang memungkinkan programmer menggunakan fitur google map pada aplikasi yang akan dibuat tidak tergantung bahasa pemrogramman yang digunakan. Keren bukan?

OK, langsug saja!. Sebelum kita masuk ke coding, pertama-tama silahkan download Codeigniter dan Google Map API.

Setelah itu, dapatkan API key untuk google map API dengan mengirimkan request pada Google map API.

Bagaimana mendapatkan API key google map?. Cari tahu sendiri ya..! hehe..

Jika teman-teman masih bingung bagaimana mendapatkan API key dari google map jangan khawatir karena penulis telah mendaftarkan API key secara public dan telah penulis sertakan pada source code pada akhir tutorial ini yang bisa anda download.

Ok, tanpa basa-basi lagi mari kita lanjut ke proses coding.

1. Extract Codeigniter ke directory web server Anda.

Jika Anda menggunakan wampserver berarti anda mengextracnya kedalam folder www. Jika anda menggunakan XAMPP berarti anda harus mengextractnya kedalam folder htdocs.

Setelah di extract rename (ganti nama) menjadi ci_map.

2. Copykan library google map API kedalam application/libraries/. Sehingga terlihat struktur folder application project kita menjadi seperti berikut:


Application


      Cache


      Config


      Controllers


      Core


      Helpers


      Hooks


      Language


      Libraries


            Googlemaps.php


            Jsmin.php


      Logs


      Models


      Thirh_party


      Views

Semoga sampai disini dapat dipahami dengan baik.

3. Konfigurasi beberapa file berikut:

Buka file application/config/autoload.php dan lakukan konfigurasi sebagai berikut:

$autoload['helper'] = array('url');

Buka file application/config/config.php dan lakukan konfigurasi sebagai berikut:

$config['base_url'] = 'http://localhost/ci_map';

4. Buat controller dengan nama Map.php dengan kode sebagai berikut:

<?php
class Map extends CI_Controller{
        function __construct(){
                parent::__construct();

        }
        function index(){
                $this->load->library('googlemaps');
                $config=array();
                $config['center']="37.4419, -122.1419";
                $config['zoom']=17;
                $config['map_height']="400px";
                $this->googlemaps->initialize($config);
                $marker=array();
                $marker['position']="37.4419, -122.1419";
                $this->googlemaps->add_marker($marker);
                $data['map']=$this->googlemaps->create_map();
                $this->load->view('v_map',$data);
        }
}

5. Buat view dengan nama v_map.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Welcome to Google Map</title>
        <?php echo $map['js'];?>
</head>
<body>
<?php echo $map['html'];?>
</body>
</html>

Sekarang silahkan jalankan projectnya dengan mengunjungi URL berikut dan pastikan komputer anda terhubung dengan internet:

http://localhost/ci_map/index.php/map

jika tidak ada error berarti berjalan dengan baik. Jika google mapnya tidak tampil, pastikan koneksi internet anda tidak dalam keadaan trouble.

Ok, sekian tutorial kali ini. Jika anda merasa tutorial ini bermanfaat untuk anda, silahkan share siapa tau tutorial ini bermaanfaat untuk teman Anda!

Download Source