Scrolling ion-content over my google-map :)

Readok · August 7, 2014, 2:40pm

Hello !

Here the thing : I want to create a view with my map all over my tab like in this codepen.
My problem is that my little div containing my p is sliding underneath my map… z-index isn’t my friend here.
Here’s my body

<body ng-app="starter" ng-controller="MapCtrl">
<ion-header-bar class="bar-stable">
  <h1 class="title">Map</h1>
</ion-header-bar>

<ion-content scroll="false">
  <map on-create="mapCreated(map)"></map>
  
    <ion-scroll direction="y" class="hotel-view" on-scroll="onScrollHotelView()">
      <p>Just drag-up this text to make it move ! I'm trying to allow the scroll over the map ! Anyway if you have an idea ..</p>
      <p>I have also an ugly little space between my text and the footer !</p>
    </ion-scroll>
  
</ion-content>

Any idea to put it over the map in order to display details on google maps markers selected ?

Readok · August 8, 2014, 10:02am

Anyone else with this issue ?

voliva · August 8, 2014, 10:24am

So you want that when you scroll your p, the map gets hidden in the behind?

I can’t look for a solution, but I can give you a hint: The problem here looks like you have a container with 2 other containers: The map and the scroll-view, each one has it’s size and one is after the other. When you try to scroll, the scroll-view content gets hidden (overflow:hidden) when it goes out of the scroll-view container.

From here you can take a very dirty solution: put overflow: visible in the scroll-view container, but it’s really really dirty, and might put more bugs into your app.

What I would suggest is something like using absolute positioning on the map container to get it out from the size flow, let the scroll-view container take the whole space and put a div transparent spacer inside to make the text start right after the map. When the user scrolls up, your p should get on the map.

Hopefully this helps

bengtler · August 8, 2014, 10:42am

You could add your map directly as a child under your body-tag and the ion-content and anything in the ioncontent scrolls over your map.

I used this for an app.
I had some other map functionalities like set marker by touch/click and so on.
On this views i had to remove ion-content from the dom with ng-if.

After that you can drag your map, click on markers and so on.

Readok · August 8, 2014, 12:47pm

Thanks @bengtler & @voliva for your answers.

@voliva
I can see that my blocks are asides now, thanks. However, I tried your dirty solution Voliva, even if you informed me how dirty it was ! but It doesn’t suit me.

@bengtler
If i’m right, you suggest me to do something like this ?

<body ng-app="starter" ng-controller="MapCtrl">
// My header
    <ion-header-bar class="bar-stable">
      <h1 class="title">Map</h1>
    </ion-header-bar>

// My map
      <map on-create="mapCreated(map)"></map>

// My content over available to be scrolled over content
    <ion-content scroll="false">
        <ion-scroll direction="y" class="hotel-view" on-scroll="onScrollHotelView()">
          <p>Informations on my Google maps markers selected.</p>
        </ion-scroll>
    
    </ion-content>

Isn’t it ?

bengtler · August 11, 2014, 5:36am

yep ;).
It is not very beauty, but for me it worked.

Readok · August 13, 2014, 12:19pm

Hi,
Again trying to put this to work : I can’t put it in a good way… Moreover, my boss wanted me to use the Angular-google-maps so I’m trying to do this with it !
Aynone could help me with a plnkr or codepen ?

Readok · August 13, 2014, 1:34pm

@brengsekerz has talk about a but when I use it, nothing happens.
I’m a bit desperate.

Here’s my “new” code :

<ion-view title="Places">
	<ion-content overflow-scroll="true" ng-controller="InterestMapViewCtrl" scroll="false" ng-init="init()">

		<google-map class="interestsmap" draggable="true" center="map.center" zoom="map.zoom" options="map.options">
			<markers models="map.markers" coords="'self'" click="'onClicked'" fit="fit" doCluster="true">
				<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
					<div>
						<h4>{{ placeName(title) }}</h4>
						<p>
							{{ placeAddress(title) }}
						</p>
						<p>
							&nbsp;
						</p>
					</div>
				</windows>
			</markers>
		</google-map>
		
		<ion-scroll direction="y" class="hotel-view" on-scroll="onScrollHotelView()">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit recusandae aut, fugit in, sequi modi, eaque, temporibus quis odio dolores nemo ullam debitis?</p>
		</ion-scroll>
		
	</ion-content
</ion-view>

Readok · August 20, 2014, 3:59pm

@bengtler you said :

You could add your map directly as a child under your body-tag and the ion-content and anything in the ioncontent scrolls over your map.

I tried to but my content is now upon my map. Here’s my code :

<ion-view>
<google-map></google-map>
<ion-content overflow-scroll="true">
    <ion-scroll>
         here my content
    </ion-scroll>
</ion-content>
</ion-view>

My map is the first child of my ion-view and not in the content and I allow my content go upon my map with the overflow-scroll=“true”.

I don’t see what is going wrong with that…

bengtler · August 21, 2014, 6:50am

yep thats correct, but i thought you want to scroll the content over your map?

Readok · August 21, 2014, 7:56am

That’s exactly what I’m looking for
Would I have badly understood ?

bengtler · August 21, 2014, 7:58am

Yeah but if you content is “over” your map… it scrolls over your map right?^^
Or do you want to do something with your map annnnd content should scroll over it?

What is your usecase?

Readok · August 21, 2014, 8:12am

Here’s a little pic’ in order to synchronise
Thank’s for your time and patience by the way !

bengtler · August 21, 2014, 8:33am

Ah okay… something like a parallax effect inside of your app?

Readok · August 21, 2014, 8:56am

Yes something like.
I foolishly tought I could do this with a simple z-index, but no
My code still

I turned it on all ways but not the right haha

bengtler · August 21, 2014, 10:43am

Ah this is very difficult with a map. because for that, you need to put the map back in the ion-content.
But when you are on the map, there are own “touch”-handlings. Scrolling = moving the map and so on.

And i do not know, if something like this:
http://angular-stellar.tomchentw.com/
works on mobile devices like expected.

But what you want is in many native android apps the state of the art.

Would be nice to get feedback from you, if you have a solution ;).
I have to look deeper in the problem to solve it, but i do not have the time.

Readok · August 21, 2014, 12:38pm

Here’s a try working but on my project it’s not a simple google map.
In this try I use a simple map :

<ion-content scroll="false">
	<map on-create="mapCreated(map)"></map>
	<ion-scroll direction="y" class="hotel-view" on-scroll="onScrollHotelView()">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit recusandae aut, fugit in, sequi modi, eaque, temporibus quis odio dolores nemo ullam debitis?</p>
	</ion-scroll> 
</ion-content>

And in my final project I use an Angular google-map.
I don’t know if it’s breaking something.

bengtler · August 22, 2014, 5:33am

nope it breaks nothing but it is no help for your problem.
The google map directive is also only a wrapper for the standard maps api.

Greetz, bengtler

eyadfarra · June 23, 2016, 1:16pm

The all you need is using $ionicScrollDelegate
and disable scroll when ng-mousedown over google map
and enable scroll when ng-mousedown over some other

cybernatic · January 13, 2017, 6:04pm

Hello people!
im getting some glitches. Can anyone help with this?

First run ok, after i follow to WALKTHROUGH screen and back to map ive got this like screen

-------- UPDATE --------

ISSUE CLOSED.
JUST DISABLE TRANSITIONS