Buttons in map_canvas

[gigiojr]

I create some buttons with ngFor inside map_canvas div, but, sometimes, they aren't clickable and, when I use double click over buttons, the zoom map happen. Sometimes, some buttons are clickable and others aren't, on the same screen. I tried creating static buttons, without ngFor, but the problem also happened.

The buttons are to change GroundsOverlays on map and the problem happen when I create some polylines, remove them, and create again.

What's possible?

[wf9a5m75]

What is the ngFor? And don't specify the position css property.

You can inspect where is clickable on the plugin using map.setDebuggable(true). The green and red regions are clickable. https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#mapsetdebuggable

[wf9a5m75]

@gigiojr Any update? If no, we will close this issue.

[gigiojr]

Sorry man, I did a little tests with map.setDebuggable(true) and I think that the problem can be in CSS. I'm going to do more tests on weekend and reply here.

Answering your first question: ngFor is a directive of the Angular 2 used in the Ionic 2. I use him to do a loop in a array and create buttons on screen with names of the elements of array.

[gigiojr]

I tested and I really don't know what's happening because the problem doesn't have a clear explanation. Sometimes it happen, but sometimes not.

I'll wait for a stable version of Ionic 2 and test my app again.

Thank you.

[gigiojr]

Unfortunately, the problem is come back, but I still not have an explanation. I have an example with map.setDebuggable(true); that show the buttons with problem:

<div id="map-canvas">
    <div>
        <ion-searchbar placeholder="Buscar Local" showCancelButton="true" value="{{selectedTarget}}" (ionInput)="getItems($event)" (ionFocus)="searchFocus()" (ionCancel)="searchCancel()"></ion-searchbar>
        <ion-list [hidden]="!showItems">
            <ion-item *ngFor="let item of items" (click)="chooseTarget(item)">{{ item.label }}</ion-item>
        </ion-list>
    </div>
    <div [hidden]="showItems">
        <div style="width: 30px; margin-right: 31px; bottom: 150px; right: 0; position: absolute;">
            <button class="badge" [hidden]="getLevels('1')" (click)="changeLevel('1')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">1</button>
            <button class="badge" [hidden]="getLevels('2')" (click)="changeLevel('2')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">2</button>
            <button class="badge" [hidden]="getLevels('3')" (click)="changeLevel('3')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">3</button>
            <button class="badge" [hidden]="getLevels('4')" (click)="changeLevel('4')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">4</button>
        </div>
        <div style="width: 30px; margin-right: 41px; bottom: 30px; right: 0; position: absolute;">
            <button ion-fab color="secondary" style="margin-bottom: 10px; margin-top: 10px;" (click)="getMyLocation()">
                <ion-icon name="locate"></ion-icon>
            </button>
        </div>
    </div>
</div>

Screen of the app on Nexus 5 (Android 6.0.1)

[wf9a5m75]

map.refreshLayout() ?

[gigiojr]

I created a new button below input to do map.refreshLayout() and the result is the same before and after refresh: Html:

<div id="map-canvas">
    <div>
        <ion-searchbar placeholder="Buscar Local" showCancelButton="true" value="{{selectedTarget}}" (ionInput)="getItems($event)" (ionFocus)="searchFocus()" (ionCancel)="searchCancel()"></ion-searchbar>
        <ion-list [hidden]="!showItems">
            <ion-item *ngFor="let item of items" (click)="chooseTarget(item)">{{ item.label }}</ion-item>
        </ion-list>
    </div>
    <div [hidden]="showItems">
        <button ion-fab color="secondary" style="margin-bottom: 10px; margin-top: 10px;" (click)="refreshMap()">
            <ion-icon name="locate"></ion-icon>
        </button>
        <div style="width: 30px; margin-right: 31px; bottom: 150px; right: 0; position: absolute;">
            <button class="badge" [hidden]="getLevels('1')" (click)="changeLevel('1')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">1</button>
            <button class="badge" [hidden]="getLevels('2')" (click)="changeLevel('2')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">2</button>
            <button class="badge" [hidden]="getLevels('3')" (click)="changeLevel('3')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">3</button>
            <button class="badge" [hidden]="getLevels('4')" (click)="changeLevel('4')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">4</button>
        </div>
        <div style="width: 30px; margin-right: 41px; bottom: 30px; right: 0; position: absolute;">
            <button ion-fab color="secondary" style="margin-bottom: 10px; margin-top: 10px;" (click)="getMyLocation()">
                <ion-icon name="locate"></ion-icon>
            </button>
        </div>
    </div>
