Recreate "Flattest Route"

flattest-route.md

Flattest Route history

https://www.flattestroute.com/ was originally created by Zivi Weinstock, but taken offline due to Google Map's new pricing structure. The good news is that for limited personal use of a single person/family the cost is between $0 and cheap.

Disclaimer (Use at your own risk)

These procedures involve Google API's which are paid services. Normal usage should fall within the free bucket but if you fail to protect your key and give it to someone else they could run up charges.

• Setup billing alerts (just in case). You'll get an email if your GCE goes over any threshold you choose. https://cloud.google.com/billing/docs/how-to/budgets
• Don't hand your key out to ANYONE. This includes the code you've modified.
• Truely protecting the key means running this as a web service on the Internet and restricting the key to it, which is beyond the scope of this document.

High level

To run this locally, you'll need to:

1. Sign up for a GCE (Google Compute Engine) account.
   • This is Google's version of AWS and Azure.
   • As of this writing (7/23/2019) they have a free trial with $300 in credits.
   • Even after the trial ends, the "Always Free" usage limits are enouogh for single person private usage.
2. Download the original source code
3. Update one line in index.html to use your GCE keys using any text editor (i.e. Notepad)
4. Run by double clicking on index.html in the folder you extracted it to.

Details - Obtain an API key

1. If you don't have one already, create a GCE account.
2. In the GCE console, you'll need to create an access key and assign it permission to certain Google API's (functionality). I've purposely left these somewhat general in the hopes they'll still work even if GCE's user interface is updated.
   • WARNING: You are about to create an API key. Do not give it to anyone! This is how Google tracks its usage and bills you. Periodic personal use will be either free or super cheap.
   1. Click the "Navigation Menu" → API & Services. You're now at the API dashbaord
   2. Click Credentials and create an "API Key". It will look something like AIzaSyCEeueFOkPCdoW76BuirQlBoQJKUPXfMZ. Copy/paste this key somewhere helpful. Don't worry, you can always come back to this page to fetch the key again.
3. Still in the GCE console, you'll now give permissions for that key to access Google Maps functionality
4. Click → API & Services → ENABLE APIS AND SERVICES. Search/find the following API's and enable them:
   • Compute Engine API (may be enabled by default)
   • Places API
   • Directions API
   • Maps Elevation API
   • Maps JavaScript API
5. Now to update the code...

Details - Download and update the code to work with your key

1. Go to https://github.com/Zivi/FlattestRoute and click the "Clone or download" button, then select "Download Zip". See screenshot.
2. You should now have downloaded a file named FlattestRoute-master.zip. Unzip it to its final location. For example, "Documents". You should now see the contents in "This PC > Documents > FlattestRoute-master" or similar. The location doesn't really matter as long you can find it.
3. In your forvite text/code editor open index.html.
4. Find the following line:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

1. Add your new API key as a parameter to the URL. Format is &key=YOUR_API_KEY

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyCEeueFOkPCdoW76BuirQlBoQJKUPXfMZ"></script>

That's it, now run it!

1. Save and close index.html
2. Double click to open it in your favorite browser.

Troubleshooting

When I first set this up, the only issues I had were with API's that I had yet to enable. I found them by:

1. Load the page in Chrome
2. Load the "Developer Tools". That's CTRL+Shift+I or click in the top right hand corner of Chrome and select More Tools → Developer Tools.
3. From within Developer Tools, select the "Console" tab and look for ERROR messages.