Manually add a Google Maps API key

New Google Maps may not appear as expected on your website. This is because Google requires your API key. Read the instructions on how to solve this.

If you want to show Google Maps on your website, you need an API key from Google. This is also true for the maps generated by our Google Map widget. The purpose of the API key is mainly to count how often your Google maps are viewed on the web. There is a free allowance – currently 25,000 free daily views – after which Google will start to charge you for your use of their mapping software.

When we developed the Google Map widget we felt that the use of it would be minor and that there would be no need for the API key. Until June 2016, Google allowed this, but since then they have hardened their license restrictions. Now we see Google refusing to show maps if the API key is missing. The error message looks like this:

Screenshot of the error mesage you get for a Google Map without an API key

In a future version of the program, we will add support for the Google API key to the widget, so that it is easy for you to use your own API key with any map you display. Until then, you must manually add your API key into the generated code to ensure that the map request is approved by Google. This help page contains the instructions on how to do this.

Obtain a unique Google API key

You must register as a web user of Google’s services. If you or your company don’t already have a unique Google API key, you can request one for free from Google at https://developers.google.com/maps/documentation/javascript/get-api-key. The API key defines a business relation between you and Google and looks like this:

Ank-vGEyklDRtmT_rPUgzgjCEzYWrGj7AIzaSyD

It only takes a few minutes to create and it’s something Google requires. If you already have a working API key, you can use it for as many maps as you please.

Note that API keys can be stolen from your web pages and used by anyone unless you restrict them to be valid only for your own domains. Always protect your API keys by using the Accept requests from these HTTP referrers (web sites) option in Google Console where you add your domains in two formats: *.example.com/* and example.com/*.

If one of your API keys is compromised, we recommend that you generate a new one and deactivate the old using the Google Console.

Enable the Google Maps API

In the Google Console, enable the Google Maps API for the API key you have generated.

Convert the spreadsheet that contains the widget

Open a spreadsheet that contains a Google Map widget in Excel. Move to the SpreadsheetConverter ribbon and click Convert to convert the spreadsheet to web format.

Locate the converted web page

Normally, the converted web page is stored in your Documents > SpreadsheetConverter folder. If you don’t find it, the location may have been changed in the SpreadsheetConverter ribbon > Options > Browsers and Conversion Path Option.

In the folder with the converted web pages, each conversion result is stored twice: 1) uncompressed in a folder and 2) compressed in a ZIP file. We recommend that you delete the ZIP file, then edit the uncompressed version. If you intend to upload the calculator using the WordPress Plugin to Import Spreadsheets from Microsoft Excel you must then compress the updated folder into a new ZIP file before you upload it with the plugin.

Edit the converted web page

In the folder with the conversion output, you will find a main .htm file that is bigger than the others. For some flavors, it has the same name as the spreadsheet, e.g. example.htm. For some flavors, it may be called index.htm. Open this file in a text editor.

Search for a section at the end of the page source that look like this:

<script>document.write("<script type='text/javascript' src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//map.google.com/maps/api/js' defer></script>");</script>

This is the code we use to generate a Google Map widget on the web page. Now edit this code snippet to look like this:

<script>document.write("<script type='text/javascript' src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//map.google.com/maps/api/js?key=Ank-vGEyklDRtmT_rPUgzgjCEzYWrGj7AIzaSyD' defer></script>");</script>

The key in bold in the example above is made up, it is just an example and won’t work for you. You must insert your own API key that Google has sent you for the script to work properly.

If you use more than one Google Map widget in the page, all map views will be attributed to the API key you just added.

Save the edited file.

Compress the entire folder to a ZIP file if this is required when you upload the calculator.

Upload the web page

There are many ways to upload a converted spreadsheet to a web page and there is no room to document them all here. You may be using FTP against a local website or the WordPress Plugin to Import Spreadsheets from Microsoft Excel. Just follow the same procedure that you used the previous time you uploaded the calculating web page.

Test the web page

When you have uploaded the web form or calculator and embedded it into your blog or website, open it in your browser and verify that all Google maps appear correctly.

If you still get the error message above, you may be viewing a cached version of the page. Use the View Source option of your web browser to verify that the API key you inserted is indeed present in the HTML source for the web page you are viewing. If it isn’t, clear any caches in your web browser and web server until the API key is really present in the source for the web page.

If the error persists you may need to double-check the file you edited against the instructions above. It is programming code and it must follow the JavaScript syntax requirements.

We are always here to help you succeed with SpreadsheetConverter. Please contact our Help Desk if any of your Google Maps still don’t appear properly on your website.

Repeat for every future conversion

You need to update this every time you convert the spreadsheet, since every conversion overwrites the previous conversion results.