</div>

Javascript:

refreshMap(){
    this.map.refreshLayout();
    console.log("refresh");
}

Chrome Inspect: However I verified that when I click on buttons in Chrome Inspect screen, they work!

[wf9a5m75]

I can't understand your app behavior perfectly, but it seems you hide thr buttons bu default, then shows the buttons when you need (maybe they are for indoor map?)

So do you execute map.refreshLayout() after changing the visibility? You need to do this everytime by yourself in v1.

[gigiojr]

You are right about buttons (the number are for indoor map and the other is my location) and hide, but I also tried without hide and I had the same problem:

<div id="map-canvas">
    <div>
        <button ion-fab color="secondary" style="margin-bottom: 10px; margin-top: 10px;" (click)="refreshMap()">
            <ion-icon name="locate"></ion-icon>
        </button>
        <div style="width: 30px; margin-right: 31px; bottom: 150px; right: 0; position: absolute;">
            <button (click)="changeLevel('1')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">1</button>
            <button (click)="changeLevel('2')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">2</button>
            <button (click)="changeLevel('3')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">3</button>
            <button (click)="changeLevel('4')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">4</button>
        </div>
        <div style="width: 30px; margin-right: 41px; bottom: 30px; right: 0; position: absolute;">
            <button style="margin-bottom: 10px; margin-top: 10px;" (click)="getMyLocation()">
                <ion-icon name="locate"></ion-icon>
            </button>
        </div>
    </div>
</div>`

About map.refreshLayout() I tried automatically (when the screen changes) and manually (with button on the top, look at the image above) and the result is the same error. My objective is simple: I need one button on bottom right and some buttons above his, like the images. I really don't know what's happen, but why do the buttons work on Chrome Inspect, where don't have map, but on my Nexus not?

[wf9a5m75]

Could you share your project using git service (github or bitbucketl?

[gigiojr]

No, I couldn't, because it's a private project and I don't have permission, sorry.

However I created a new project with the screen that I need. The map is blank screen, but the problem with buttons is happening.

The project use IonicFramework rc2 and tested in Nexus 5.

If you want, we can to talk in private too.

[wf9a5m75]

Sorry, I forgot to follow up this issue. I will check your test repo after go back to my home.

[wf9a5m75]

@gigiojr Sorry, but I'm not familiar with ionic at all. How to build your project?

Please provide setup instruction like this project. https://github.com/ZiFFeL1992/maps-v2

[gigiojr]

I tried but I couldn't run the project because he was created with Ionic rc0 (deprecate) and I'm using Ionic rc3.

Recently, when I updated Ionic to rc3 I did some tests in my main project and I really don't know how, but it worked with some changes. I tried the same code to example that I sended to you, but it didn't work. So my project works, but the example in my repository not.

I opened a issue#9318 in Ionic's page because I think that can exist something of the Ionic criating a conflict with your plugin, but I'm not right.

[wf9a5m75]

So, is the issue of your project solved?

[gigiojr]

My main project is works until now (the problem cans come back, already happened once, but I really hope not). In the MapTest that I created for this issue the problem still happen. I also didn't have any answer of the Ionic suport until now.

[wf9a5m75]

Ok, so how can I build your example project? As I said above, I'm not familiar with ionic at all. Please instruct how to build your repo.

[gigiojr]

Sorry, I forgot it. Try it:

$ npm install -g cordova ionic
$ git clone https://github.com/gigiojr/mapTest.git
$ cd mapTest
$ npm install
$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="xxx" --variable API_KEY_FOR_IOS="xxx"
$ ionic platform add android
$ ionic run android --device

Sometimes, you need run more than once. Look the log.

[wf9a5m75]

You repo does not have the www folder and your test code. This is not valuable for testing.

[gigiojr]

When you run the app with ionic run android --device the app is compilate and the folder www is create.

[wf9a5m75]

But $ ionic plugin add cordova-plugin-googlemaps ... command fails because there is no www directory. And ionic platform add android command faces many error.

Please commit the files after ionic run android --device

[gigiojr]

I think that this wasn't supposed to happen. I sended the folder www. You can also start a ionic blank project with $ ionic start --v2 myApp blank, add plugins and platform and past my code in /src/pages/home/.