<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="../dist/angular-google-maps-native.min.js"></script>
<script src="assets/tools.js"></script>
<script>
angular.module('MyApp', ['GoogleMapsNative', 'ExampleTools'])
.config(function(gmLibraryProvider) {
gmLibraryProvider.configure({
language: 'fr'
});
})
.controller('MyCtrl', function ($scope, console) {
$scope.console = console;
})
;
</script>
</head>
<body ng-controller="MyCtrl" ng-init="zoom=4; showMap=false;">
<div class="panel">
<div class="item">
<label>
<input type="checkbox" ng-model="showMap"> Show the map
</label>
</div>
<div class="item" ng-show="showMap">
Zoom: <select ng-model="zoom" ng-options="o as o for o in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]"></select>
</div>
<div class="item" ng-show="showMap">
mapTypeID: <select ng-model="data.mapTypeID" ng-options="o as o for o in [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN]" required ></select>
</div>
<div class="item" ng-show="showMap">
GoTo:
<button ng-click="center=[48.85341, 2.3488]; zoom=5">Paris</button>
<button ng-click="center=[48, -74]; zoom=5">Quebec</button>
</div>
</div>
<gm-map
ng-show="showMap"
mapTypeID="data.mapTypeID"
center="center"
zoom="zoom"
options="{center: [37.772323, -122.214897], mapTypeId: google.maps.MapTypeId.ROADMAP}"
on-zoom-changed="console.log('zoom_changed: ' + map.getZoom())"
on-click="console.log('click on {' + event.latLng.lat() + ',' + event.latLng.lng() + '}')"
once-drag="console.log('drag once <em>unbind drag event</em>')"
>
</gm-map>
<console></console>
</body>
</html>
|
Download
