Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding (Part 1)

Assalamualikum wr. wb, pada kesempatan kali ini saya akan berbagi pengalaman saya dalam menginstal atau memasang API Google Maps di CodeIgniter lengkap dengan Geocoding yang mana ini merupakan tugas Web Framework yang telah saya dapatkan.

Baiklah, sebelumnya saya meu menjelaskan sedikit tentang Memasang API Google Maps di CodeIgniter, Untuk melakukan ini kita membutuhkan API google Maps dan library Geocoder.

Apa itu Geocoding ?

Geocoding merupakan sebuah cara untuk mentranslatekan / mentraverse longitude & latitude yang telah diketahui menjadi sebuah alamat yang utuh. Begitu juga sebaliknya. 

Berikut adalah langkah langkah yang harus dilakukan.Namun, sebelum itu lihat dulu hirarki folder untuk peletakan setiap file dari libarary, controller, model hingga view.

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

1. Mendownload dan Pemasangan Library Google Maps API Ver.3 & Geocoder

Google Maps API Ver. 3 

Merupakann library yang digunakan untuk menampilakn Google map di laman web dan dilengkapi dengan konfigurasi yang ada. seperti mengambil latitude longitude dan alamat lengkap di API Google maps Langkah langkahnya bisa dilihat di bawah ini

• Mendownload library di https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library 

  

  Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

  
  
• Ekstrak hasil download Google Maps API, kemudian letakkan di folder Application/library



Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding (Part 1)

Library Geocoder 

Geocoder disini berfungsi untuk mentranslate latitude / longitude yang sudah didapatkan . Geocoder disini memiliki fungsi geocoding yaitu dapat mereverse longitude / laltitude yang di dapat ke alamat / lokasi yang terkait dan begitu juga sebaliknya.

Cara pemasangan

Membuat file bernama geocoder.php kemudian di letakkan di appliaction-> library, kemudian masukkan sintak berikut kedalam file geocoder. File ini diberi nama geocoder.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

 /**
 * Geocoder class
 * 
 *
 */

 class Geocoder {

  var $CI;
  private $mapquest_key;

  function __construct() {
   if(!isset($this->CI)) {
    $this->CI =& get_instance();
   }
   $this->mapquest_key = $this->CI->config->item('mapquest_app_key');
  }

  function geocode($address) {
   
   if($this->mapquest_key == '') { return FALSE; }
   if($address == '') { return FALSE; }

   $request_url = 'http://www.mapquestapi.com/geocoding/v1/address?key='.$this->mapquest_key.'&inFormat=kvp&location=' . urlencode($address);
   $response = $this->makerequest($request_url);
   if(empty($response->results[0]->locations)) {
    return FALSE;
   } else {
    $location_details = $response->results[0]->locations[0];
    return array(
     'address' => $location_details->street,
     'city' => $location_details->adminArea5,
     'state' => $location_details->adminArea3,
     'zip_code' => $location_details->postalCode,
     'county' => $location_details->adminArea4,
     'country' => $location_details->adminArea1,
     'lat' => $location_details->displayLatLng->lat,
     'lng' => $location_details->displayLatLng->lng
    );
   }
  }

  function reverse_geocode($lat, $lng) {

   if($this->mapquest_key == '') { return FALSE; }
   if($lat == '') { return FALSE; }
   if($lng == '') { return FALSE; }

   $latlng = $lat . ',' . $lng;
   $request_url = 'http://www.mapquestapi.com/geocoding/v1/reverse?key='.$this->mapquest_key.'&location=' . $latlng;
   $response = $this->makerequest($request_url);
   if(empty($response->results[0]->locations)) {
    return FALSE;
   } else {
    $location_details = $response->results[0]->locations[0];
    return array(
     'address' => $location_details->street,
     'city' => $location_details->adminArea5,
     'state' => $location_details->adminArea3,
     'zip_code' => $location_details->postalCode,
     'county' => $location_details->adminArea4,
     'country' => $location_details->adminArea1,
     'lat' => $location_details->displayLatLng->lat,
     'lng' => $location_details->displayLatLng->lng
    );
   }
  }

  function makerequest($url) {
   $session = curl_init($url);
   curl_setopt($session, CURLOPT_FOLLOWLOCATION, TRUE);
   curl_setopt($session, CURLOPT_RETURNTRANSFER, TRUE);
   $response = curl_exec($session);
   curl_close($session);
   return json_decode($response);
  }

 }

?>

Kemudian setelah itu untuk dapat mengaktifka geocoder kita harus memiliki Key API dimana key tersebut bisa di dapatkan gratis di https://developer.mapquest.com .

Setelah mendapatkan keynya, maka masuklah ke folder application-> config-> config.php. Kemudian buatlah variabel konfigurasi yang menampung key yang telah di dapat. Contohnya seperti di bawah ini :

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

$config['mapquest_app_key'] = 'keynya';

2. Membuat File di Controller 

Di controller memiliki 1 file class yang berisi fungsi index untuk menampilkan data, fungsi geocoder untuk mentranslatekan longitude dan latitude yang telah di dapatkan. Berikut adalah script file classcontroller yang telah di beri penjelasan. File ini diberi nama c_gmap.php

<?php
/**
* 
*/
class c_gmap extends CI_Controller
{
 function __construct() //konstraktor untuk meload library, helper dan model
 {
  parent::__construct();
  //untuk meload library 
  $this->load->library('googlemaps');
  $this->load->library('geocoder');
  //untuk meload model
  $this->load->model('m_gmap');
 }

