Fetch Google Map Service: Part 1- App Dev Series 4

Objective: using Google Map service in app.

Google Map is a free service that you can use it into your app. In this article, we will get the Google Map display on the column of UI and locate the current location of user.
We will finish this with the following steps:

• Enable Google Map Platform and create a Static Map API.
• Get the full map service from url in code.
• Get the current location by using LocationService of Unity.

Enable Google Map Platform

First, we can enable the Google Map service step by step in this website. Follow the instructions and click “Go to the project selector page”. If you have not enabled the billing to your Cloud project, make sure set the billing information before creating a project.
Although this would charge you a little fee, it is just to ensure you are not a computer.

If you have not created a project yet, click “Create project” and input any needed information.

Once done, back to the site and move on to Step 2, click the “Maps API Library page”.

Select your project and enter the Map API Library, then select Maps Static API and enable it.

Now you can back to Dashboard of your project, or back to the first site and move on to Step 3 to click “Go to Credentials page”. This would lead you to the page to check your API.
Keep the key and we will use it in the next section.

Get the url of map service

Back to Unity and open the script you would use the Map Service. In this example, I would use a location panel of my app to display the map.
First we can store the API key in Unity. Create a public string variable to store the key.

After paste the key in Inspector, we need to know what parameters that would be required to enable the map in code.
By checking the tutorial in this site of using Maps Static API, we know that it requires 4 parameters:

• center: defines the center position of map, which can use latitude, longitude(coordinate) data or string name.
• zoom: defines the zoom level of map with integer.
• size: defines the resolution of map with integer.
• key: allows this service from your Google Cloud.

Now we know the requirement, back to script and create some variables to store these parameters.

We can input these value in Inspector, except the coordinate.

With this url, we can call the Maps interface to replace the Raw image by using UnityWebRequest.
To use UnityWebRequest, we need to enable the library first.

We are ready to get the url to display on app.
In this part, we would make system trying to get the full url and replace it to texture of Raw Image. Since we have to wait for the data return from url, we need to run these code under a coroutine.

In this coroutine, we assemble the complete url from the variables we created, then use this url to receive the complete map texture.
Before we attach the map texture to raw image, we need to make sure it is successfully return a data.
After that, replace the texture to raw image.

Now we can run this coroutine in Start(), and because we have not get the coordinate yet, you should see this result when click Play.

That’s all for this article! The next article we will get the location data of user’s device.