Implementing Google Map Plugin for Mobile

Hi,

Can any kind soul run me through step by step as to how to implement a Google Map Plugin on mobile including the generation and usage of API keys? I am not sure if the issues that I am facing are due to the fact that we are using P11 but implementing a Google Map Plugin on mobile has been a complete nightmare. What I basically want to achieve is to be able to search for and select a location as well as return the coordinates of the location. A sample app would be greatly appreciated. From what I understand, there are actually two different Google Map Plugins for mobile and I don't really care which one is used, so long as I am able to achieve my wanted functionality. Thanks in advance.

Regards,

Louie

Hi Louie, 

Please check this topic, I explained the steps there.

Hi Killian,

Thank you for the reply. I have actually came across your post while trying to implement the Google Maps Plugin for mobile. I followed your steps step by step but it returns a "Sorry! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for Technical details." Any idea what I am doing wrong? If you want I could send you the module but I don't see much point as I don't think there could be much that has went wrong with the implementation. Does the problem lie with the generation of the API keys?

Thanks.

Regards,

Louie

Hi Louie,

Does it go wrong both in the emulator and on an actual device? Or did you try in emulation only? If it goes wrong in emulation, did you check the console (in Chrome and Edge, press F12 to open the devtools and inspect it)? Does it give any error message? Did you check the Error Log in Service Center to see if there are any errors related to this?

Hi Killian,

I only tried using a native app. I thought plugins only worked if we generate the native app, am I wrong? I have checked the Error Log in Service Center and there were no errors with regards to this.

Thanks.

Regards,

Louie


Hi Louie,

True, plugins only work on a mobile device, I was (perhaps mistakenly) assuming you used this component instead of this one. The topic I linked to is about the former. Unfortunately, I have no experience with the Google Maps plugin, other than that a collegue of mine tried to use it but ran into difficulties.

Hi Killian,

Yes, as a matter of fact, I was using the plugin which was published by labs and it still did not work. Does the problem perhaps lie with the generation of my API key?

Thanks.

Regards,

Louie

Hi Louie,

If it's the API key, I would assume a clear error message stating there's something wrong with it. 

Hmm, what possibly could have went wrong then? If you could send me a very basic implementation using the steps that you spoke of, it would be greatly appreciated.

Thanks.

Regards,

Louie

Hi Louie,

Like I said, I only have experience with the JavaScript version of Google Maps on Mobile, not the Cordova plugin. As for the API key, there's a short explanation here. However, assuming you already have a valid key, perhaps you can try the Google Maps Mobile component first, just to see if the API key works (the advantage also being that you can test in the browser).


Hi Killian,

I don't think you have actually said that you only have experience with the JavaScript version of Google Maps. As far as I am aware, I think you only said "I was (perhaps mistakenly) assuming you used this component instead of this one. The topic I linked to is about the former.". Unless you are referring to that the JavaScript version is "the former" or unless the next sentence saying that "I have no experience with the Google Maps plugin" was referring to both the Google Maps plugins. 

What I have been trying to tell you is that I have been using the plugin that you have recommended twice, when you referred me to the topic as well as the previous response where you recommended me to use the "Google Maps Mobile component first" ("perhaps you can try the Google Maps Mobile component first"). From what I understand I think we seem to be having a communication issue here, I have been using the plugin that you spoke of all along. Or are you trying to tell me that you do not know how to use that plugin as well. If that is the case and that you do not actually know how to use either of the two plugins, then I guess I will have no choice but to look to other members of the community for help.

Thanks.

Regards,

Louie

 

Hi Louie Ng,

I think you may be using the incorrect terms to refer to things here, and that's probably what's making you confused with Kilian's answers.

The Google Maps Mobile forge component is not a plugin, it uses Google's Javascript API and it should work on the emulator.

The Google Maps Plugin forge component is a plugin (like its name implies), its functionality is implemented in a Cordova plugin and will not work on the emulator.

Please run your application via the emulator and check your browser's Javascript console for errors, so you can have a better understanding of what's going on.

Feel free to share your findings with us, and we will keep trying to help.

Ahh I see, it seems the fault lies with me then. I was trying to convey that I have been using the javascript API but I think I conveyed the wrong idea by referring to it as a plugin. Anyway, I have finally managed to figure out what went wrong using the method that you have described. Basically I enabled the Google Maps API for both iOS as well as android but it turns out that I was supposed to enable the javascript API as well. Thank you so much for helping. Your help is greatly appreciated.

Regards,

Louie

Hi Louie,

Great it's sorted out :). If any one of the answers above solved your problem please mark it as solved. Happy coding!