Membuat Google Maps dengan Angularjs - Menampilkan maps sederhana pada web dengan menggunakan google maps API dan angularjs itu sangat mudah. Untuk lebih jelasnya bisa ikuti cara di bawah ini.
HTML :
<html>
<head>
<meta charset='utf-8'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.0.11/angular-google-maps.js"></script>
<title>async angular maps</title>
<script src="mapsCtrl.js"></script>
<style type="text/css">
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body ng-app="gmapApp">
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" idkey="marker.id"></ui-gmap-google-map>
</div>
</body>
</html>
Angular Controller :
gmapApp = angular.module('gmapApp', ['uiGmapgoogle-maps'])
.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'AIzaSyBUgqPCoas7QjZjN-2jcGN3unjomtdBd40',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
})
.controller('mainCtrl', function ($scope, $log, $http) {
$scope.map = {
center: { latitude: 0.538659, longitude: 116.419389 },
zoom: 5
};
$scope.markers = [{
id: 0,
coords: {
latitude: 0.538659,
longitude: 116.419389
},
}, {
id: 1,
coords: {
latitude: -6.208763,
longitude: 106.845599
},
}];
});
Pada bagian Head HTML ada script berikut :
<script src="mapsCtrl.js"></script>
mapsCtrl.js adalah nama file controller nya.
$scope.map adalah initial map pertama kali di load, latitude dan longitude yang di set di atas adalah kalimantan .
$scope.markers adalah untuk menandai / marker pada maps, contoh di atas adalah kalimantan dan jakarta yang di marker.
Itu saja CaraMembuat Google Maps dengan Angularjs Semoga bermanfaat.
Membuat Google Maps dengan Angularjs
4/
5
Oleh
share.materi
