ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
45 lines (39 loc) • 1.18 kB
HTML
<html ng-app="myApp">
<head>
<title>Dynamic ngMap demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($interval) {
var vm = this;
vm.positions =[
[40.71, -74.21], [40.72, -74.20], [40.73, -74.19], [40.74, -74.18],
[40.75, -74.17], [40.76, -74.16], [40.77, -74.15], [40.77, -74.15]
];
$interval(function() {
var numMarkers = Math.floor(Math.random() * 4) + 4; //between 4 to 8 markers
vm.positions = [];
for (i = 0; i < numMarkers; i++) {
var lat = 40.71 + (Math.random() / 100);
var lng = -74.21 + (Math.random() / 100);
vm.positions.push([lat, lng]);
}
}, 2000);
});
</script>
<style>
map, div[map] {display:block; width:600px; height:400px;}
</style>
</head>
<body>
<h1>Dynamic Markers With ng-repeat</h1>
<hr />
<div ng-controller="mapController as vm">
<ng-map zoom="14" center="[40.71, -74.21]">
<marker ng-repeat="p in vm.positions" position="{{p}}"></marker>
</ng-map>
</div>
</body>
</html>