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/