Tip of the Day: Integrating Static Google Maps into Unity

Many applications these days and some games implement a static map that downloads geo-location information directly from google maps. This information is then displayed on a single image and thus the word “Static Google Maps”. In this article we will see how to get the Static Google Maps API to work and implement it in your Unity project.

As a quick overview, the way this works is by sending a URL request through unity which is an HTTP request that will return an image of the map location we are in or want.

Google Map API Key

First of you will need to acquire an authentication key called the Google Map API key. In order to do this, follow the instruction in the following link Getting started with Google Maps Platform | Google Developers. There you will need to create a project and generate a “STATIC GOOGLE MAP API KEY”. You need to make sure that it is a STATIC google map project.

Static Map API Key

Now copy your API and save it on your machine for now.

Unity Setup

Using our example (Mobile Apps Development in Unity Progression Report), we want to allow the user to take a snapshot of their location in order to save it in the case data overview.

In our C# script that we will use to grab the map, create a variable to store the API that you can assign in the in the inspector.

Storing the API key

Steps to be taken

A. Download the static map using the url request

B. Apply the downloaded map to the rawImage UI element in your project. (A normal image element will not work, raw image UI element must be used to accepted the downloaded map texture)

Downloading the map

If we follow the overview for the using the static google map (Overview | Maps Static API), you will find the URL that you will use in order to send the web request.

URL: https://maps.googleapis.com/maps/api/staticmap?

This URL will take parameters in order to download the map. The parameters are location parameters latitudes and longitude, map zoom level, and image size. We will use these 4 parameters that we will append to the above link as a string. Here is an example:

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300
&key=YOUR_API_KEY

1. Let’s create the variables we will use for the parameters and the URL in order to easily construct it. Create an xCord (for latitude), yCord(for longitude), zoom, imageSize, and a static string for the base of the URL. Set the zoom to 14 and image size to 400 in the inspector.

Parameters

2. Before we add the parameters to the URL, we need to get the realtime geo-coordinates and assign them to the xCord and yCord.

Assign the xCord and yCord

3. Now that we have acquired the coordinates, we can easily construct the URL with the parameters that we will use to download the map image.

Appending the URL with the coordinates, zoom level, image size, and the API key

4. Using this URL we will use a Unity Web Request, which use the URL to request to download the data stored by the URL.

Downloading the map texture

Doing all these steps, once the user reaches the map page, the map will automatically download onto the raw image.

Static Map

Here is the link to the whole code for your experimentation: static google map — Pastebin.com