[UPDATED] Google Maps, API Keys and Geolocation Issues

NOTE: As of Root Server version 2.12.0, meetings cannot be saved without a Google Maps API Key.

Das Pröblem:

As most of you have probably already found out, Google now enforces HTTPS and API keys in their Maps.

This results in:

1) the dreaded “Oops! Something went wrong!” display:

NOTE: In the Root Server, this results in the map display shown as “all blue,” with no map displayed. Also, the “Set Longitude and Latitude to Address” button will not work.

2) and/or the “Unable to Determine Your Location” display:

This happens if you try to use a location-tracking feature, like the “Find Meetings Near Me” button in the Satellite.

Das Diagnöses and Das Sölütiöns:

The two problems illustrated above actually stem from two different sources, and have two different solutions. One is easier to solve than the other.

Problem One: “Oops! Something went wrong!”

This is the more quickly (but not easily) solvable of the two issues; however, it requires one of these:

If you’re a dedicated geek, you should have one handy. Don it now and start it spinning. You’ll need to cool down the old crankcase.

Signing Up for a Google API Key

You’re gonna need to sign up for a Google API Key, and then apply it to your Satellite (and/or Root Server).

Step Zero: Get A Google ID

It’s entirely possible that you already have one of these and don’t know it. If you have a GMail account, you have a Google ID.

If not, sign up for a Google ID. It’s free (It will only cost YOUR IMMORTAL SOUL! BWUUU-HA-HA-HAAAAA). You will need the Google ID in order to get the API key required for successive steps.

You don’t have to get a GMail address. You can use your existing email.

I won’t go through all the various steps, verifications and legal mumbo-jumbo (See “immortal soul,” above). At the end of it all, you’ll have a shiny new Google Cloud Services ID, which you can use for the successive steps.

Step One: Go to the API Console

Go to the Google API Console.
If you haven’t signed in, you’ll be forced to do so first.

Step Two: Create A Project

You need to create a “project,” which will act as an umbrella for the API Key.

In the upper left-hand corner, you will see a dropdown menu next to the “GoogleAPIs” logo. Click on this. If you haven’t set a project up already, do so now, by choosing “Create Project”

Name the project:

Now you have a context for your API Key.

Step Three: Enable the Google Maps JavaScript API

After the project is set up, you’ll be dropped into the “Library” tab, which lists all the available APIs. We’ll be setting up the Google Maps JavaScript API (Highlighted in the image):

That’s a link. Follow it to the API Console:

Select the “Enable” link. You’ll be presented with a screen that looks like this:

The “Credentials” mentioned are the API Key. Bang on the “Create Credentials” button.

Step Three Point Five: If you are Running Server Version 2.10.1 or Greater, Then Enable the Google Maps Geocoding API As Well

Step Four: Set Up the API Key

You will be taken to the Create Credentials Wizard:

Give the beanie prop a spin, and hit the “API Key” link. We know what we want, and don’t need to waste time playing “20 Questions.”

You will be taken to a screen that looks like this. I have taken the liberty of filling it in with my info (This was a record of the process I actually used to create the keys for this site).

Note the two domains I added. These are wildcards for the domains I use to present examples. You’ll need to select “HTTP Referrers,” and add domain names for your implementation. If you run the Root Server, remember to add that domain (if necessary).

You now have a nice, shiny new Google Maps API Key, ready for deployment.

Copy that line of gobbledygook, and keep it handy. You’ll be using it in a couple of places.

Step Five: Apply the API Key

Now, you need to apply the key.

Root Server

If you run a Root Server, you need to edit the

file, and add this line:

	$gkey = "AIzaSyB4q4Cwwl7PvTdLSAyVy4oWOLt4l0yEuyM";

Satellites

If you are running BMLT Basic instance, you need to edit the

file, and set the key into the following line, like so:

    'google_api_key'                =>          'AIzaSyB4q4Cwwl7PvTdLSAyVy4oWOLt4l0yEuyM',

The other Satellites have a nice GUI for it. Go into “BMLT Options,” and add it in the indicated place, like so:

Once you “Save Changes,” the “Oops” screen should go away.

It should be noted that it may take a few minutes for the key to become affected. Also make sure that you flush the cache on your browser (or site).

Problem Two: Unable to Determine Your Location

This problem is easier to explain, but also more of a complete pain in the butt than the first one.

It’s almost certain that the issue is that your Web site is not running as SSL.

Google forces geolocation (Where Am I Now?) queries to be done via HTTPS. Most browsers have followed suit, including mobile ones.

Basically, if your site isn’t running SSL (HTTPS), then “Where Am I?” lookups will fail.

You’ll need to get an SSL Certificate for your site, and have it use SSL for its connections.

Here’s a proof for you. These links both go to the standard [[BMLT]] shortcode on our test site:

1) With SSL (Hit the “Find Meetings Near Me” button. You’ll first be asked for permission to send your location. If you are in New York, you will get results after approving the request. If not, you’ll get a “No Meetings Found” error).

2) Without SSL (If you hit the button, you’ll get an immediate “Unable to Determine Your Location” error, with no request to share your location).

These both load exactly the same page; just connecting with and without SSL, respectively.

I’ll cover that in a later post. I already discussed it obliquely in a previous post.

TL;DR: Get secure. It’s pretty much being jammed down our throats.