Using google maps cordova plugin

ionic-v1
21

I’m not sure how to capture the page changing event, but hiding the map is “map.setVisible(false)”

The most problem is Ionic uses the CSS transition.
W3C defines the “transitionend” event, but they don’t define “transitionstart” event.
So I can not catch any event when page transition occurs (as far as I know).

stack overflow: http://stackoverflow.com/questions/2794148/css3-transition-events

22

No worries, I already have it working using an event listener without problems, I was just wondering if there was a better way of doing it like at the onLoad/onExit event of the UI router.

In any case, I’m posting my way of doing it here so it might come handy for other users having this issue as well:

 //Remove Map on Page Change
        $scope.$on('$stateChangeStart',
            function () {
                //Code to call before state change is complete.
                ...
               //Remove Map 
               map.remove();
            })
1 Like
23

I stand corrected: you could actually diagnose the problem with that lengthy trail of 1 breadcrumb he provided…

24

Whats the final solution to place the map? If ma make someting like this:

<ion-view title="Map">
  <ion-content scroll="false" padding="true" data-tap-disabled="true">
    <div style="width:100%;height:100%; background-color: #e9e9e9;" id="map_canvas"></div>
  </ion-content>
</ion-view>

If I’m changing the div to

<div style="width:300px; height:200px; background-color: #e9e9e9;" id="map_canvas"></div>

I’m getting this:

My Map get painted 100% of the display in both directions.

regards

Patrick

25

@patrickdu
I’m not sure why this happen.
But the plugin v1.2.0 changes the mechanism.
I think this issue is fixed in v1.2.0.

Please check it out.

26

@wf9a5m75 What I found out is, if I’m wrapping every thing in a timout:

$timeout(function () { ... },500);

It works fine, it seams that if we use percentage sizing the div has the wrong size on creation of map.

regards

Patrick

1 Like
27

I see, thank you for letting me know.

28

@wf9a5m75 Do you have a Ionic sample for the new Version 1.2.0 I can’t it get work. I think the problems are the background colors of iconic.

29

Is there a way to use this plugin with the side menu template? Because I’m testing but the map is showing behind the side menu even when the side menu is not toggled.

30

Hi @xMarston, please use map.setClickable( true / false)

https://googledrive.com/host/0B1ECfqTCcLE8R0h6T3dIdWFBOHM/sidebar.gif

1 Like
31

@patrickdu
I’m not familiar with ionic, but Hirbod solves similar issue with OnsenUI.
Check out his code.

32

@wf9a5m75 everything is working with xcode 6 and ionic the problem was an other plugin.

regards

Patrick

33

@wf9a5m75

I tested this feature but still not working, I uploaded a photo to illustrate the problem:

The side menu is not toggled but the map is showing behind it.

1 Like
34

Te ocurre el mismo problema sin el mapa? Tiene bastante pinta de que sea un problema de Absolutes.
El funcionamiento normal del side menu es el de trasladar todo el contenido hacia un lado para mostrar el menú. El menú nunca se mueve de sitio, y a mi me parece que es lo que te está ocurriendo, el menú está cerrado, pero se muestra sobre el content.

Prueba a eliminar el mapa y haz la prueba de ver si te sigue ocurriendo. En cualquier caso, pon z-index: 0 a la class .menu en ionic.css y z-index superior a ion-content.

Resumiendo, no creo que sea un error del plugin.

35

Es problema del mapa que crea el plugin, poniendo un mapa desde la api de google maps con js no hay problema y no he tenido este problema en ninguna vista más.

36

Si tienes un android 4.4 puedes inspeccionar elemento desde Chrome, y ahí compruebas si el elemento que crea el plugin es un aboslute y su z-index. Me extrañaría mucho que fuera otra cosa.

37

@Bonda, No parece tener nada raro el div del mapa:

38

@wf9a5m75

Thanks for your Plugin! Seems to work great and I can’t wait to start using it…

However, I’m getting the same results as @xMarston with the side menu template…

I think the issue might be I just don’t know how to instantiate the map within the ionic framework…

39

Can you share your whole code using Github?

40

Interestingly enough…

I wanted to create a map on a button press/action so I added in to my map.js:

function myFunction() {
    var div = document.getElementById("map_canvas");
    map = plugin.google.maps.Map.getMap(div);
}

Then I added in:

<div onclick="myFunction()">Click me for a map!</div>

When the user clicks/touches the div, the map gets created, but the side menu gets overlayed over the map.