Button over Maps in Ionic 6/Ionic Angular

Ionic Framework Ionic Angular
1

What’s the proper way to get a button rendered over a Google Maps div in Ionic 5? I’ve tried the following on an HMTL page, but the button appears only briefly, once the Maps div is rendered the button disappears.

<ion-content id="mainContent">
  <div #map id="map">
    <div class="action-buttons">
      <ion-button id="button1" color="primary" text-only style="z-index: 999">
        Button 1
      </ion-button>
    </div>
  </div>
</ion-content>

EDIT: Uses ionic-native for google maps, Cordova for geolocation though Capacitor plugins are used in some places.

2

Are you using Cordova or Capacitor?

3

Pretty sure its Capacitor, at least for the plugins related to the map/Geolocation. EDIT: Nope its definitely Cordova, my bad

4

Maybe put the button outside the map div and wrap both in one div?

I am not sure but maybe google maps is not expecting anything inside?

There must be some hints on the web for this - a fairly common situation

Edit: Controls  |  Maps JavaScript API  |  Google Developers

5

I agree, and there seem to be plenty of people running into the issue, to the point where there’s pretty standard advice on it. Sadly none of the methods I found worked. I tried your suggestion, the button renders but the map does not.

6

I have found (what I believe to be) a solution! Moving the button div out of the map div and adding the attribute slot="fixed" to the button seemed to work. No clue why. Final code looks like this:

<ion-content id="mainContent">
  <div #map id="map"></div>
  
  <ion-button id="button1" slot="fixed" color="primary" text-only>
    Button 1
  </ion-button>
</ion-content>
1 Like
7

You could have used ion-fab that would have taken a load off you for Positioning the buttons as overlays…