NgMap-Angular Google Maps Directive Part 2

Pada part 1 kita masih menggunakan basic nya ngmap. Bagaimana kalau kita akan menambahkan fungsi add marker ketika klik di map? Bagaimana juga jika ingin menampilkan streetview pada saat berbarengan dengan add marker untuk melihat situasi sekitar marker? Yup kita akan membahas itu pada kesempatan ini. Jika pada part 1 kita hanya bermain dengan html, maka pada part 2 kita akan bermain pada controller juga.

Pertama tama kita ubah dulu konsep hardcode yang ada pada part 1 menjadi sebuah variable yang bisa control dari controller.

 <ng-map zoom="17" scrollwheel="true"   
              zoom-to-include-markers="false" center="{{lat}},{{long}}"  
              on-click="addMarker()" default-style="true">  
         <marker   
          position="[{{lat}},{{long}}]">  
         </marker>  
         <street-view-panorama container="streetview"  
          click-to-go="false"  
          disable-default-u-i="false"  
          disable-double-click-zoom="false"  
          position="[{{lat}},{{long}}]"  
          pov="{heading: {{heading}}, pitch: {{pitch}}}"  
          scrollwheel="false"  
          enable-close-button="true"  
          visible="true">  
         </street-view-panorama>  
        </ng-map>  
        <div id="streetview"></div>  
 <style>  
  map, #streetview {display:inline-block !important;width:45%;height: 400px}  
 </style>  

Jika pada part 1 kita langsung isi center pada ng-map dan position pada street-view-panorama, sekarang kita ubah menjadi lat untuk lattitude dan long untuk longitude. Serta pada ng-map kita tambahkan function on-click untuk merubah posisi marker. Oke, untuk part html sudah cukup, sekarang kita akan bermain di Controllernya.

 angular.module('testingggApp').  
 controller('MainCtrl', [  
   '$scope', 'NgMap',  
   mainCtrl  
 ]);  
 function mainCtrl($scope, NgMap) {  
   $scope.heading = 90;  
   $scope.pitch = 0;  
   $scope.lat = -6.175392999999987;  
   $scope.long = 106.82702100000006;  
   $scope.addMarker = function(event) {  
     var ll = event.latLng;  
     $scope.lat = ll.lat();  
     $scope.long = ll.lng();  
   };  
 };  

Pada awal controller, variable lat & long terlebih dahulu kita define variable nya. Sebagai contoh kita tetap menggunakan monas sebagai base lat & long nya. Untuk merubah posisi marker kita sudah menambahkan method addMarker. Cara kerjanya adalah ketika kita klik di random posisi maps, maka kita akan memanggil method addMarker yang ketika kita klik akan mengisi parameter event untuk mengambil lat dan long. Kemudian jika sudah dapat posisi lat long yang baru, maka kita akan assign value itu ke variable lat & long yang sudah ada. Resultnya akan seperti ini.

Oke sekarang posisi marker sudah berpindah, namun bagaimana untuk membuat streetview mengikuti posisi marker ?
Untuk merubah posisi streetview, kita harus mengambil instance map terlebih dahulu, kemudian cukup mengikuti aturan Google Maps API untuk mengeset streetview panorama nya. Jadi dengan menggunakan ngmap kita tidak perlu repot repot menghafal syntax orang yang membuat, kita cukup menggunakan panduan global yang sudah disediakan Google.
Untuk mengambil instance map kita bisa pergunakan line berikut.

  NgMap.getMap().then(function(map) {  
       $scope.map = map;  
     });  

Setelah dapat, kita bisa pergunakan variable map untuk mengeset streetview.

 NgMap.getMap().then(function(map) {  
       $scope.map = map;  
       var fenway = {  
         lat: ll.lat(),  
         lng: ll.lng()  
       };  
       var panorama = new google.maps.StreetViewPanorama(  
         document.getElementById('streetview'), {  
           position: fenway,  
           pov: {  
             heading: 34,  
             pitch: 10  
           }  
         });  
       map.setStreetView(panorama);  
     });  

Hasilnya akan menjadi seperti ini.

 angular.module('testingggApp').  
 controller('MainCtrl', [  
   '$scope', 'NgMap',  
   mainCtrl  
 ]);  
 function mainCtrl($scope, NgMap) {  
   $scope.heading = 90;  
   $scope.pitch = 0;  
   $scope.lat = -6.175392999999987;  
   $scope.long = 106.82702100000006;  
   $scope.addMarker = function(event) {  
     var ll = event.latLng;  
     $scope.lat = ll.lat();  
     $scope.long = ll.lng();  
     NgMap.getMap().then(function(map) {  
       $scope.map = map;  
       var fenway = {  
         lat: ll.lat(),  
         lng: ll.lng()  
       };  
       var panorama = new google.maps.StreetViewPanorama(  
         document.getElementById('streetview'), {  
           position: fenway,  
           pov: {  
             heading: 34,  
             pitch: 10  
           }  
         });  
       map.setStreetView(panorama);  
     });  
   };  
 };  

Mudah bukan?
Semangat & Keep Coding guys !
See ya


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

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/