AngularJS - Aplikasi Peta
Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan memulai perjalanan yang menarik ke dunia AngularJS dan Google Maps. Pada akhir tutorial ini, Anda akan dapat membuat aplikasi peta interaktif sendiri. Apakah itu tidak menarik? Mari kita mulai!
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, memberikan superpower untuk membuat halaman web 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 dua teknologi ini, kita dapat membuat aplikasi peta yang menakjubkan. Menggembirakan, kan?
Menyiapkan Proyek Kita
Langkah 1: Sertakan AngularJS dan Google Maps API
Pertama, kita perlu menyertakan pustaka yang diperlukan di file HTML kita. Berikut adalah cara melakukannya:
<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>My AngularJS Map App</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 punya; kita akan bahas bagaimana mendapatkannya nanti.
Langkah 2: Buat Aplikasi AngularJS Kita
Sekarang, mari kita buat aplikasi AngularJS kita. Dalam file baru yang dinamai app.js, tambahkan kode berikut:
var app = angular.module('mapApp', []);
app.controller('MapController', function($scope) {
// Kita akan menambahkan logika peta di sini
});Kode ini membuat modul AngularJS bernama 'mapApp' dan kontroler bernama 'MapController'. Bayangkan modul sebagai wadah bagi aplikasi kita, dan kontroler sebagai otak yang akan mengelola peta kita.
Membangun Peta
Langkah 3: Inisialisasi Peta
Marilah menambahkan beberapa kode ke kontroler kita untuk inisialisasi peta:
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 membuat peta Google baru yang terpusat di New York City ( Anda dapat mengubah koordinatnya ke lokasi lain yang Anda inginkan). 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 Penanda
Langkah 5: Buat Fungsi untuk Menambahkan Penanda
Marilah meningkatkan kontroler kita untuk menambahkan penanda 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 ini membuat penanda di lokasi latitude dan longitude yang ditentukan, dengan judul yang diberikan.
Langkah 6: Gunakan Fungsi Penanda
Sekarang, mari kita gunakan fungsi baru ini untuk menambahkan beberapa penanda:
<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 penanda untuk Empire State Building dan Statue of Liberty saat diklik.
Menangani Input Pengguna
Langkah 7: Buat Formulir Input
Marilah memungkinkan pengguna menambahkan penanda 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 Penanda</button>
</form>Langkah 8: Tangani Penyerahan 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 apakah semua bidang terisi, menambahkan penanda, dan kemudian membersihkan formulir.
Kesimpulan
Selamat! Anda telah membuat aplikasi Peta AngularJS pertama Anda. Anda sekarang dapat menampilkan peta, menambahkan penanda yang ditentukan, dan bahkan memungkinkan pengguna menambahkan penanda mereka sendiri. Ini hanya permulaan – ada banyak hal lain yang Anda dapat lakukan dengan AngularJS dan Google Maps.
Ingat, kunci untuk menjadi seorang programmer yang hebat adalah latihan. Cobalah menambahkan fitur lain ke aplikasi peta Anda. Bagaimana kalau menampilkan informasi saat penanda diklik? Atau menambahkan jenis penanda yang berbeda? Kesempatan adalah tak terbatas!
Selamat berkoding, para ahli teknologi masa depan!
Credits: Image by storyset