Click events on buttons over google maps div?

Question

I’m trying to put a html button over the native cordova google maps div.

The problem is that the layer of the map is requesting focus continuously.

If I use the “setClickable(false)” event the buttons works correctly but the map is not usable.

Any way to do this?

Answer 1

Place the buttons inside of the div where the map is, like this:

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Map Demo</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <div #map id="map" style="height:100%;">
        <div class="action-buttons">
            <button color="primary" ion-button text-only>
                Button 1
            </button>
             <button color="primary" ion-button text-only>
                Button 2
            </button>
        </div>
    </div>
</ion-content>

And then place them where you want by setting the position of the container, to be an absolute value:

.action-buttons {
    display: block;
    width: calc(100% - 16px);
    position: absolute;
    top: 16px;
    right: 16px;
    text-align: right;
    z-index: 999;

    button {
        display: inline-block;
        margin: 4px;
    }
}