I have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose angular-google-maps
Now I try config it with ionic like this:
seems eveything is ok but why it dosen't work?
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</head>
<body>
<ion-header-bar class="bar-dark" >
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
$scope.options = {scrollwheel: false};
});
</SCRIPT>
</body>
</html>
You missed some stuff:
the link to angular-simple-logger.js (angular-google-maps has a dependency)
the CSS height for angular-google-map-container (see http://angular-ui.github.io/angular-google-maps/#!/use bullet number 7)
to convert raw.github.com to rawgit.com when linking directly to JS libraries on GitHub.
Here is the working snippet:
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<style>
#map_canvas {
width: 100%;
height: 100%;
}
.angular-google-map-container { height: 400px; }
</style>
</head>
<body>
<ion-header-bar class="bar-dark">
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 51.219053,
longitude: 4.404418
},
zoom: 14,
options: {
scrollwheel: false
}
};
});
</SCRIPT>
</body>
</html>
Related
contact.js --- this is angular file. i am trying to make my contact app .
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var rel = new Firebase('https://mycontact-app007.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(rel);
console.log($scope.contacts);
}]);
Index.html - this the index file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mycontacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContact</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
showing ReferenceError- Firebase is not defined
at new (contacts.js:13)
i am trying to make CURD operation app
I have simple scenario but still, doesn't work..:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Custom-->
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/lodash.js"></script>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/angular-simple-logger.js"></script>
<script type="text/javascript" src="/js/angular-google-maps.js"></script>
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
<script type="text/javascript" src="/js/app/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="/js/app/controllers/MainController.js"></script>
</head>
<body ng-controller="MainController">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</body>
</html>
app.js
var myapp = angular.module('myapp', ['uiGmapgoogle-maps']);
myapp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'MY_API_KEY',
// v: '3.28',
libraries: 'weather,geometry,visualization'
});
});
MainController.js
myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function (maps) {
$scope.maps = maps;
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 };
});
});
style.css
ui-gmap-google-map{
border: 1px dashed darkred;
width: 500px;
height: 300px;
display: inline-block;
}
.angular-google-map-container {
width: 400px;
height: 400px;
}
No errors in the console. The css is applying ok, the promise in the controller is working ok but no map is displayed.
The fact that the DOM is staying like that is bothering me :
<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
because on the example site I saw that angular is changing it like that :
<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>
(or something like that)
Any idea what am I doing wrong ?
Since your map is loading inside a promise, try using ng-if to render it conditionally (as specified here):
<ui-gmap-google-map ng-if='map.center'
center='map.center'
zoom='map.zoom'>
</ui-gmap-google-map>
Working demo here.
I found what is the problem, its because I have also included
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
After removing it, everything starts working normal.
The problem which i have been facing now is that after JSON.parse(localStorage.getItem('user_info')));
how can i put this string in $scope object ?
please suggest something for my problem.
Thanks in advance
You'll need to define an AngularJS controller and then bind it to your Ionic view with the ng-controller directive. Below is an example — I recommend playing around with it on play.ionic.io.
js
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">LocalStorage Example</h1>
</ion-header-bar>
<ion-content class="padding" ng-controller="MyController">
<h1>{{userInfo}}</h1>
</ion-content>
</ion-pane>
</body>
</html>
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
I added the google map plugin to my project with this command:
cordova plugin add cordova-plugin-geolocation
after i use this tutorial http://codepen.io/ionic/pen/uzngt ,i use in my page index.html but when i move this code in other page this code is dosen't worked
in the page index.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
ionic/angularjs js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
cordova script (this will be a 404 during development)
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/ngStorage.min.js"></script>
your app's js
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/Controllers/inscription.js"></script>
<script src="js/Controllers/Categories.js"></script>
<script src="js/Controllers/SousCategories.js"></script>
<script src="js/Controllers/Evenement.js"></script>
<script src="js/Controllers/RechercheEvent.js"></script>
<script src="js/service/services.js"></script>
google maps javascript
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
in the page carte.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->
<link href="/css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<script src="../lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="../js/ng-cordova-oauth.min.js"></script>
<script src="../js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="../js/ngStorage.min.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<!-- google maps javascript -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
my controller app.js
facebookExample.controller('carteController', function($scope, $ionicLoading,$cordovaGeolocation,$compile) {
function initialize() {
console.log("fonction googleMap");
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
my error:
This is the error msg.
Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (loader.js:1450)
at window.DoorLock.DoorLock.lock.unlock (loader.js:1450)
at Scope.parent.$get.Scope.$broadcast (loader.js:1444)
...
index.html
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src = "./js/prog.js" ></script>
</head>
<body ng-app = "magic_land" >
<ons-navigator var="captain" page="list.html">
</ons-navigator>
</body>
</html>
...
list.html
<div >
<ons-toolbar>
<div class = "center">All todoz</div>
</ons-toolbar>
<ons-list>
<ons-list-item>Apple</ons-list-item>
<ons-list-item>Banana</ons-list-item>
<ons-list-item>Carrot</ons-list-item>
</ons-list>
<p> {{5+5}} </p>
</div>
...
prog.js
var magic_land = ons.bootstrap('magic_land', ['onsen']);
Where is this error coming from?
Before
<body ng-app="magic_land" ng-controller = "magic_action">
<ons-navigator var="captain" page="list.html" >
</ons-navigator>
</body>
After
<body >
<ons-navigator var="captain" page="list.html" ng-app="magic_land" ng-controller = "magic_action" >
</ons-navigator>
</body>
Now that error is gone!
I know, this code is different from the question , but it was a tough error so i had to swap and rearrange my codes to find the source of error. Good luck!