Googlemap API

ionic-v1
1

Hello !
Please i’m develloping an app and i have decided to try ionic. I’m a problem i’m wandering how to integrate a googlemap in my app. Any suggestions ?
Please help!!!

2

Hi, I’m working on a similar integration. I’m using a native plugin that provides much better startup time, integration and features than using the Javascript Google Maps.
The plugin is https://github.com/wf9a5m75/phonegap-googlemaps-plugin
There are some issues integrating with ionic, but one you apply the workarounds its works great.
See https://github.com/wf9a5m75/ionic_test
and I’ll post the workarounds here:

https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/256

Let me know if you need any help

3

I have never tried the google map cordova plugin but using a plugin doesn’t sound a very good idea.
google maps is design to work in the browser so its better off to just stick with something like angular-google-maps: https://angular-ui.github.io/angular-google-maps/#!/

Step one: bower install – save angular-google-maps
step Two: add google maps to your app.js dependecies
step Three: CSS: .angular-google-map-container { height: 400px; }
Step Four: <google-map center="map.center" zoom="map.zoom"></google-map>
Step Five: get an API key from google.
go to index.html and add this:

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=APIKEY">
</script>

instead of key=APIKEY put the key you got from google.

now you should have a map where you placed your HTML

1 Like
4

Thank u @Matangub that helps me a lot. i’ll try to implement that!

5

Hi @rickdana,

Kindly check PhoneGap Google Maps Plugin. It is easy to implement in your app and it works also fast.

Just check the website’s tutorial. Hope this will help.

1 Like
6

Google Maps JavaScript API v3 is designed for browser,
however Google Maps Android API v2 and Google Maps SDK for iOS are designed for native applications.

The angular-google-maps plugin uses Google Maps JavaScript API v3,
but phonegap-googlemaps-plugin uses native map views.

There are many things are differences:

Phonegap-googlemaps-plugin’s one is faster, very smooth, 3D camera view, heading rotating, and less data connection.

angular-google-maps is basically Google Maps JavaScript API v3,
thus less file size, easily to use, many features.

Which one would you like?

2 Likes
7

i’ll choose the phonegap-googlemaps-plugin’s. i’ve try the Google Maps JavaScript API V3 and the result didn’t convince me!

1 Like
8

I have been using Google Maps JS API. It is slow and there are bugs, and even sometimes the map would glitch out. Not to mention the lack of 3D and rotation.

I thought there’s really nothing I could do but then I took a look at the plugin you linked. It is pure amazing. The only downside is that it cannot be used on a movable element. It struggles to draw it in time.

9

@DerekL
Thank you for reporting.

If you want to remove the map, use map.remove() method .

The map view is placed under the browser, the plugin changes the background color as transparent for the parent elements of the map div (including <body> and <html> tags) .
The plugin version 1.2.3 fixes this issue a little, so you just need to call map.remove().
https://googledrive.com/host/0B1ECfqTCcLE8R0h6T3dIdWFBOHM/mechanism.png

10

Hello,

I am also use google map plugin but its not working in ion-content so what we do can you help me ?

Thanks in Advance :smile:

11

hello @kapilkarda i have try goggle map plugin with no good result. i defendly covince my self to use angular google map plugin here is the link http://angular-ui.github.io/angular-google-maps/#!/.

It work very fine appart some problem with multiple markers but i’m sure i’m wrong some where with those markers :smiley:
try it and fill free to contact me if you have any question.

Sorry for my bad english i’m actually a french speaking

12

I am currently developing an app with the native GoogleMaps plugin. To allow page transitions with the google map visible I do the following steps before the page transition happens:

  1. I use the toDataURL() method to get a base64 image of the map
  2. Set this image as the background-image of the map DOM node
  3. Call setVisible(false)
  4. Transition to the next view

This procedure takes about 300-400 ms. If this delay bothers you, you can still try to get the base64 image of the map every time the camera is idle (there is a CAMERA_IDLE event on iOS) and use this image.

Of course I have to remove the background-image and call setVisible(true) after I get back to the map view.

13

Hello @rickdana I have used Google Map API V2. thats why i am using google map api

Please Have a look on that

14

Your codepen is not working !

15

yes its working in Device so please test it on device…

16

Is not working for me either on iphone 5s

17

Please Install google map phonegap plugin with Varibale key…

18

Hi Ramirogm,

I have tried my level best (I am a newbie) to make this plugin work in VS2015 and with all steps followed. But no matter what I cannot get it to build. I cannot get this working. I keep getting
No resource found that matches the given name <at ‘value’ with value ‘@integer/google_play_services_version’ in the platform\android\ant-build\Androidmanifest.xml.

Can you pls help

Thanks,
Khaleel

19

Hi @wf9a5m75
I’m seriously considering switching to this plugin which seems great.

The only blocker I may have is about styling custom overlays. Right now I’m relying on divs that I attach to the overlayLayer:

MyCustomOverlay.prototype.onAdd = function () {
var self = this;

var div = document.createElement('div');
div.style.position = 'absolute';

div.style.backgroundImage = '../img/someImage.svg';

self.div_ = div;

// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

div.classList.add("my-default-overlay-class");

};

I can then style them as I want.

Is there a way to do the same thing using the plugin?

Thanks a million for any answer.

Best,

Francis