ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
33 lines (32 loc) • 1.08 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('DrawingManagerCtrl', function() {
var vm = this;
vm.onMapOverlayCompleted = function(e){
console.log(e.type);
};
});
</script>
</head>
<body>
<div ng-controller="DrawingManagerCtrl as vm">
<ng-map zoom="13" center="37.774546, -122.433523"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<drawing-manager
on-overlaycomplete="vm.onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','rectangle','circle']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:'www.example.com/icon'}"
rectangleOptions="{fillColor:'red'}"
circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" >
</drawing-manager>
</ng-map>
</div>
</body>