      function index(){
       //merupakan fungsi javascript ketika da lokasi yang
       //di klik maka akan mengambil nilai longitude dan latitude yang di klik
       $diklik = 'window.open("get_lokasi/"+
     event.latLng.lat()+"/"+
     event.latLng.lng(),"_self")';

  //konfigurasi untuk posisi tengah map ketika 
  //di tampilkan
     $config['center'] = '37.4419, -122.1419';
     //konfig pembesaran saat dimuat
  $config['zoom'] = 'auto';
  //mengaktifkan geocaching
  $config['geocodeCaching'] = TRUE;
  //menyimpan variabel javascript di atas
  //kedalam konfigurasi
  $config['onclick'] = $diklik;

  //menginisialisasi konfigurasi
  $this->googlemaps->initialize($config);

  //proses membuat marker
  $marker = array();
  //posisi marker
  $marker['position'] = '37.429, -122.1419';
  //menambahka marker
  $this->googlemaps->add_marker($marker);
  //membuat map
  $data['map'] = $this->googlemaps->create_map();
  //load ke view
  $this->load->view('v_gmap', $data);

    }
    //fungsi untuk mendapatkan lokasi latitude dan longitude dan melakukan proses reverse
    function get_lokasi($lat, $long){ 
  $address_details = $this->geocoder->reverse_geocode($lat, $long);
  //print_r($address_details); // This will show you relevant address details.

  //variable untuk menyimpan hasil reverse
  $alamat = $address_details['address'];
  $kota = $address_details['city'];
  $zip = $address_details['zip_code'];
  $daerah = $address_details['county'];
  $negara = $address_details['country'];

  $ket = "<b>Kota :</b> ".$kota.", <b>ZIP Code : </b>".$zip.", <b>Wilayah : </b>".$daerah.", <b>Negara :</b> ".$negara;

  //fungsi uutk menyimpan lokasi
  $simpanlokasi = array('nama_lokasi' => $alamat ,
        'long' => $long,
        'lat' => $lat ,
        'Keterangan' => $ket );

  $this->m_gmap->simpan_data($simpanlokasi);
  redirect('c_gmap/lihatdata');
    }

    //fungsi untuk melihat data
     function lihatdata(){
      //variable untu button
      $data['kemapnya'] = '<button type="button" class="btn btn-success">'.anchor('c_gmap/index','Kembali ke Laman Awal').'</button>
            </br>';

        //untuk menampilkan semua data di database
        $hasil = $this->m_gmap->tampilan_semua_data()->result();
        $data['datanya'] =  $hasil;
       
       //meload view untuk menampilkan data
       $this->load->view('v_lihatdata', $data);
 
    }


}

Nah, karena ada penyimpanan di database maka harus buat terlebih dahulu databasenya, adapun untuk database saya menggunakan cdcol yang biasanya telah tersedia di mysql xampp.

-- phpMyAdmin SQL Dump
-- version 4.0.9
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 15 Apr 2016 pada 06.20
-- Versi Server: 5.5.34
-- Versi PHP: 5.4.22

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `cdcol`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `tugas6_individumap`
--

CREATE TABLE IF NOT EXISTS `tugas6_individumap` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lokasi` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `long` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `lat` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `keterangan` varchar(1000) COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=17 ;

--
-- Dumping data untuk tabel `tugas6_individumap`
--

INSERT INTO `tugas6_individumap` (`id`, `nama_lokasi`, `long`, `lat`, `keterangan`) VALUES
(6, 'Buckeye Ln', '-122.16311931610107', '37.425593281117564', '<b>Kota :</b> Stanford, <b>ZIP Code : </b>94305, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(7, '', '-122.02609062194824', '37.44890100809654', '<b>Kota :</b> Sunnyvale, <b>ZIP Code : </b>94089, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(8, '12141 Tesla Rd', '-121.65229797363281', '37.638975567983245', '<b>Kota :</b> Livermore, <b>ZIP Code : </b>94550-9159, <b>Wilayah : </b>Alameda, <b>Negara :</b> US'),
(9, '159 S California Ave', '-122.14179508388042', '37.42899277673132', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-1926, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(10, '159 S California Ave', '-122.14197412133217', '37.42898212692348', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-1926, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(11, '686 Nelson Rd', '-122.15964317321777', '37.43015998649174', '<b>Kota :</b> Stanford, <b>ZIP Code : </b>94305-6107, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(12, '3414 Middlefield Rd', '-122.11765050888062', '37.42601929153404', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-3629, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(14, 'Pasir Putih 3', '106.839981561061', '-6.093893377041198', '<b>Kota :</b> Jakarta, <b>ZIP Code : </b>14410, <b>Wilayah : </b>, <b>Negara :</b> ID'),
(15, 'Jalan Harapan Indah Raya', '106.9819450378418', '-6.184246161280591', '<b>Kota :</b> Medansatria, <b>ZIP Code : </b>17125, <b>Wilayah : </b>, <b>Negara :</b> ID'),
(16, '3290 Middlefield Rd', '-122.12327241897583', '37.42682018455472', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-3046, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

Selanjutnya artikel ini akan di teruskan ke  :

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding part 2

Share this

Author : zenhuzaini

Related Posts