Tab with Map intergration

ionic-v1
1

Hi I have been trying to get a map loaded on a tab for awhile. I have looked at some of the examples but none of them have an example of a map on a tab. The map code works when placed into a simple html file and loaded. But when the same code is placed on the tab it will not show the map. I started with the tabs sample application and just copied in a map example from a website. I think the issue might be that the tab is a view and it needs some type of container for the html code. But I am not exactly sure I am a newbie at this.
I have the complete source code below. I removed my google key from the script that is the only change to the code below.

`

html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% }
`
2

I have te same problem,

I use this: http://codepen.io/ionic/pen/uzngt
but in tab not load
Can someone lend a hand?

3
4

It works thanks a lot =)
But the markers not work :frowning:

5

Did you start off with the default tab example application? I am trying to put the changes into that application. I only need one tab in my case. Does the JS need to be in the controllers.js? I am sorry I am new to this coding.

6

I added this to the tab page when it loads

  <html ng-app="starter">

<title>Tabs Example</title>

<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
      rel='stylesheet' type='text/css'>
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=weather,visualization&sensor=false&language=en&v=3.14"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js"></script>

7

Use this exemple contain two tab, but only tab 2 containing the map:

8

I think my app.js file is the reason why the map is not rendering on the page.
In the example angular.module is:

angular.module('ionicApp', ['ionic','google-maps'])

my angular.modue is

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

When I change it to the example it won’t compile. I am trying to modify one page of the tabs example to include the one map. I am sure I am doing something wrong with the app.js file. I copied the css file exactly. I replaced the tab-dash file from the tabs example with the code from code pin. I then modified it to change the names of the tab. I just made it “dash” where it used to say “about”

9

I was with some similar problems, I still studying all this framework together with Angular JS, I’m still beginner.

As I was starting my project, I decided to use the entire code of the example of aaron​ksaunders.
and it is running, and my JS is the same as example, with a single JS content of app.js and controllers.js.
Advise you you to do the same or studying for a time Angle JS

10

Thanks for your help. I took your advice and just used the code from the example. It worked in the chrome browser but it didn’t work on the phone. Were you able to get the code to work on the phone? The map doesn’t render on the phone. But the application does come up.

11

Is it there but just not visible? Ie. if you set the Height to 200px can you see it?

12

Lack of support on this forum…