ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
34 lines (32 loc) • 1.04 kB
HTML
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('ngMap').controller('MyCtrl', function() {
var vm = this;
vm.allShapes = [
{name: "polyline", path: [[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]},
{name: "polygon", paths: [[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]},
{name: "rectangle", bounds: [[40.74,-74.18], [40.78,-74.14]]},
{name: "circle", center:[40.70,-74.14], radius:4000}
];
});
</script>
</head>
<body ng-controller="MyCtrl as vm">
<ng-map zoom="11" center="[40.74, -74.18]">
<shape ng-repeat="shape in vm.allShapes"
name="{{shape.name}}"
stroke-color="#FF0000"
stroke-opacity="0.8"
path="{{shape.path}}"
paths="{{shape.paths}}"
bounds="{{shape.bounds}}"
center="{{shape.center}}"
radius="{{shape.radius}}"
stroke-weight="2"></shape>
</ng-map>
</body>
</html>