Google map work on web but not work device


#1

make a tab for google maps. but it doesn’t work on device .
please help me:sob:


#2

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);
        });
});

#3

i think https://maps-api-ssl.google.com/maps/api/js?libraries=places is blocked by content security policy and whitelist plugin.


#4

what can I do for this app??


#5

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/#network-request-whitelist

you have to allow your app to send requests to google maps api


#6

hmm… it doesn’t work on device.


#7

could you debug your device? if there are any information in js console (warnings/errors)


#8

can you debug my code?? link: https://drive.google.com/file/d/0BzYt08Z-OWsjcDRMam8wdVFKbE0/view?usp=sharing

i use device : nexus 5x


#9

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.


#10

{“app_id”:“eec891da”,“api_key”:“eda091647122b01dbeadbc2b8135c4ab2061c22356580d2c”}


#11

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();
}