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

This is not strictly necessary, especially if your maps are only for personal use. In general, v3 maps work just fine without an API key until they start getting a lot of traffic, in which case Google will disable your map until you include a valid key. But it can't hurt to have one, so go to https://code.google.com/apis/console, sign into your Google account, create a "project," enable the "Google Maps API v3" service for that project, accept the terms & conditions, then click on "API Access" to see your 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:

var google_api_key = ''; // Your project's Google Maps API key
document.writeln('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=false'+((self.google_api_key&&document.location.toString().indexOf('file://')!=0)?'&key='+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 -- and while you're at it, if the URL containing the .js file starts with www.gpsvisualizer.com, change it to maps.gpsvisualizer.com. So you should end up with this:

document.writeln('<script src="http://maps.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 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


EveryTrail.com Guides: Print or download travel guides to your iPhone or GPS: Skyline to the Sea Trail • Hiking the Grand Canyon Rim to Rim • Half Dome • The Boston Freedom Trail • Upper Yosemite Falls Hike • Lands End, San Francisco • Angel Island State Park • Cataract Trail Loop in Marin County • Coyote Creek Loop at Henry Coe State Park • Half Moon Bay Coastal Trail • Bay Area Wildflower Hikes • Bay Area Scenic Drives • Sunol Wilderness • Stanford Dish Hike • Grand Canyon: Kaibab to Bright Angel Trail • The Grand Canyon Rim Trail • Best Bay Area Backpacking • The High Sierra Trail • Best Bay Area Day Hikes • Great Hikes in the Grand Canyon • Queen's Garden Trail, Bryce Canyon Utah • Berry Creek Falls Loop at Big Basin Redwoods State Park • and more...