Scrolling ion-content over my google-map :)

ionic-v1
1

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 :smile:

<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 ?

2

Anyone else with this issue ?

3

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

4

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.

5

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 ! :smiley: 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 ?

6

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

7

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 ?

8

@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>
9

@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…

10

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

11

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

12

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?

13

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

14

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

15

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

I turned it on all ways but not the right haha

16

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.

17

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.

18

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

19

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

20

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

image
photo_2017-01-13_22-47-33.jpg720×1280 60 KB

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

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

ISSUE CLOSED.
JUST DISABLE TRANSITIONS