When using the Cordova plugin it works a little differently. If you read the last tutorial, you will know that we will intialise the map on an element that is within the DOM, but when the map is created it is not injected into that element. In this case, Google Maps is a native component and it can’t be displayed inside of the browser view that the app is running in. Instead, it is created behind the browser view and lined up with the position of that element. The plugin also handles of making all the parent nodes of the element the map was initialised on transparent, so that the browser does not block our view of this native component.
This is a similar concept to the camera preview plugin we have used previously to create a Pokemon GO style interface. It’s a very clever technique, and certainly useable, but I think you would classify it as a “hack”, and when relying on hacks sometimes things don’t go as smoothly as you would like.
I wanted to see just how much of an issue this would be when integrating the plugin into an Ionic 2 application. So I created a bunch of test scenarios to see how the plugin would behave.
1. Single Page Application
This is the simplest scenario you might want to use Google Maps in, a simple one page application. We have obviously shown that this is possible in the last tutorial, but a commenter mentioned not being able to add an interface over the map (like a Floating Action Button) so I figured I would give that a try as a test.
Here’s what I implemented:
I’ve added a FAB button at the top left of the map that, when clicked, will launch an Alert. Displaying and interacting with the button works fine, but it is not possible to interact with the alert when it is launched, leaving it stuck on the screen.
Note that the template for implementing this looks like the following:
<ion-content class="home"> <div id="map"> <button fab primary fab-top fab-left (click)="showAlert()">+</button> </div> </ion-content>
It’s important that the button is placed inside of the map element, otherwise you won’t be able to interact with it. Buttons placed outside of the maps clickable area (like in the
<navbar>) also work as you would expect. This is likely the reason that the alert component does not work properly, as it is not contained within the map element in the template (but is displayed within the maps clickable area), and the touch events are being passed back into the map component instead.
2. Sliding Menu
I was actually surprised to see that the native map component will work with a sliding menu layout. I added a simple sliding menu to the example I created above to see what would happen:
The map slides over to the right of the screen just as you would expect, but there are some glaring issues present as well. The Google Map component does not animate over to the right or back to the left properly, instead it jumps there after the normal sliding animation has completed. Another issue is that since the map steals any touch events, you are unable to slide the menu open or closed with swiping gestures.
Given those issues, it is useable if you really need a sliding menu, but the experience is pretty poor. I would avoid using it in this scenario.
3. Multiple Page Application
Given the way the map works, by making all of its parent nodes transparent so you can see right through the browser, you might think that would cause trouble with your other normal pages in a multi-page app, but that doesn’t seem to be the case. To continue testing, I added an additional ‘About’ page that could be swapped to from the side menu.
As you can see above, it seems to display as you would expect and you can just as easily switch back to the map page with no issues.
Another use case might be to launch a map inside of a Modal, maybe you have some kind of ‘View Location’ button that will show a user where something is. To test this out, I created a new page that I would launch as a modal from the home page (I also removed the home page map so that it didn’t interfere). This was the result:
As you can see, it shows up blank. I suspect this is because the page that is displaying behind the modal blocks the map from being able to be viewed.
5. Multiple Maps
It is not an uncommon requirement to need more than one map in a single application. Unfortunately for this scenario I came across the following statement in the repository for the plugin:
“You can not create multiple maps currently. (and near future)”
but thought I would give it a try anyway. I added an additional page with another map but it indeed does not work, it seems to just reuse the first map that was created.
This doesn’t mean that the plugin is completely unusable on an application that requires a map on more than one page. You could, for example, have a function set up to control changing the location of the map as pages change (e.g. to show locations of different events). If you need a completely separate instance of the map though, then using this plugin won’t be an option.
My experience with the Cordova plugin is limited, so if your experience has been any different it would be great to hear your thoughts in the comments.