Using google maps cordova plugin

ionic-v1
1

I’m tring to get ionic work with great cordova google map plugin: https://github.com/wf9a5m75/phonegap-googlemaps-plugin but no luck.

Here is my sample code. http://codepen.io/piernik/pen/rpahH
(Off course code will not work in browser - You have to put it into android)

I always get undefined variable (plugin). Example without ionic (angular) part is working great.
Adding AppCtrl.controller('indexCtrl', function($scope, plugin) { won’t fix problem.
How to do it?

5 Likes
2

I’m trying to use new ionic.DomUtil.ready but with no luck.

AppCtrl.run(function () {
    ionic.DomUtil.ready(function() {
        alert("ready");
        alert(window);  //has obcject
        alert(window.plugin); //undefined
    });
});

In google map’s plugin js I see that it should be in window.plugin but it isn’t:

window.plugin = window.plugin || {};
window.plugin.google = window.plugin.google || {};
window.plugin.google.maps = window.plugin.google.maps || {};
3

When I added to the main doc before </body>:

<script type="text/javascript">
    var map;
    document.addEventListener("deviceready", function() {
        var div = document.getElementById("map_canvas");
        alert('deviceready');
        alert(window);
        alert(window.plugin);
        alert(plugin);
        map = plugin.google.maps.Map.getMap(div);
    }, false);
</script>

All is working.
So ionic.DomUtil.ready() != deviceready

Working code is:

AppCtrl.run(function () {
    ionic.DomUtil.ready(function() {
        document.addEventListener("deviceready", function() {
            var div = document.getElementById("map_canvas");
            alert('deviceready');
            alert(window);
            alert(window.plugin);
            //alert(plugin);
            map = window.plugin.google.maps.Map.getMap(div);
        }, false);
    });
});
4

Hi Piernik, thank you for using my plugin.
I’m not familiar with the ionic, but I want to fix this issue.
Could you give me any advices?

2 Likes
5

Hi,

this code works so there is no error:

.run(function () {
        ionic.Platform.ready(function () {
            if (window.plugin) {
                map = window.plugin.google.maps.Map;//.getMap(div);
            }
        });
    });
6

Ok, thank you :smile:

7

I’m having the same problem. The plugin works on android, but not on IOS.
On IOS it keeps saying that the plugin is undefined. On android there is no problem, the map loads.
Tried everything:

  • Removing the plugin,
  • removing the ios platform
  • creating a new app,
  • above method of loading the plugin.

strange this that everything works fine when I create a cordova app instead of an ionic app. (folowed the tutorial on: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-Mac)

8

Just tried using that code and it doesn’t work on iPhone. window.plugin is always undefined.

9

Okay, I will try the test for ionic.

10

Your plugin looks really good @wf9a5m75! Would definitely love to see it supported in Ionic!

11

phonegap-googlemaps-plugin is updated.
As of v1.1.3, it should work with Ionic Framework, but there are some points you need to take care.
- Can not follow the scroll:
Ionic Framework uses css transition for scrolling,
the plugin can not follow the position of the map div.
Use map.refreshLayout() to re-position the map.

- Can not hide the map automatically when the current tab has changed:
The plugin overlays the map above the HTML layer,
the map always displays in front of HTML.

Example code:

2 Likes
12

@wf9a5m75 You are awesome!

I have been struggling with the web version of google maps for a month, it’s slow, need to handle async stuff, and the performance is really really bad on a mobile device.

Playing with your plugin now in my ionic app and happy so far.

Thanks. :smiley:

13

Indeed, good stuff! Has anybody figured out how to deal with covering up other HTML content–It’s covering up my ion-footer-div? I’ve currently got the height of my map_canvas set to 100vh, which unfortunately isn’t respecting its containing div, ion-content.

14

Scratch that - changing the height to 100% fixed that. Any pro tips on getting an ion-side-menu to cover up the map though?

15

The map displays above the browser.
You can not display any HTML contents above the map currently.

For temporally solution, hiding the map.
Or generate the image from the map using .toDataUrl(), and hide the map, then display the image.

16

@wf9a5m75 wf9a5m75 awesome! Just saw your post here - thanks for going out of your wy to support Ionic apps!

17

Hello, i’m trying very hard to use this plugin with ionic. I tried your code but this is what it render. Do you have any idea why?

18

Without a code sample or any explanation of what you did I can almost guarantee that answer is no.

19

It seems your API key is wrong.

20

yes definatelu is because of wrong API key, had the same issue.

Also can you show us the correct way to hide the map on page transition in ionic?