Google Map not showing

1

I am new to ionic and I have copied the code from the ionic map example to my project(modified version of the tab example). But the google map is not showing, what have I done wrong?

I have this:

<ion-view view-title="NearBy">
  <ion-content class="padding">
   <div id="map" style="width:100%; height:100%" data-tap-disabled="true"></div>
  </ion-content>
</ion-view>

I have this in my app.js:

.controller('NearbyCtrl', function($scope, $ionicLoading, $compile) {
  function initialize() {
    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')
  };
  
})

I have this in my style.css:

#map {
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}
2

Take a look at this article: http://www.gajotres.net/using-google-maps-with-ionic-framework/

It uses a different approach plus it has 2 working examples for you to play with.

1 Like
3

You can specify scroll=“false” for ion-content element.

4

Tried to dissect it and put different parts to different files of my ionic app, but still the map does not show…

5

Have u tried ionic.Platform.ready(initialize); instead of google.maps.event.addDomListener(window, ‘load’, initialize);?

Here is my code:
controller.js:

.controller('NearbyCtrl', function($scope, $ionicLoading, $compile) {

  function initialize() {
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
        console.log('Here');
        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;
      }
      ionic.Platform.ready(initialize);
      
        $scope.centerOnMe = function () {
        console.log("Centering");
        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')
      };

nearby.html:

<ion-view view-title="NearBy">
  <ion-content>
  	<div id="map" data-tap-disabled="true"></div>
  </ion-content>
</ion-view>

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'
angular.module('starter', ['ionic', 'starter.controllers'])

.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);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.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.nearby', {
    url: '/nearby',
    views: {
      'nearby': {
        templateUrl: 'templates/nearby.html',
        controller: 'NearbyCtrl'
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/nearby');

});

index.html:
add this

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

tabs.html:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab title="Near By" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/nearby">
    <ion-nav-view name="nearby"></ion-nav-view>
  </ion-tab>


</ion-tabs>

style.css:
somehow percentages don’t work for me.

#map{
 	height: 500px;
 }

Hope it works for you, just started out in ionic myself!

1 Like