I am building an AngularJS app which exposes an OpenLayers map. I used this simple example (literally just copy and pasted into an HTML file) ran it in the browser and - no surprise - it worked.
I then added the AngularJS Wrapping to it so that I could include it in a partial declared and routed to via app.js (below) and the OpenLayers library doesn't seem to be working any more. I am not getting errors in the console (running it on IE11) but I am not getting a visible map either. I have tried substituting the map for some simple data binding in the controller and it's working, and I am getting the sub-heading displayed just above the map too.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>Map Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
angular.module("app", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
main.ctrl.js
angular.module("app")
.controller("MainController", function($scope){
//Do something
});
If you consider in using directives check this
Plunker
EDIT
I modified it for a more simple use
angular.module("app")
.controller("MainController", function($scope){
//Do something
})
.directive('mapDir', function () {
return {
restrict: 'A',
link: function ($scope) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
};
});
and view
<h2>My Map</h2>
<div map-dir id="map" class="map"></div>
Tell me if it was this what you are looking for
Related
I want to display map in my angularJS page like below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="abc">
<div id="controller" ng-controller="def as ctrl">
<div id="googlemap" style="height:100%; width:100%"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=displayMap"></script>
</body>
</html>
And my scripts.js file is as follows.
var mainApp = angular.module('abc',[]);
mainApp.controller('def', function($scope,$http) {
this.displayMap=function() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.googlemap = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
}
}
I am getting displayMap is not a function InvalidValueError message. How can it be resolved?
displayMap function passed via callback parameter is expected to be visible from the global scope but in the provided example it is only accessible in the scope of def controller.
In Angular app instead of invoking displayMap function via callback parameter you could invoke it from the contoller like this:
google.maps.event.addDomListener(window, 'load', displayMap);
Example
angular.module('mapApp', [])
.controller("mapCtrl", function ($scope, $http) {
var displayMap = function (data) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48.209500, 16.370691),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);
};
google.maps.event.addDomListener(window, 'load', displayMap);
});
#map_div {
height: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<div id="map_div" ></div>
</div>
simple angular ui example not working. There are no errors in console.
Here is the example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<script>
window.onload = function ()
{
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function ($scope) {
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/first");
// ui router states
$stateProvider
.state('first', {
url: "/first",
views: {
header: {
template: '<h1>First header</h1>',
controller: function ($scope) {
}
},
content: {
template: '<p>First content</>',
controller: function ($scope) {
}
},
footer: {
template: '<div>First footer</div>',
controller: function ($scope) {
}
}
}
});
});
}
</script>
<body ng-controller="MainCtrl">
<ul>
<li>First</li>
<li>Second</li>
</ul>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>
</html>
I have included all the resources using external cdn. The template content written in angular is not displayed. I am I doing it correctly?
Here is the plunker: Plunker
You have not mentioned app name anywhere in the view.
<html lang="en" ng-app="myApp">
Here is the working Plunker
Remove window.onload. Make sure the angular and ui-router scripts are loaded before your script. And add the missing ng-app="myApp" to the html element.
Plunkr: http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview
I am new to Angular. I have been trying to load Google Maps, but it's still failing to work. I found a link on the web and followed all of the steps they used, but it still fails to load. I also tried other samples found on the net, but it still fails. Here is the link to the document I followed:
http://www.saintsatplay.com/blog/2015/03/using-google-maps-in-angular-js#.VmLTBaeIZCU
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<style>
.angular-google-map-container {
height: 300px; // Or whatever pixel value you require :)
}
</style>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="scripts/lodash.min.js"></script>
<script type="text/javascript" src="scripts/controllers/Drivermap_controllers.js"></script>
</head>
<body ng-app='driverapp'>
<div ng-view>
</div>
</body>
</html>
Drivermap_controllers.js
"use strict";
var app = angular.module('driverapp', ['uiGmapgoogle-maps'])
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '***********',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
})
.controller("DrivermapController", function($scope, uiGmapGoogleMapApi) {
// Define variables for our Map object
var areaLat = 44.2126995,
areaLng = -100.2471641,
areaZoom = 3;
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: areaLat, longitude: areaLng }, zoom: areaZoom };
$scope.options = { scrollwheel: false };
});
});
main.js:
var app = angular.module('driverapp', ['ngRoute','ngResource']);
app.config(function($routeProvider){
$routeProvider
.when('/customers', {
templateUrl: 'views/customers/new.html',
controller: 'CustomersListController'
})
.when('/drivermap', {
templateUrl: 'views/drivermap/new.html',
controller: 'DrivermapController'
})
.otherwise({
redirectTo: '/customers'
});
});
views/drivermap/new.html:
<div ng-controller="DrivermapController">
<ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map>
</div>
error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=driverapp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3DuiGmapgoogle-maps%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253DuiGmapgoogle-maps%250AG%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A294%253A192%250An.Callbacks%252Fj%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A26920%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A27738%250A.ready%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29530%250AI%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29721%250A%0AG%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A391%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A134%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Aeb%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A463%0Ayc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A294%3A192%0An.Callbacks%2Fj%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A26920%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A27738%0A.ready%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29530%0AI%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29721%0A
I suspect (in your comment you did not provided the complete console error) you are using version 2.2.X of angular-google-maps, this version has an additional dependency on angular-simple-logger. The solution would be to explicitly add reference to angular-simple-logger, modify index.html file:
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
Plunker
hi I'm doing a aplication with angular, well in this app I need show map and makers, but first step I need the map, now I'am having problem in this part ok, I'm very new in angular I make maps with jquery and javascript now I tried to make the same steps and nop work yet. well I thing that this part is the important. controller of map.
mapController.js
(function(){
angular.module('mapCtrl', [])
.controller('MapController', function($scope) {
function initialize() {
var options = {
googleApiKey: '',
locationColumn: 'geometry',
map_center: [-16.494898, -68.133553],
locationScope: 'La Paz'
};
var self = this;
options = options || {};
this.googleApiKey = options.googleApiKey || "";
this.locationColumn = options.locationColumn || "geometry";
this.locationScope = options.locationScope || "";
this.defaultZoom = options.defaultZoom || 13;
this.map_centroid = new google.maps.LatLng(options.map_center[0], options.map_center[1]);
this.myOptions = {
zoom: this.defaultZoom,
center: this.map_centroid,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//$scope.map = new google.maps.Map($("#map")[0], this.myOptions);
$scope.map = new google.maps.Map(document.getElementById('map'), this.myOptions);
//this.map = new google.maps.Map($("#map")[0], this.myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
});
})();
I tried with getElementById() and dont work. Now the view.
In the express framework the route is /public/app/views/index.html, the
route.app.js is:
(function(){
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html',
controller: 'MapController',
controllerAs: 'main'
})
.when('/login', {
templateUrl: 'app/views/pages/login.html'
})
.when('/about', {
templateUrl: 'app/views/pages/about.html'
})
.when('/users', {
templateUrl: 'app/views/pages/users.html'
});
// get rid of the hash in the URL
});
})();
the app.js
(function(){
angular.module('myApp', [
'ngAnimate',
'app.routes',
'mainCtrl',
'userCtrl',
'mapCtrl',
'userService',
'authService'
]);
})();
in the index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sociedad F</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='Team of competition' name='description' />
<meta content='FanaticCode' name='author' />
<script type="text/javascript" src="/app/controller/mainController.js"></script>
<script type="text/javascript" src="/app/controller/userController.js"></script>
<script type="text/javascript" src="/app/controller/mapController.js"></script>
<!-- services -->
<script type="text/javascript" src="/app/services/authService.js"></script>
<script type="text/javascript" src="/app/services/userService.js"></script>
<!-- main Angular app files -->
<script type="text/javascript" src="/app/app.routes.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body ng-app="myApp" ng-controller="MapController as main">
<div ng-view></div>
</body>
</html>
and the home.html
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--- more html code with bootstrap -->
</div>
<div id="container" >
<div id="sidebar">
<!--- more html code with bootstrap -->
</div>
<div id="map"></div>
</div>
Well can see that nothing is happend I tried but dont work yet some can help me please.
I'm trying to learn angular, and using Angular-Google-Maps with Angular Seed.
I'm just trying to get the map to show up, but I don't think it's receiving the latitude, longitude and zoom parameters, and thus nothing is there. I am not showing any errors in the web developer inspector in Chrome.
I do believe the issue is in adding this
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
To my scope like the angular-google-maps documentation reads.
If I skip the above instruction and do this in my index.html file instead, it works.
<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map>
This is my app.js file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.version',
'uiGmapgoogle-maps'
])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
This is my index.html file:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project R</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
<ul class="menu">
<li>Add Memory</li>
<li>Profile</li>
<li>Search</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src='bower_components/lodash/dist/lodash.min.js'></script>
<script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>
</body>
</html>
my app.css file includes these styles:
#map-container{
height:400px;
width:100%;
position: absolute;
z-index: -1;
left:0;
top:0;
}
.ng-isolate-scope{
height:400px;
width:100%;
}
.angular-google-map{
height:400px;
width:100%;
}
.angular-google-map-container{
position: absolute;
height:400px;
width:100%;
}
It does not look like you declared ng-app or ng-controller in your html. Try the below at the beginning of your code (and obviously close out that div wherever you want that controller's scope to end):
<body ng-app="myApp">
<div ng-controller="mapCtrl">
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
/**
* itSimpleGoogleMap Module
*
* Just a google maps api wrapper
*/
(function(){
'use strict';
angular.module('itSimpleGoogleMap', [])
.directive('itSimpleGoogleMap', function($compile, $timeout){
// Runs during compile
var _currentMarkers = [];
var _overlays = [];
var newdiv = document.createElement('div');
newdiv.style.width = "100%";
newdiv.style.height = "100%";
var map = new google.maps.Map(newdiv, {
center: {lat: 41.90, lng: -87.65},
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {
markers:'=',
overlays:'=',
triggerResize:'='
}, // {} = isolate, true = child, false/undefined = no change
// controller: function(scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function(scope, iElm) {
iElm[0].appendChild(newdiv);
_.each(_currentMarkers, function(marker){
marker.setMap(null);
})
_.each(_overlays, function(overlay){
overlay.setMap(null);
})
google.maps.event.trigger(map, 'resize');
scope.$watch('triggerResize', function(){
google.maps.event.trigger(map, 'resize');
});
$timeout(function(){
var mapOptions = {
center: {lat: 41.90, lng: -87.65},
zoom: 10
};
// scope.$watchCollection('options', function(){
// if(!scope.options || !map){
// return ;
// }
// map.setCenter({lat:scope.options.center.lat,lng:scope.options.center.lng});
// });
scope.$watch('overlays', function(){
if(!scope.overlays || !map){
return ;
}
_.forEach(_overlays, function(curOverlay){
curOverlay.setMap(null);
});
_.forEach(scope.overlays, function(overlayData){
var newOverlay = new google.maps.KmlLayer({
url: overlayData,
map:map
});
_overlays.push(newOverlay);
});
});
scope.$watchCollection('markers', function(){
if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude)
{
return;
}
_.forEach(_currentMarkers, function(curMarker){
curMarker.setMap(null);
google.maps.event.clearInstanceListeners(curMarker);
});
_currentMarkers = [];
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
if(scope.markers.length==0){
map.setCenter({lat: 41.90, lng: -87.65});
return;
}
_.forEach(scope.markers, function(markerData){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude),
map: map,
icon:markerData.icon
// title:markerData.data['Growing Site Name'].answer
});
bounds.extend(marker.position);
var infoWindowElement;
$compile(markerData.infoWindow)(scope, function(cloneElm){
infoWindowElement = cloneElm[0];
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(infoWindowElement);
infowindow.open(map,marker);
});
_currentMarkers.push(marker);
});
map.fitBounds(bounds);
});
},100)
}
};
});
})();
Usage would be something like:
<it-simple-google-map
overlays="model.mapOpts.overlays"
markers="model.mapOpts.markers"
trigger-resize="resizeMap">
</it-simple-google-map>
In my implementation here I'm actually only ever creating 1 map object and just appending it wherever this directive is found, so this can't work with more than one on screen but was an optimization that was good for my project. If you move the creation of the map object inside the link function then you'd get one created every time the directive is encountered for compiling.
The trigger-resize is a bit of a hack to make a call on the maps function for resizing itself when the directive is being re-used with different container sizes on different pages.
Just noticed I also only had this deal with taking a set of markers and then fitting to bounds as the means to set the location but if you're interested in building on this let me know and can help add the parts to deal with center/zoom appropriately.