How to make google maps with button and labels on an ion-grid clickable?

Ionic Framework ionic-v3
1

Hi,
I’m trying to create an Ionic 3 app with a full screen cordova google maps with buttons and labels as a layer on top of the map. I would like to associate click events to the buttons and labels. Also, the map underneath should be clickable wherever the map is not covered by buttons or labels. I used ion-grid for my button and labels layout along with a standard div for the map. Right now, the button and labels are generating click events. But, the map below is not clickable, i.e., for example, I can’t move the map if I touch it. I tried google search, stackoverflow & ionic forum search for a combination of ion-grid layout and google maps usage without much success. Here’s my home.html code…

<ion-content class="home">
  <div #map id="map" style="height:100%;">
    <ion-grid>
      <ion-row style="flex:1;">
        <button ion-button icon-only (click)="openMenu()">
          <ion-icon name="menu">
          </ion-icon>
        </button>
      </ion-row>
      <ion-row style="flex:1;">
        <ion-col col-8>
          <ion-item>
            <ion-label (click)="onStartLocation()">Start Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:4;">
      </ion-row>
      <ion-row style="flex:1;">
        <ion-col>
          <ion-item>
            <ion-label (click)="onEndLocation()">End Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:1;">
      </ion-row>
    </ion-grid>
  </div>

</ion-content>

Right now, the full map with 2 labels and a button get displayed. I can even click on the labels and the button when the above mentioned functions get called. But, the map is not clickable and doesn’t respond to touch events. How do I make the map clickable wherever it is not covered by button and labels?

2

Try the multiple_maps branch version.

$> git clone https://github.com/mapsplugin/cordova-plugin-googlemaps

$> cd cordova-plugin-googlemaps

$> git checkout multiple_maps

$> git pull

$> cd (project dir)

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add (path to)/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."
3

I already use multiple_maps version of the cordova google maps plugin.

4

You need to use 2.1.2-beta-20171231-2134

5

Thanks for your response. I tried installing the 20171231-2134 version of the plugin by following the steps you mentioned above. I still have the same issue. It didn’t fix the problem. I’m basically defining the ion-grid INSIDE the map div. Is that an issue? How to best write the template for a map with an overlapping ion-grid?

<ion-content class="home">
  <div #map id="map" style="height:100%;">
    <ion-grid>
    ...
    </ion-grid>
  </div>
</ion-content>
6

Please share your project files on GitHub. I will check it

7

Moving the map div inside ion-grid makes the map, button, and labels clickable. But then, the layout of labels gets disoriented.

<ion-content class="home">
  <ion-grid>
    <div #map id="map" style="height:100%;"> 
    ...
    </div>
  </ion-grid>
</ion-content>

Will create a sample project and upload to github.

8

I only accept the git repo. Otherwise, please debug it by yourself.

9

I did like this:

<ion-content>
	<div #mapForWeb id="mapForWeb"></div>
</ion-content>
10

Thanks for your response. I’ve created a git repo. The git repo is located at:

The labels are not positioned properly if you run the above project. The Start Location and End Location must be spaced apart. It looks like they are stacked one below the other.

Please let me know if you need any more info.

11

I haven’t checked your repo,
but the maps plugin does not modify any html element location.

If your problem is location of your buttons, that’s not the maps plugin
problem.

12

OK, thanks. I’ll open a new topic with that issue then. Thanks a lot for your responses.

13

Thanks for your response. But, I have an ion-grid inside ion-content, enclosing map’s div. Wondering how ion-grid’s rows and the full screen map will interact to produce the desired layout. I’ve opened a separate topic on this issue as I could get the map to be clickable along with buttons and labels. Now the issue is with placement of different elements. The new topic is at:

14

That’s not the maps plugin problem. Please ask to someone