AngularJS - Aplikasi Peta

Halo sana, para pengembang web yang ambisius! Hari ini, kita akan melangkah ke dunia yang menarik dari AngularJS dan Google Maps. Pada akhir panduan ini, Anda akan dapat membuat aplikasi peta interaktif sendiri. Apakah itu menarik? Mari kita masuk ke dalam!

AngularJS - Maps Application

Pengenalan ke AngularJS dan Google Maps

Sebelum kita mulai mengoding, mari kita mengenal apa itu AngularJS dan Google Maps.

AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita dalam membuat aplikasi web dinamis. Itu seperti teman superhero bagi HTML Anda, memberinya superpower untuk menciptakan halaman web yang interaktif dan responsif.

Google Maps, dari sisi lain, adalah layanan peta web yang menyediakan informasi detil tentang wilayah geografis dan tempat di seluruh dunia. Itu seperti memiliki seluruh dunia di ujung jari Anda!

Ketika kita menggabungkan teknologi ini dua, kita dapat menciptakan aplikasi peta yang menakjubkan. Menggembirkan, kan?

Menyiapkan Proyek Kita

Langkah 1: Sertakan AngularJS dan Google Maps API

Pertama, kita perlu menyertakan pustaka yang diperlukan di dalam file HTML kita. Berikut cara yang benar:

<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>Aplikasi Peta AngularJS Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- Aplikasi kita akan berada di sini -->
<script src="app.js"></script>
</body>
</html>

Dalam kode ini, kita menyertakan AngularJS dan Google Maps API. Ganti 'YOUR_API_KEY' dengan kunci API Google Maps Anda. Jangan khawatir jika Anda belum memiliki satu; kita akan membahas bagaimana mendapatkannya nanti.

Langkah 2: Buat Aplikasi AngularJS Kita

Sekarang, mari kita buat aplikasi AngularJS kita. Dalam file baru yang disebut app.js, tambahkan kode berikut:

var app = angular.module('mapApp', []);

app.controller('MapController', function($scope) {
// Kita akan menambahkan logika peta di sini
});

Kode ini menciptakan modul AngularJS bernama 'mapApp' dan kontroler bernama 'MapController'. Pergunakan modul sebagai wadah bagi aplikasi kita, dan kontroler sebagai otak yang akan mengelola peta kita.

Membangun Peta Kita

Langkah 3: Inisialisasi Peta

Mari kita menambahkan beberapa kode ke kontroler kita untuk menginisialisasi peta kita:

app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});

Fungsi ini menciptakan peta Google baru yang terpusat di New York City (Anda dapat mengubah koordinatnya ke lokasi mana saja yang Anda sukai). Tingkat zoom menentukan seberapa dekat peta diperbesar.

Langkah 4: Tambahkan Peta ke HTML

Sekarang, mari kita tambahkan div ke HTML kita tempat peta akan ditampilkan:

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>

Petunjuk ng-controller memberitahu AngularJS untuk menggunakan kontroler MapController untuk bagian ini dari halaman. Petunjuk ng-init memanggil fungsi initMap saat halaman dimuat.

Menambahkan Markers

Langkah 5: Buat Fungsi untuk Menambahkan Markers

Mari kita meningkatkan kontroler kita untuk menambahkan markers ke peta:

app.controller('MapController', function($scope) {
var map;

$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});

Fungsi addMarker baru ini menciptakan marker di lokasi latitude dan longitude yang ditentukan, dengan judul yang diberikan.

Langkah 6: Gunakan Fungsi Marker

Sekarang, mari kita gunakan fungsi baru ini untuk menambahkan beberapa markers:

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Empire State Building')">Tambah Empire State Building</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Statue of Liberty')">Tambah Statue of Liberty</button>
<script src="app.js"></script>
</body>

Tombol ini akan menambahkan markers untuk Empire State Building dan Statue of Liberty saat ditekan.

Menangani Input Pengguna

Langkah 7: Buat Formulir Input

Mari kita memungkinkan pengguna menambahkan markers mereka sendiri:

<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="Judul">
<input type="number" ng-model="newMarker.lat" placeholder="Latitude">
<input type="number" ng-model="newMarker.lng" placeholder="Longitude">
<button type="submit">Tambah Marker</button>
</form>

Langkah 8: Tangani Pengiriman Formulir

Tambahkan fungsi ini ke kontroler Anda:

$scope.newMarker = {};

$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}

Fungsi ini memeriksa jika semua field terisi, menambahkan marker, dan kemudian membersihkan formulir.

Kesimpulan

Selamat! Anda telah membuat aplikasi Peta AngularJS pertama Anda. Anda sekarang dapat menampilkan peta, menambahkan markers yang ditentukan, dan bahkan memungkinkan pengguna menambahkan markers mereka sendiri. Ini hanya permulaan – ada banyak hal lain yang Anda bisa lakukan dengan AngularJS dan Google Maps.

Ingat, kunci untuk menjadi seorang programmer yang hebat adalah latihan. Cobalah menambahkan lebih banyak fitur ke aplikasi peta Anda. Bagaimana kalau menampilkan informasi saat marker ditekan? Atau menambahkan jenis marker yang berbeda? Kemungkinan adalah tak terbatas!

Selamat coding, para ahli teknologi masa depan!

Metode	Deskripsi
`initMap()`	Inisialisasi Google Map
`addMarker(lat, lng, title)`	Menambahkan marker ke peta di latitude dan longitude yang ditentukan
`addCustomMarker()`	Menangani input pengguna untuk menambahkan marker custom

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Chart

Tutorial Selanjutnya:

AngularJS - Aplikasi Berbagi