<!DOCTYPE html>
<html ng-app=google-maps>
<head>
<meta name="Author" content="Fulup Ar Foll">
<meta name="Object" content="Angular-Gmap Test">
<link href="map-style.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.js"></script>
</head>
<body>
<h1>Angular Gmap Test</h1>
<div ng-view></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.0.12/angular-google-maps.js"></script>
<script src="BootLoadGMapApp.js" ></script>
<script src="DisplayGMapMod.js" ></script>
</body>
</html>
/**
* Created by fulup on 16/01/15.
*/
'use strict';
var opa = angular.module('google-maps', [
'ngRoute','uiGmapgoogle-maps',
'DisplayGMapMod'],
function( ) {
console.log ("Angular App Init");
}
);
opa.config(['uiGmapGoogleMapApiProvider', function(GoogleMapApi) {
GoogleMapApi.configure({
// https://code.google.com/apis/console/
// key: 'Not for Dev',
v: '3.17',
language: 'fr',
libraries: 'weather,geometry,visualization'
});
}]);
opa.config(['$logProvider', function($logProvider){
$logProvider.debugEnabled(true);
}]);
opa.config(['$routeProvider',
function($routeProvider) {
var appbasedir="";
$routeProvider.
when('/display-map', {
templateUrl: appbasedir + 'display-map.html',
controller: 'DisplayGMapController as DisplayGMap'
}).
otherwise({
redirectTo: '/display-map'
});
}]);
<div>
<h3>Test Map.</h3>
<ui-gmap-google-map
center="DisplayGMap.map.Center"
zoom="DisplayGMap.map.Zoom"
draggable="true"
options="DisplayGMap.map.Options"
control="DisplayGMap.map.Control"
events="DisplayGMap.map.Events" >
<ui-gmap-marker
coords="DisplayGMap.marker.coords"
options="DisplayGMap.marker.options"
events="DisplayGMap.marker.events"
idkey="DisplayGMap.marker.id">
</ui-gmap-marker>
<ui-gmap-rectangle
bounds="DisplayGMap.zone1Bounds"
events="DisplayGMap.zone1Events"
draggable="true"
fill="'#FFFFFF .5'">
</ui-gmap-rectangle>
</ui-gmap-google-map>
</div>
/**
* Created by Fulup on 16/01/15.
*/
'use strict';
var newModule = angular.module('DisplayGMapMod', []);
newModule.controller('DisplayGMapController', ['uiGmapGoogleMapApi', '$log', DisplayMapController]);
function DisplayMapController (uiGmapGoogleMapApi, $log) {
var scope = this;
// uiGmapGoogleMapApi is a promise.
// The "then" callback function provides the google.maps object.
uiGmapGoogleMapApi.then(function(maps) {
$log.log("*** display map", maps);
scope.DisplayRoute = function (map) {
$log.log('DisplayRoute');
// Warning: map is only defined when chart rendering is finished
var directionsService = new maps.DirectionsService();
// Depending when call is from we get the map or not
var activemap = map || scope.map.Control.getGMap();
directionsDisplay.setMap(activemap);
directionsService.route(direction, function (result, status) {
if (status == maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
};
var mapevents = { // function (maps, events, google argument evt dependent
idle: scope.DisplayRoute // should wait map to be iddle before making route
};
scope.map = { // Must fit with HTTP definitions
Center : {latitude: 47.6, longitude: -2.7},
Zoom : 8,
Events : mapevents,
Options: {
rotateControl: true,
mapTypeControl: true,
scaleControl: false,
mapTypeControlOptions: {style: maps.MapTypeControlStyle.DROPDOWN_MENU}
},
Control: {} // should be empty will be replaced by map control object !!!!
};
$log.log ("scope=", scope);
//var a= new maps.LatLng (48.09098549874172, -2.9370880859374893);
//$log.log ('a=',a)
var rendererOptions = {
draggable: true
};
var direction = {
origin: '47.89983530420841,-4.244461132812489',
destination: "47.39283517978761 -1.6297150390624893",
travelMode: maps.TravelMode.DRIVING,
unitSystem: maps.UnitSystem.METRIC,
optimizeWaypoints: false
//waypoints: [
// {location: "48.09098549874172, -2.9370880859374893", title: 'toto'},
// {location: "47.633996241622576,-1.6571808593749893", title: 'tsdfsdf'}
//]
};
var directionsDisplay = new maps.DirectionsRenderer(rendererOptions);
scope.marker = {
id: 0,
coords: {
latitude: 47.6451,
longitude: -2.76680
},
options: { draggable: true ,title: 'mon label'},
events: {
dragend: function (marker, eventName, model, args) {
$log.log('marker dragend');
var lat = marker.getPosition().lat();
var lon = marker.getPosition().lng();
$log.log(lat);
$log.log(lon);
scope.marker.options = {
draggable: true,
title: 'mon label moved',
labelContent: "lat: " + scope.marker.coords.latitude + ' ' + 'lon: ' + scope.marker.coords.longitude,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
scope.zone1Bounds= {
sw: {
latitude: 47.55,
longitude:-2.9
},
ne: {
latitude: 47.9,
longitude: -2.4
}
};
scope.zone1Events = {
dragend: function (rectangle, eventName, model, args) {
$log.log('rectangle drag end');
var bounds = rectangle.getBounds();
$log.log("rectangle moved center=", bounds.getCenter().toString(), "NorthEast=", bounds.getNorthEast(), "SouthWest=", bounds.getSouthWest());
}
};
});
}
console.log ('******** test');
.angular-google-map-container { height: 400px; }