make a tab for google maps. but it doesn’t work on device .
please help me:sob:
my index.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">
<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>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA5PZaQmJywGNG0nvpUhz1W6P9hF4rM6co",
authDomain: "beta1-d031d.firebaseapp.com",
databaseURL: "https://beta1-d031d.firebaseio.com",
storageBucket: "beta1-d031d.appspot.com",
messagingSenderId: "1058003517300"
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
</head>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es"></script>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script>
</body>
</html>
i want to use firebase for chat
style.css
.scroll { height: 100%; }
.map-container,
.google-map { height: 100%; }
#map-canvas { width: 100%; height: 100%; }
map.html
<ion-view title="Map">
<ion-content class="has-header">
<div class="map-container">
<div id="map-canvas"></div>
</div>
oi
</ion-content>
</ion-view>
map-old.html
<ion-view view-title="Map Example">
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Map Starter</h1>
</ion-header-bar>
<ion-content ng-controller="mapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
app = angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers', 'starter.services','firebase'])
//.run(function($ionicPlatform) {
// $ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
// if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
// cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// cordova.plugins.Keyboard.disableScroll(true);
// }
// if (window.StatusBar) {
// org.apache.cordova.statusbar required
// StatusBar.styleDefault();
// }
// });
//})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'mapCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/chats');
});
controllers.js
angular.module('starter.controllers', [])
.controller("ChatsCtrl", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = firebase.database().ref();
$scope.messages = $firebaseArray(ref);
$scope.send = function() {
$scope.messages.$add({
user : '의문의 사용자',
message : $scope.messages.message
});
$scope.messages.message = "";
}
$scope.remove = function(item) {
$scope.messages.$remove(item);
}
}
])
// code from http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/2/
//.controller('mapCtrl', function($scope, $cordovaGeolocation, $ionicLoading, ionicPlatform) {
// ionic.Platform.ready(function(){
// $ionicLoading.show({
// template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
// });
.controller('mapCtrl', function($scope, $cordovaGeolocation) {
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
});
i think https://maps-api-ssl.google.com/maps/api/js?libraries=places is blocked by content security policy and whitelist plugin.
what can I do for this app??
you have to allow your app to send requests to google maps api
hmm… it doesn’t work on device.
could you debug your device? if there are any information in js console (warnings/errors)
can you debug my code?? link: https://drive.google.com/file/d/0BzYt08Z-OWsjcDRMam8wdVFKbE0/view?usp=sharing
i use device : nexus 5x
could you push it to your ionic.io account? and send me the appid? so i do not have to build it on my own.
{“app_id”:“eec891da”,“api_key”:“eda091647122b01dbeadbc2b8135c4ab2061c22356580d2c”}
The place where your cordova.js is included is suspicious.
ionic start xxx blank --v2 will put it in the index.html body.
Try putting your script includes in the head section, so they are included before cordova.js .
Your project works in web, so you may not need this, but I referred to this link:
http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/
In home.ts, I had to call this.loadMap() from the ngAfterViewInit() hook to display the map. To do so, add
import { AfterViewInit } from ‘@angular/core’;
and modify
export class HomePage implements AfterViewInit { … }
and add a function to the class:
ngAfterViewInit(){
this.loadMap();
}