Ionic: How to Use Google Maps & Geolocation (Native & JavaScript)

Ionic Google Maps: An alternate approach

Many developers want to use Ionic Google Maps to add mapping and geolocation to their applications.  I’ve been exploring different ways to integrate Google Maps into an Ionic application over the last month. MobeeWash, an Ionic Framework application, uses the map as an integral part of the user experience.

You have two options for integrating Google Maps into your Ionic application. There are versions using the native SDK’s for iOS and Android or the JavaScript version intended for the web. Your choice affects how you will interact with the map and both options have different pros and cons.

One of the key advantages of Ionic is the speed of development while in the browser. Things like live reload for native testing improve performance but does not get you to the same productivity level as staying in the browser.

The native Google Maps experience is smoother than the JavaScript Google Map version while the JavaScript version is easier to test in the browser.

I’ve been exploring a method for using both Native & JavaScript Google Maps in the same application. The correct version is chosen when the device boots. This allows you to test in the browser while developing and deliver the best experience for the current device when the application is deployed.

This approach does come with some overhead which I am still exploring.

I have added a repository with the completed tutorial code at https://github.com/Baadier-Sydow/ionic-google-maps

Last updated for Ionic 3.9.2

Subscribe to receive my latest Ionic Framework content, courses and tutorials. You will also gain access to exclusive newsletter only bonus content on the site.

Close this popup

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

Enter an appropriate project name, for example GoogleMaps, and select blank for the starter. Select Y to add the Cordova native platforms to this project when the question is presented.

Navigate to the folder using:

Add Geolocation to the project

Geolocation allows you to retrieve the current location from the user’s device. This works on both browsers and mobiles.

The device will request permission when the user loads a page that triggers a Geolocation lookup. You won’t be able to retrieve the user’s location until the permission is granted.

The official documentation for the Ionic Native wrapper for Geolocation can be viewed at https://ionicframework.com/docs/native/geolocation/

Run the following commands in your terminal to install the plugin:

Now add the plugin to your app’s module by editing app.module.ts.

Retrieve the users location using Geolocation

Everything has now been set up for you to use the Geolocation functionality. Lets open up home.ts and retrieve the user’s location by amending home.ts to the following:

Let’s walk through the code to get an understanding of what’s going on.

We first import the Geolocation provider and then use dependency injection to initialize the object.

Then we create a location variable to hold the user’s location. We are declaring the type for the location inline.

It will store both longitude and latitude as two separate properties.

With that being completed we have a function that requests the user’s location that fires using the Ionic Framework lifecycle event, ionViewDidLoad().

Using this lifecycle event ensures that we only initiate the request once the view is ready and loaded.

The function findUserLocation() will perform the legwork of fetching and handling the user’s location.

In the body of the findUserLocation() function, we set some initial options. It’s important to set the enableHighAccuracy to true as it may not activate the Geolocation on some devices if not turned on.

We use getCurrentPosition() to retrieve the position which is returned to us via a Promise.

When the promise resolves we are given the users location as properties on the response.coords object.

This we store in the location variable that we set up for this purpose earlier.

You can handle any errors in the catch block. For now, we will only include the console.log().

Create the different Map providers you will require

We will be creating three different providers to interact with Google Maps. The MapsProvider() will interface with the different implementations of Javascript and Native maps.

The JsMapsProvider() and NativeMapsProvider() will have the concrete implementation of the map functionality.

Run the following in your terminal to create the providers:

Now add the new providers to your app module:

Setup your Google Maps API keys

To use the Google Maps API you will need an API key for each environment you want to tackle. In our case, we will be using the Web ie JavaScript and Native which covers iOS and Android.

You can find instructions for retrieving your API keys at:

We can move on once you have created and recorded your API keys.

Install the Native Google Maps Cordova plugin

We can install the Google Maps Cordova plugin using the API keys for Android and iOS you created from the previous step.

Run the following commands in the terminal ensuring that you replace the API key placeholder with your actual API keys:

Add the Google Maps plugin to your app module:

Install the JavaScript Google Maps script

The JavaScript version of Google Maps doesnt require installation using NPM and Cordova. It gets added directly to the head of your index.html.

Make the following addition to your index.html using your API key for Google Maps Web:

Note that I’ve highlighted where you need to add the script tag. You do not need to add the surrounding code.

A note on restricting your API key use

It’s important to restrict where your API keys can be used. Someone could get a hold of your API key and use it resulting in you paying for their usage.

You can find options to restrict the API key usage when you create it. It will be under Credentials if your key has already been created.

The key can be restricted using the following different options:

  • None
  • HTTP referrers
  • IP addresses
  • Android applications
  • iOS applications

I would suggest using None while following through this tutorial and then amending the restrictions to suit your needs later.

Setup your MapsProvider() to initialize the correct Google Maps implementation

Amend your MapsProvider(), which can be found at providers/map/map.ts, to the following:

Let’s talk through what is taking place above.

First we import the different providers we will be using in this provider:

Then we create a map variable that will eventually hold our map and initialize the Platform provider.

In the MapsProvider() constructor we check to see whether we are on the web or on a native device and then initialize the correct Google Maps provider.

Finally, we create an init() function that will create the actual map using the users Geolocation and a DOM element to display it in.

This function will be called when we decide where we are going to display the map.

The map variable will store the correct provider and call its init() function. We will create the corresponding init function in a later step.

Create your concrete JavaScript Google Maps implementations

Let’s create the providers that will actually create the iOS, Android and JavaScript Google Maps.

Amend your js-maps.ts to the below and we can work through what is taking place.

