ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
59 lines (55 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>
/**
* @constructor
* @implements {google.maps.MapType}
*/
function CoordMapType() {
}
CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
div.style.backgroundColor = '#E5E3DF';
return div;
};
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';
</script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('MapTypeBaseCtrl', function() {
var vm = this;
vm.coordMapType = new CoordMapType();
vm.mapTypeChanged = function() {
var showStreetViewControl = this.getMapTypeId() != 'coordinate';
this.setOptions({'streetViewControl': showStreetViewControl});
};
});
</script>
</head>
<body ng-controller="MapTypeBaseCtrl as vm">
<ng-map zoom="10" center="41.850033,-87.6500523"
on-maptypeid_changed="vm.mapTypeChanged()"
street-view-control="false"
map-type-id="coordinate"
map-type-control-options="{
mapTypeIds: ['coordinate', 'ROADMAP'],
style: 'DROPDOWN_MENU'
}">
<map-type name="coordinate" object="vm.coordMapType">
</map-type>
</ng-map>
</body>
</html>