Menampilkan Peta Google Maps Dengan AngularJS

Menampilkan Peta Google Maps Dengan AngularJS

Pada artikel kali ini saya akan menjelaskan tutorial tentang bagaimana cara untuk menampilkan peta Google Maps dengan AngularJS. Google Maps dapat bekerja di semua environment javascript seperti jQuery, NodeJS, ReactJS dan juga AngularJS yang akan kita bahas pada artikel ini. Pada bahasan ini kita akan belajar bagaimana cara menggunakan AngularJS untuk menampilkan data dari database dan menampilkan data tersebut di peta Google Maps.

Google Maps Dengan AngularJS #Struktur Database

Untuk struktur database pada kasus ini kita hanya perlu menggunakan 1 table saja, pertama buat database dengan nama angularmaps lalu kita buat table dengan nama marker, struktur table yang akan kita buat adalah sebagai berikut :

CREATE DATABASE `angularmaps`
USE `angularmaps`;

DROP TABLE IF EXISTS `marker`;
CREATE TABLE `marker` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lokasi` varchar(255) NOT NULL,
  `latitude` varchar(255) NOT NULL,
  `longitude` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `marker` (`id`, `nama_lokasi`, `latitude`, `longitude`) VALUES
(1, 'Tegalega', '-6.935993',    '107.60157'),
(2, 'Taman Balai Kota Bandung', '-6.9133308',   '107.6091605'),
(3, 'Alun Alun Bandung',    '-6.9216589',   '107.6065467'),
(4, 'Lapangan Gasibu',  '-6.9006332',   '107.6185905'),
(5, 'Stasiun Kereta Api Bandung',   '-6.918213',    '107.601817');

Hasil dari query diatas ada pada gambar di bawah ini :

 menampilkan-peta-google-maps-dengan-angularjs-database

Google Maps Dengan AngularJS #Instalasi

Pertama kita akan menginstall AngularJS terlebih dahulu, pada kasus ini saya menggunakan AngularJS versi 1.6.7. Kamu bisa download langsung di situs resminya di https://angularjs.org atau install via bower / npm dengan menggunakan perintah berikut :

bower install angular#1.6.7
npm install angular@1.6.7

Selain itu kita juga membutuhkan library dari allenhwkim yaitu GoogleMap AngularJS Directive. Untuk kasus ini saya menggunakan bower jadi untuk kamu yang ingin melakukan instalasi library tersebut dengan menggunakan NPM bisa melihat dulu panduan instalasinya di halaman Github dari allenhwkim. Cara instalasinya adalah sebagai berikut :

  • bower install ngmap
  • Include file ng-map.min.js <script src=”/bower_components/ngmap/build/scripts/ng-map.min.js”></script>
  • Include library Google Maps <script src=”http://maps.google.com/maps/api/js”></script>
  • Setelah itu kita beri nama aplikasi kita dengan nama “angularmaps”.

Google Maps Dengan AngularJS #index.html

Sementara itu kita buat file dengan nama index.html. Syntax code dari panduan instalasi diatas adalah seperti berikut ini :

<!doctype html>
<html ng-app="angularmaps">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="https://maps.googleapis.com/maps/api/js?key=API-KEY"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>
  </head> 
  <body>
  </body>
</html>

Nah sekarang kita buat file javascript untuk melakukan fungsi pemanggilan data dari server. Buat file javascript dengan nama angularmaps.js dan kita sertakan file javascript ini pada file index.html

<!doctype html>
<html ng-app="angularmaps">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="https://maps.googleapis.com/maps/api/js?key=API-KEY"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>
    <script src="angularmaps.js"></script>
  </head> 
  <body>
  </body>
</html>

Google Maps Dengan AngularJS #angularmaps.js

Setelah itu baru kita buat script javascriptnya, syntax kode yang kita gunakan adalah sebagai berikut :

var app = angular.module('angularmaps', ['ngMap']);
var baseUrl = 'http://localhost/angularmaps/server.php';

app.controller('MapsController', function($scope, $http, NgMap) {
  NgMap.getMap().then(function(map) {
    $scope.marker = [];
    $scope.getMarker = function() {
      $http({
        method: 'GET',
        url: baseUrl,
        headers: { 'Content-Type': 'application/json' }
      }).then(function(response) {
        $scope.marker = response.data;
      });
    };
    $scope.getMarker();
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
});

Google Maps Dengan AngularJS #server.php

Setelah selesai membuat file angularmaps.js sekarang baru kita buat script PHP sebagai connector antara script AngularJS dengan database MySQL. Buat file PHP dan kita beri nama server.php, lalu kita isi dengan syntax code sebagai berikut :

<?php 

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

$conn = new mysqli("HOST", "USER", "PASS", "DBNAME");
if ($conn->connect_error) {
    die("Koneksi Gagal : " . $conn->connect_error);
} 

$sql = "SELECT * FROM marker";
$result = $conn->query($sql);

$response = array();
$i = 0;
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $response[$i]['nama_lokasi'] = $row['nama_lokasi'];
        $response[$i]['koordinat'] = $row['latitude'] . "," . $row['longitude'];
        $i++;
    }
    echo json_encode($response);
}
$conn->close();

Setelah itu baru kita jalankan script kita, kita bisa langsung mengeksekusi script tersebut tanpa harus mengakses webserver terlebih dahulu. Perlu diingat bahwa service Apache & MySQL harus menyala saat script ini dijalankan. Hasil dari script diatas adalah sebagai berikut

Sekian tutorial saya tentang bagaimana cara menampilkan peta Google Maps dengan AngularJS. Silahkan dicoba dan semoga bermanfaat 🙂

Download Link

Tinggalkan komentar