GPS Visualizer

Migrating from Google Maps API v2 to v3

At the end of 2012, Google announced that they would be deprecating version 2 of the Google Maps API in May 2013. As expected, nothing really changed; "deprecation" in the software world usually means "it might work, but if something breaks, don't expect us to fix it." But eventually they got serious: the v2 code stopped working in November of 2013... so if you have do-it-yourself Google Maps on your Web site, you need to update them.

GPS Visualizer's code has been updated, and any Google maps that you create from now on using GPS Visualizer will use v3 by default, so current and future maps shouldn't be a problem. But if you've created maps in the past that you still use on your Web pages, you have two choices:

Option A: Re-generate the map using the original GPS data.

This is not a bad idea, because a lot of things have changed over the years, and you'll get the latest code. However, it's possible that you don't have access to the original data, or you don't want to figure out how to set all the options in the Google Maps input form so that your map looks the same as it did before. Which brings us to...

Option B: Edit your existing map to use the v3 code.

This is pretty easy, even if you're not an HTML/JavaScript expert. All you need is a plain-text editor with a "find" function. The rest of this document will walk you through how to do it. (Steps #3 and #4 below are the important ones.)

1. Get a v3 API key from Google

Go to https://cloud.google.com/maps-platform/, sign into your Google account, create a "Project," enable the "Google Maps API" service for that project, accept the terms & conditions, then click on "Create Credentials" to create a new API key. (You want a "browser key," not a "server key.") You might want to leave the code.google.com window open for easy copying-and-pasting later.

2. Open your map in a text editor

Your computer probably already has a decent text editor on it; Mac OS X comes with TextEdit, and Windows comes with WordPad. If you want a more powerful (but still free) application, look into something like Notepad++ for Windows or TextWrangler for Mac. Just be sure that when you open the file containing the map, you tell your editor to open it (and later save it) as plain text, not as HTML or "rich text."

3. Find and replace the API key & Google's code library

This is the first block of code you'll need to replace; the middle line that begins with "if" may or may not be present, but searching for google_api_key or file=api should get you here:

var google_api_key = '';
if (document.location.toString().indexOf('http://www.gpsvisualizer.com') > -1) { ... }
document.writeln('<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key='+google_api_key+'" type="text/javascript"><'+'/script>');

Remove those two or three lines and replace them with these two lines:

google_api_key = ''; // Your project's Google Maps API key
document.writeln('<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key='+(self.google_api_key?self.google_api_key:'')+'"><'+'/script>');

If you have a v3 API key, copy and paste it into the single quotes on the first line.

4. Find and replace GPS Visualizer's code library

This step is much easier. Simply find functions.js and replace it with functions3.js. Also, you should probably change http://maps.gpsvisualizer.com to https://www.gpsvisualizer.com (note that it's changed from http to https). So you should end up with this:

document.writeln('<script src="https://www.gpsvisualizer.com/google_maps/functions3.js" type="text/javascript"><'+'/script>');

Note: If you're clever with find-and-replace commands, and if your editor has the ability to process multiple files at once, you may be able to do steps #3 and #4 in one fell swoop for ALL of your map files.

5. Test your map

If you've never made any complicated modifications to your map, you're done! Open the local file in a Web browser, and it should work. If everything is OK, upload it to your Web site and make sure everything seems normal there before making it public. (Note that if you've included a v3 API key, your key must be configured to work in your testing environment as well as the live server.)

6. Power users only: Test your custom modifications

If you've added your own modifications to your GPS Visualizer Google Maps (which is supported and encouraged), you should make sure everything still works like you expect it to. Some function names have changed, and some functions have disappeared altogether. GPS Visualizer's JavaScript library tries to catch a few of these little pitfalls, but there's still potential for trouble. Send an e-mail to the contact address at the bottom of this page if you have questions, concerns, or suggestions.



Return to the main GPS Visualizer page