Menampilkan google map dengan google map API menggunakan Codeigniter

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

Share:



Komentar (2)

Ginanjar Natasasmita, 14 April 2018 08:30 - Reply

gan mau tanya, klo mau masukin api key nya di mana ya?

Cinta Dewi Amelia, 14 May 2018 09:44 - Reply

Kalau mau upload location gimana ya?

Leave a Comment