ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
76 lines (67 loc) • 3.31 kB
HTML
<html ng-app="myApp">
<head>
<title>GoogleMap-Based App</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script src="scripts/markerclusterer.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $timeout, StreetView, NgMap) {
var vm = this;
vm.stores = [];
NgMap.getMap().then(function(evtMap) {
map = evtMap;
vm.map = map;
console.log('loading scripts/starbucks.json');
$http.get('scripts/starbucks.json').then(function(resp) {
console.log('stores', stores);
var stores = resp.data;
for (var i=0; i<stores.length; i++) {
var store = stores[i];
store.position = new google.maps.LatLng(store.latitude,store.longitude);
store.title = store.name;
var marker = new google.maps.Marker(store);
vm.stores.push(marker);
}
console.log('finished loading scripts/starbucks.json', 'vm.stores', vm.stores.length);
vm.markerClusterer = new MarkerClusterer(map, vm.stores, {});
}, function(err) { console.log('err', err)});
});
});
app.directive('fullScreenToggle', function($timeout) {
return {
controller: 'mapController',
link: function(scope, e, a, ctrl) {
var fullScreenClick = function() {
e.parent().toggleClass('full-screen');
e.text( e.parent().hasClass('full-screen') ? 'Exit Full Screen' : 'Full Screen' );
google.maps.event.trigger(scope.map, 'resize');
};
e.on('click', fullScreenClick);
$timeout(function() {
fullScreenClick();
}, 1000);
}
}
});
</script>
<style>
html, body {width:100%; height: 100%; margin: 0}
div#map-container {width: 600px; height: 400px; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; }
div#map-container div.custom-control { z-index: 1; direction: ltr; overflow: hidden; text-align: center; padding: 1px 6px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(0, 0, 0, 0.14902); border-right-color: rgba(0, 0, 0, 0.14902); border-bottom-color: rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; min-width: 41px; background-color: rgb(255, 255, 255); background-clip: padding-box; }
div#map-container.full-screen {position:absolute; display:block; width:100%; height:100%; top: 0; left: 0}
div#map-container div[full-screen-toggle] { cursor: pointer; position: absolute; top: 5px; right: 100px; }
ng-map {display:block; width:100%; height:100%;}
</style>
</head>
<body>
<h1>GoogleMap-Based App</h1>
<hr />
<div id="map-container" ng-controller="mapController as vm">
<ng-map default-style="false" zoom="2" center="[45.518970, -122.672899]">
</ng-map>
<div full-screen-toggle class="custom-control">Full Screen</div>
</div>
</body>
</html>