NgMap-Angular Google Maps Directive Part 1

Pada kesempatan ini saya ingin membahas tentang Google Maps Directive. Di salah satu project yang saya tangani, membutuhkan maps sebagai komponen utama. Namun ketika ingin mengimplemen maps secara standart itu membutuhkan banyak coding dan menurut saya tidak efisien jika kita menggunakan angular namun cara penyelesaiian nya menggunakan javascript. Akhirnya saya menemukan module ngMap. 

Module ini merupakan Google Maps Directive yang sudah membundle semua Google Maps v3 api didalamnya dan module ini juga tidak mengharuskan kita coding javascript hanya untuk menampilkan maps. Bukan berarti kita benar-benar tidak coding yah, namun porsi coding nya menjadi sangat minim dan hanya disaat kondisi tertentu saja. Pada kesempatan ini pula saya ingin menjelaskan cara pasang & penggunaan tanpa melakukan coding javascript. Langsung saja kita coba pasang ngMap.

Pertama-tama jika kalian bower users, jalankan command 

 bower install ngmap  

1. Include ng-map.min.js: <script src="/bower_components/ngmap/build/scripts/ng-map.min.js"></script>
2. Include Google maps:
   <script src="http://maps.google.com/maps/api/js"></script>
3. Tambahkan ngMap pada angular module
   var myApp = angular.module('myApp', ['ngMap']);

Jika sudah, kalian cukup tambahkan sample html berikut di dalam html mu untuk me-load map yang centernya berada di Monas, Jakarta.

 <map center="[-6.175392999999987, 106.82702100000006]" zoom="18" />  

Bagaimana jika ingin tampilan map nya menggunakan Satelite View? Cukup tambahkan parameter map-type-id="MapTypeId.SATELLITE" di dalam html diatas sehingga menjadi 

 <map center="[-6.175392999999987, 106.82702100000006]" zoom="18"   
 map-type-id="MapTypeId.SATELLITE" >  

Bagaimana jika ingin menambahkan marker?

 <map center="[-6.175392999999987, 106.82702100000006]" zoom="18"   
 map-type-id="MapTypeId.SATELLITE" >  
 <marker position="[-6.175392999999987, 106.82702100000006]" />  

Kalau Streetview?

 <map id="sv" street-view="StreetViewPanorama(document.querySelector('map#sv'),   
 {position:new google.maps.LatLng(-6.175392999999987, 106.82702100000006)})" />  

Terlihat mudah bukan? Bagaimana jika ingin menampilkan maps beserta streetview bersamaan?

 <ng-map zoom="18" center="[-6.175392999999987, 106.82702100000006]"  
   default-style="false"  
   map-type-id="MapTypeId.SATELLITE" tilt="45">  
   <street-view-panorama container="streetview">  
   </street-view-panorama>  
  </ng-map>  
  <div id="streetview"></div>   
 <style>  
  map, #streetview {display:inline-block !important;width:45%;height: 400px}  
 </style>  

Sekian dulu untuk kesempatan ini, next kita akan membahas modifikasi menggunakan ngMap pada kesempatan berikutnya.

https://github.com/allenhwkim/angularjs-google-maps
https://ngmap.github.io/