ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
66 lines (56 loc) • 1.71 kB
HTML
<html ng-app="myapp">
<head>
<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('PolygonArraysCtrl', function(NgMap) {
var vm = this;
var infoWindow = new google.maps.InfoWindow();
NgMap.getMap().then(function(map) {
vm.map = map;
});
vm.showArrays = function(event) {
// Since this polygon has only one path, we can call getPath()
// to return the MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(vm.map);
}
});
</script>
</head>
<body>
<div ng-controller="PolygonArraysCtrl as vm">
<ng-map zoom="5"
center="24.886436490787712, -70.2685546875"
map-type-id="TERRAIN">
<shape name="polygon"
on-click="vm.showArrays()"
paths="[
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737]
]"
stroke-color="#FF0000"
stroke-opacity="0.8"
stroke-weight="2"
fill-color="#FF0000"
fill-opacity="0.35">
</shape>
</ng-map>
</div>
</body>
</html>