CODEWITHSUNDEEP
javascriptioscordovagoogle-mapsmeteor
Finglish
Finglish

Reputation: 9956

how to use google maps in meteor cordova app for IOS

I have been trying to get google maps working with meteor and cordova on IOS (testing with simulator), but after tinkering with for longer than I care to admit, I just can't get it working.

I started with the article:

http://blog.thebakery.io/native-ios-maps-with-meteor-and-cordova/

I manage to install and compile it successfully after I generating google app keys for both Android and IOS and adding them to mobile-config.js as follows:

App.configurePlugin('plugin.google.maps', {
    'API_KEY_FOR_ANDROID': 'my-andriod-key',
    'API_KEY_FOR_IOS': 'my-ios-key'
});

When I tried to run it though, all I got was a blank white screen.

I then looked around for an alternative and found:

https://github.com/gwendall/meteor-google-maps-cordova

This also compiled without error but again all I got was a blank white screen.

After reading about a little more I also install geolocation just incase it was required:

meteor add mdg:geolocation

No joy :(

As a last attempt I tried looking for a meteor google maps implementation that did not use Cordova and lifted the template script to see if it would work.

https://github.com/dburles/meteor-google-maps-demo

No luck.

I am quite new to Meteor and so I have reached the limit of my abilities to figure it out.

Has anyone else tried implementing google-maps on Meteor with Cordova? I would appreciate any example or suggestions of how to get it working.

-- UPDATE --

After searching some meteor posts for google-maps issues I did find one that suggested adding some access rules to mobile-config.js

App.accessRule('https://*.googleapis.com/*');
App.accessRule('https://*.google.com/*');
App.accessRule('https://*.gstatic.com/*');

After this I am now at least not getting a completely blank screen. When I look at is through safari developer tools I can see there is a google-maps window generated but it is an empty grey element with a google logo in the corner and doesn't load the acutual map.

Upvotes: 0

Views: 561

Answers (1)

Rob Gordon
Rob Gordon

Reputation: 46

Sounds like you are doing the right things, I definitely needed to add the following rules to mobile-config.js

App.accessRule('*');
App.accessRule('https://*.googleapis.com/*');
App.accessRule('https://*.google.com/*');
App.accessRule('https://*.gstatic.com/*');
App.configurePlugin('plugin.google.maps', {
    'API_KEY_FOR_IOS': 'your private key' });

Perhaps revisit google console to ensure you have set up both Javascript and IOS credentials correctly

Upvotes: 2

Related Questions