Content not showing


#1

I’m a newbie when it comes to using Ionic, so this may be a simple fix. The ionic framework loads just fine, but the content in the view is not showing. I’m using Google Maps for AngularJS (link) and followed the instructions to the letter.

Here is my tab content:

<ion-view title="Maps">
  <ion-content class="has-header">
	<h2>Map</h2>
	<google-map center="map.center" zoom="map.zoom"></google-map>
  </ion-content>
</ion-view>

Here is the content of index.html

<!DOCTYPE html>
<link href="css/app.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='cordova.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='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='js/underscore/underscore.js'></script>
<script src='js/angular-google-maps/dist/angular-google-maps.min.js'></script>
<script src='js/index.js'></script>
Back

And here is the content of my index.js file, which contains the code for the module:

var map = angular.module('myApplicationModule', ['google-maps']);

$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8
};

Any help would be appreciated!


#2

Did you work this out? Sorry, I’m a bit behind on getting to questions.

If you haven’t, then the best thing to do is setup a CodePen sample.

You can fork this one : http://codepen.io/ionic/pen/vBeqF

There are a LOT of Google Maps posts in the forum. Many have working samples you might want to examine.