Google maps not displaying "angular-google-maps"

ionic-v1
1

Im trying to add google maps in my app but whenever I call it using angular-google-maps , it is not displaying. in browser working well but device Android not work.

repository: https://github.com/zenvisuals/ionic-angular-google-maps

html

<ion-content class="has-header">
	<div id="map_canvas">
	    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
	    	<ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
        	</ui-gmap-markers>
	    </ui-gmap-google-map>
	</div>
  </ion-content>

js

.controller('BrowseCtrl', function($scope, $ionicSideMenuDelegate, $cordovaGeolocation){

  $ionicSideMenuDelegate.canDragContent(false)
  $scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 8 };
  $scope.options = {scrollwheel: true};
  $scope.markericon = "img/moose.png";
  $scope.markers = []
  // get position of user and then set the center of the map to that position
  $cordovaGeolocation
    .getCurrentPosition()
    .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
      $scope.map = {center: {latitude: lat, longitude: long}, zoom: 16 };
      //just want to create this loop to make more markers
      for(var i=0; i<3; i++) {
        $scope.markers.push({
            id: $scope.markers.length,
            latitude: lat + (i * 0.002),
            longitude: long + (i * 0.002),
            icon: $scope.markericon,
            title: 'm' + i
        })
      }
      
    }, function(err) {
      // error
    });
});

css

#map_canvas {
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
}

.scroll {
	height: 100%;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
2

Hi @cmauroie,
Here is my solution:
Make sure to include these in your index.html:

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='lib/lodash/lodash.min.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.min.js'></script>

js:

.controller('BrowseCtrl', function($scope, $ionicSideMenuDelegate, $window){

  $ionicSideMenuDelegate.canDragContent(false)
  $scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 8 };
  $scope.options = {scrollwheel: true};
  $scope.markericon = "img/moose.png";
  $scope.markers = []
  // get position of user and then set the center of the map to that position
  $window.navigator.geolocation.getCurrentPosition(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
      $scope.map = {center: {latitude: lat, longitude: long}, zoom: 16 };
      //just want to create this loop to make more markers
      for(var i=0; i<3; i++) {
        $scope.markers.push({
            id: $scope.markers.length,
            latitude: lat + (i * 0.002),
            longitude: long + (i * 0.002),
            icon: $scope.markericon,
            title: 'm' + i
        })
      }
      
    }, function(err) {
      // error
    });
});

$cordovaGeolocation doesn’t work for me most of the time which is why i use $window.navigator.geolocation.getCurrentPosition() instead. Hope it works for you!

3

Have you debugged your application? Find more about it here.

Depending on your Cordova version (4+), you may need to include a correct Whitelist meta tag, maps will not work without it.

In few words (rest you can find on a link below), Cordova 4+ comes with a Whitelist Security plugin by default. But some services require additional HTML5 security meta tag. Whitelist GitHub page offers some examples, but none of them works with Google Maps.

Correct one and better description can be found here.

I’ve noticed you’re also not using your code inside a Cordova device ready event or Ionic ready event. Most of the time they are not needed on desktop browsers because your browser will be ready before map code is reached. But on a smartphone your code will trigger before device ready event can trigger.

Last but not least, make sure your internet connection is on, you would be the first developer to forget such a thing.

4

Thanks, it worked for me with a correct goal Whitelist

5

Glad to be of help :smile:

6

Hi zachary545 I am having a problem my app when round the cell can not get the data from my GPS or even be active GPS I do not get to have the same success that opening the phone chrome google 'm using inapp plugin and I think your code will me help u could move me to apply in my app ?

7

Hil All Experties

I have too same problem . can you please explain what is your correct goal whitelist