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
Related
Below is my Angularjs routing code, but unfortunately i am getting error when i am running code.
<!DOCTYPE html>
<html ng-app="routeApp">
<head>
<title>Routing - RouteParams</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div ng-view></div>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</body>
<script type="text/javascript">
var app = angular.module('routeApp',['ngRoute','ngSanitize']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login',
{
templateUrl:'loginformroute.html',
controller:'LoginController'
})
.otherwise({ redirectTo: '/login' });
// $locationProvider.html5Mode(true);
}]);
app.controller("LoginController", function($scope) {
$scope.login = function () {
alert(1);
};
});
</script>
</html>
and i am getting below error
$sce is included by default in angular 1.2+so you don't need sanitize anymore in order to get $sce. So use angular 1.2 or further version and remove sanitize script. Hope it will solve your problem
Move your scripts in header tag
<head>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</head>
Also consider the angular.route and angular version should be the same. So use this version ( you can get it from code.angularjs.org) instead of your version
I'm getting the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController
.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?
Here's my code: (Plunker link)
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config( function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/views/home.html',
controller: 'HomeController' })
.when('/login', { templateUrl: '/views/login.html',
controller: 'LoginController' })
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
resolve:{
_planets: function(myService)
{
console.log("asdas");
return myService.getRequestForPlanets();
}
}
})
});
SearchController.js
angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
$scope.message = 'This is Show orders screen';
$scope.planets=_planets;
console.log(_planets);
});
myService.js
angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{
$rootScope.loading = false;
this.getRequestForPlanets=function()
{
$rootScope.loading = true;
var deferred = $q.defer();
$http.get('https://swapi.co/api/planets')
.then(function(response){
$rootScope.loading = false;
console.log(response.data.results);
deferred.resolve(response.data.results);
})
.catch(function(response){
deferred.reject(response);
});
return deferred.promise;
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body ng-app="myApp">
<!-- ng-controller="myController" -->
<div class="spinner" ng-show="loading">
<div class="loader" ></div>
</div>
<div ng-view></div>
<section class="imgDiv">
<div class="container-fluid">
<!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
<div class="sn_scroll_btn slideInDown ">
<img src="images/scroll.png" alt="" class="test">
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/LoginController.js"></script>
<script type="text/javascript" src="controllers/SearchController.js"></script>
<script type="text/javascript" src="services/myService.js"></script>
<script type="text/javascript" src="controllers/HomeController.js"></script>
</body>
</html>
Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview
Your controller is being instantiated twice, once in your routes, in app.js here:
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
...
and again in your view in search.html here:
<div ng-controller="SearchController">
<p>{{message}}</p>
...
Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.
If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.
Hope that helps!
I'm using eclipse with angularJS for make the front-end of my app. Not first time I'm using angular but first time I'm using it with eclipse.
AngularJS plugin have been installed and I made the link between view and controllers. I convert my project to AngularJS project. Angular is working (an input ng-model="a" {{a}} does the job) but the chrome terminal give me an error :
Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=HomeController&p1=not%20aNaNunction%2C%20got%20undefined
index.html
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Mon Titre</title>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/MainController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/HomeController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/CategoryController.js"></script>
<script type="text/javascript" src="resources/js/angular/app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module("app", ["ngRoute"]); // Already tried to inject controllers
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/accueil.html',
controller: 'HomeController'
})
.when('/categories', {
templateUrl: 'pages/categorie-list.html',
controller: 'CategoryController'
})
.otherwise({
redirectTo: '/'
});
});
HomeController.js
var app = angular.module("app",[]);
app.controller("HomeController", function($scope){
$scope.bonjour ='I\'m home controller !';
});
CategoryController.js
var app = angular.module("app",[]);
app.controller("CategoryController", function($scope){
$scope.bonjour = 'I\'m category controller';
});
Both .html contains just one {{bonjour}}.
Thanks for your help and sorry for this low english !
In HomeController.js and CategoryController.js replace
var app = angular.module("app",[]); // create new app module
with
var app = angular.module("app"); // use existing app module
After that move app.js script before controller scripts:
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="resources/js/angular/app.js"></script>
<script src="resources/js/angular/controller/MainController.js"></script>
<script src="resources/js/angular/controller/HomeController.js"></script>
<script src="resources/js/angular/controller/CategoryController.js"></script>
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 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