Integrating Google maps static API with Unity app
Objective: Show the location of the user in your app with the Google maps API
With the app I’m building I will be using the device location to communicate with the Google Maps static API. The process for setting up the Google Maps API can be a lengthy process but I’ll try and keep it snappy.
First you will need to setup a developer account with Google, don’t worry, it’s free. Then once you’re account is ready you can follow along by going to this link. This is the getting started page for the google maps platform.
Click on the getting started button and this will take you to a page in your account for starting the process of setting up an API key. This is what we need for inside Unity.
Inside your Google cloud platform you will need to create a project before getting an API key. Click in the top left corner and then select new project.
On the next page you will need to give your project a name and click create. You will then need to enabled the Google maps APIs that you want to use. For myself, this is the Google Maps static API.
On the left-hand side you should see an option for API, click that and it will show the all of the APIs that are currently enabled/disabled. Click on the Maps static API. Mine is in the enabled API but yours will probably be in the Additional list.
Once you have clicked the link you will see a button that will ask you to enable the API. Click the button and the API will be enabled. Now, we need to get the API key or should I say, create one.
On the left should see Credentials in the list, so click that and you will now be able to create a new API key. Create one and then copy the key and paste it in to a script for use inside of Unity.
Here is a link you might need if you want to be able to get more information about how the parameters for the API work.
Now that we have the API key and you have hopefully copied and pasted it already. We can get to work on using it inside the app.
I have a script for showing the location, the location will be displayed inside a raw image. I suggest you use a raw image as well. This will become clearer as we go.
The API works by the app communicating with the Maps server using a Unity web Request which means that you will need the using UnityEngine.Networking namespace at the top of the script.
The URL parameters for the static image are as follows.
- base URL “https://maps.googleapis.com/maps/api/staticmap?”
- the x and y coordinates: center=40.714728,-73.998672 (example)
- the zoom level: zoom=14
- image size: 300x300
- APIKEY
So, we have to fill in the whole URL with the information from the app. I am using the Unity location services which will get the latitude and longitude and I am storing them inside of a couple of floats.
In my start method I am calling a coroutine that will get the above data.
This is will only work if the location services are active on the phone/app.
At the end of the GetLocationData coroutine I am starting another coroutine called GetText. Which is using the URL variable and putting all of the information together so that I can get the static image and then get the texture of the image and turn my raw image into the new static image from the URL request.
Now that the coding is done, it’s time for testing. You will need to build the app out to your mobile device for this to work, because inside the editor you will not get a location. You can manually enter some data by setting the x and y variables to be serializable in the script. This will allow you to enter them inside the editor.
You should now be seeing a static image in your app instead of the raw image.
If you found this helpful, don’t forget to clap and follow for more articles on game development in Unity.