The first thing to take a note of is our declaring the var google. We do this to stop the compiler from complaining about a missing variable.

Then we create a map variable to hold the Google Map and create the init() function that will initialize and display the map.

When the init() is fired we use the location to set the center of the map. The new map is created by passing in the options and the DOM element that will hold the map.

Create your concrete Native Google Maps(iOS & Android) implementations

Amend your native-maps.ts to the below and we can work through what is taking place.

Note that additional objects have been imported specifically for the native Google Maps implementation.

Then we create a map variable to hold the Google Map and create the init() function that will initialize and display the map.

When the init() is fired we use the location to set the center of the camera for the map.  The new map is created by passing in the options and the DOM element that will hold the map.

We’ve also added a listener that will log out to the console when the GoogleMapsEvent.MAP_READY event is fired. You can add logic here to handle things like adding map markers, changing the map center programmatically etc.

Handle the creation and display of the map on your page

This is the final step to display the map on your page.

First, we create the DOM element that will host our map on the page.

Then we add some styles that will ensure that the DOM element can host the map. If you don’t include this your map will not display.

Finally we create the map by passing the users location and the DOM element to our map provider.

Make the following amendments to your home.ts file to create the map.

Testing

We are now ready to test the final implementation. You can do this by running ionic serve to test the web-based implementation of Google Maps. Run ionic cordova run android or ionic cordova run ios to test the iOS and Android implementations.

Unfortunately, Ionic DevApp, does not currently support the native Google Maps implementation.

Conclusion: Ionic Google Maps

This approach to handling Ionic Google Maps is focused on having the flexibility of being able to test in the browser and the performance of running the iOS or Android SDK versions of Google Maps. It takes a bit more effort as you have to maintain the code in two places but I feel the payoff is worth it.

Changing from an existing Google Maps implementation should not be too difficult as long as you don’t leave out any functions when you refactor this alternative approach.

The full completed repo can be viewed here.

Subscribe to receive my latest Ionic Framework content, courses and tutorials. You will also gain access to exclusive newsletter only bonus content on the site.

Close this popup
Showing 24 comments
  • Marlon Leite
    Reply

    cool, nice article. Thanks 🙂

  • Ignacio Lizarraga
    Reply

    Excellent, worked great for me! Thanks so much

  • Julius Bangert
    Reply

    Thank you, this is great. However I can’t get it to work in the browser or the dev app which are the two main ways I’d like to test during development. I realise that the dev app can’t run ionic native for google maps but could we detect this and serve the JS implementation? In the browser I get the following error :

    [blocked] Access to geolocation was blocked over insecure connection to http://localhost:8100.

    Any suggestions?

  • Julius Bangert
    Reply

    It doesn’t work for me when I build for emulator or device either.. Do I need to install the SDK for Xcode and all that? Seems strange if I did as this is not in the documentation for cordova-plugin-googlemaps

    • Baadier Sydow
      Reply

      I dont think you need to install the SDK if I installed correctly. I assume you are able to build an app without it? Your issue could also be linked to my response to your other question.

      • Julius Bangert
        Reply

        Thanks for your reply. I am able to build the app and run it on an iPhone and the Xcode emulator (haven’t tested android yet) I can get a js google map in the browser now using fake location data but the problem is the native map simply isn’t showing up. I’ve tested the google maps demo Xcode app on device using my api key and that works fine so the key is good. I’ve followed your tutorial step by step, one thing I changed was “tnpm install –save @ionic-native/geolocation” as I assumed it was a typo. Any ideas?

        • Baadier Sydow
          Reply

          Strange. I’ve had weird issues with the Google Maps in the past when I started out where I had uninstall the package and then reinstall it because the API keys were not being correctly set.

          Perhaps try that?

          Any other errors you pick up? Xcode gives you access to the system debug log too with the simulator? That might have something that helps us.

          • Julius Bangert

            I did try running ionic cordova plugin remove cordova-plugin-googlemaps and then re-installing it. The result in the config.xml is :

            Where the … are actually filled in.

            One error that keeps showing up several times in the simulator console is :

            assertion failed: 17E202 15E217: libxpc.dylib + 71589 [22B51B1C-1E07-3FEE-A4E9-60E90E7520D6]: 0x7d

            Does that mean anything to you?

          • Baadier Sydow

            I did some searching for libxpc.dylib and even added google maps to the search and some results come up but nothing clear that pinpoints it for you.

            Are their any differences between the demo project and yours that you can see?

  • Julius Bangert
    Reply

    Thanks for helping me get this running! Now It’s working, I was wondering what your suggestion would be to do other maps processes such as adding markers and updating locations using the same kind of dual-implementation way. Obviously the ideal solution would be if the plugin was written to handle js browser as well but that’s unlikely to happen.

    • Baadier Sydow
      Reply

      While the dual approach is cumbersome I don’t see a way around it at this stage.

      The only consolation is that you likely wont have to create too many methods that handled by both. You’ll probably be handling a few map interactions with the rest of your application living as things that handle or respond to those actions.

      Its a pity that its unlikely Ionic will create a package for this in Capacitor https://capacitor.ionicframework.com/ which would make everyones lives easier. Capacitor allows you to use the correct underlying technology wherever your application runs. The community may well create something in the future that could be used.

      The other alternative is that you bit the bullet and use the native only.

  • marcos méndez filesi
    Reply

    Really elegant solution. Thanks a lot sir. Work fine : ) !!!!

Leave a Comment

Start Learning

Sign Up!

Subscribe to receive my weekly newsletter and receive my latest content when its published and exclusive newsletter only content.