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.
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.
Mudah bukan?
Semangat & Keep Coding guys !
See ya
https://github.com/allenhwkim/angularjs-google-maps
https://ngmap.github.io/
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();
};
};
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;
});
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);
});
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);
});
};
};
Semangat & Keep Coding guys !
See ya
https://github.com/allenhwkim/angularjs-google-maps
https://ngmap.github.io/
