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 :

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 :

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

Google Maps Dengan AngularJS #angularmaps.js

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

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 :

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 Balasan