user2604150 user2604150 - 9 days ago 4
AngularJS Question

Ionic Framework does not show Google Maps

I'm trying to learn Ionic Framework and I'm stuck on Google Maps part.
I have been simply trying to display a map on the screen but instead I see a white screen.
Any help will be appreciated!

Here is my index.html code:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>YOE</title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/controllers.js"></script>
<script src="js/index.js"></script>
<script src="cordova.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAJJYLVx6vFBLDO8EUA5RNAPtqIzI27HY0&sensor=true"></script>

</head>

<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>


And here is my index.js code:

angular.module('app', ['ionic', 'app.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.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})

.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('menu.jukebox', {
url: '/jukebox',
views: {
'menuContent': {
templateUrl: 'templates/jukebox.html',
}
}
})
.state('venues', {
url: '/venues',
templateUrl: 'templates/venues.html',
controller: 'VenuesCtrl'
})
.state('venues.venueList', {
url: '/venueList',
views:{
'venueDetails': {
templateUrl: 'templates/venueList.html',
controller: 'VenueListCtrl'
}
}
})

.state('venues.venueMap', {
url: '/venueMap',
views:{
'venueDetails': {
templateUrl: 'templates/venueMap.html',
controller: 'venueMapCtrl'
}
}
});

$urlRouterProvider.otherwise('/sign-in');

});


controllers.js:

angular.module('app.controllers', [])

.controller('SignInCtrl', function($scope, $state) {

$scope.signIn = function(user) {
console.log('Sign-In', user);

/*

Authenticate user through Firebase, if authenticated, go to menu.jukebox state.
*/
$state.go('venues.venueList');
};
})

.controller('VenuesCtrl', function($scope){

$scope.hideBackButton = true;
})

.controller('VenueListCtrl', function($scope){

/*
Dummy array for venues. It will be changed with the data from the server.
*/

$scope.venues = [
{ id: 1, name: 'Lucky Strike San Fransisco', distance: '0.3 km', image: 'http://wtc15.com/sites/wtc15.com/files/cr-collections/7/100x100/valamar-venue1.jpg' },
{ id: 2, name: 'Match', distance: '0.7 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/Ironside-Oyster-San-Diego-Venue-3.jpg' },
{ id: 3, name: 'Supercell', distance: '0.9 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/paris-event-venue-4.jpg' },
{ id: 4, name: 'The Melt', distance: '4 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/belize-wedding-venue-3.jpg' }
];
})

.controller('venueMapCtrl', function($scope, $ionicLoading) {
console.log('map', 'reached that far');

google.maps.event.addDomListener(window, 'load', function() {

var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});

$scope.map = map;
});

});


venues.html:

<ion-view view-title="Venues" hide-back-button="true">
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" ui-sref="venues.venueList">
<i class="icon ion-ios-list"></i>
List
</a>
<a class="tab-item" ui-sref="venues.venueMap">
<i class="icon ion-map"></i>
Map
</a>
</div>
</div>
<ion-nav-view name="venueDetails"></ion-nav-view>
</ion-view>


venuesMap.html:

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


venuesList.html:

<ion-view view-title="VenueList">
<ion-content style="padding-top: 50px;">
<div class="list">

<a ng-repeat="venue in venues"
href="#/{{venue.id}}"
class="item item-thumbnail-left">

<img ng-src="{{ venue.image }}">
<h2>{{ venue.name }}</h2>
<br>
<p>{{ venue.distance }}</p>
</a>

</div>
</ion-content>
</ion-view>


style.css:

.scroll {
height: 100%;
}

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

Answer

I solved the problem with the help of this page. The problem was Ionic's code sample. Better use:

google.maps.event.addDomListener(window, 'load', initialize);

Than,

ionic.Platform.ready(initialize);