ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
39 lines (38 loc) • 1.19 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('LayerDynamicMapsEngineCtrl', function() {
var vm = this;
vm.onMouseover = function(event) {
var fillArray = ['red', 'blue', 'yellow', 'green'];
var style = this.getFeatureStyle(event.featureId);
style.fillColor = fillArray[event.featureId - 1];
style.fillOpacity = '0.8';
};
vm.onMouseout = function(event) {
this.getFeatureStyle(event.featureId).resetAll();
};
});
</script>
</head>
<body>
Circle Simple<br/>
This example creates circles on the map, representing
populations in North America.
<div ng-controller="LayerDynamicMapsEngineCtrl as vm">
<ng-map center="59.322506, 18.010025" zoom="14">
<dynamic-maps-engine-layer
suppress-info-windows="true"
clickable="true"
on-mouseover="vm.onMouseover()"
on-mouseout="vm.onMouseout()"
layer-id="06673056454046135537-08896501997766553811">
</dynamic-maps-engine-layer>
</ng-map>
</div>
</body>
</html>