Google Maps - Getting Started

From TNG_Wiki
Revision as of 04:40, 20 August 2016 by KenRoy (talk | contribs) (→‎Get a Key: move gmail account requirement up front)
Jump to navigation Jump to search
Ambox notice.png As of June 2016, you must get a map key from Google in order to use Google Maps on your site. TNG V11 download page contains a Maps Patch for those whose Google Maps do not work because no key was provided. Some background to this change is on the Google Geo Developers Blog.
TNG 11.0


Installing the Maps Patch

To install the Maps Patch, you should

  1. extract the contents of the mapspatch.zip to a folder
  2. upload the contents of the maps_patch folder (or whatever folder name you used for the extract) to your TNG root folder (folder where you have TNG installed)
  3. get a key from Google (note that some users have indicated that they have to leave the referrer URL blank)
  4. paste the key into the Enable maps input field

Upload Maps Patch Files

You need to upload the content of the extracted mapspatch.zip file to your TNG root folder

Maps patch FTP instruction.png

Saving the Maps Patch API Key

The Maps patch input field for storing the key may still say Enable maps since not all language folders were updated

Google maps patch key.png


Get a Key

You must have a User ID on Google in order to get a browser API key. If you are already signed up for Google Mail, you can use that User ID, otherwise you will need to create a User ID.

Get a browser API key for your web site by going to the Get a Key/Authentication page on the Google Developers site.

Note that keys previously obtains for TNG v6 through v8.1.3 for the V2 API will not work with the v3 API.

Get Google Map key


Create a Project

Create a Project


It is recommend that you not use the www in your URL when requesting your browser key, so that the key will also work with subdomains, such as tng11beta.useract.com You should also use /* after your domain name so that the maps will work for all sub folders on your site.

NOTE: You must request your key for a Browser API key

Google map api v3 browser key create.png

Note that some users have reported that they needed to leave the referrer field blank in order to get the map api to work.

Note - you need to click the Create button twice - once to enter the details of your domain, and a second time to submit it when the line to enter a second domain is empty.

Google map api v3 key generated.png

Setup Map Settings

Google Maps in TNG are controlled based on your mapconfig.php which is created / updated by going to Setup >> Configuration >> Map Settings

Setup you Map Settings

You should save the Google Map API key you obtained for your web site in the Map Key field of Map Settings.

You can set the Map Type display to

  • Map
  • Satellite
  • Hybrid (Satellite with location names)

You can also set the Default Zoom for the initial map display.

Save your Google Map API
Google Map key for localhost

Set option for Hide Admin Maps to Start:

  • No - means the Admin Place Edit will show the map
  • Yes - means the Admin Place Edit will show the Show / Hide Clickable Map button

Set option for Consolidate Duplicate Pins:

  • No - means each event will get a separate pin number
  • Yes - means that events at the same place location will be combined to a single number


Localhost key

If you run a local web server on your desktop, such as WampServer, XAMPP, or IIS and you want to test Google Maps on your local web server, you will need to get a 2nd Key for your localhost

Google map api v3 browser key localhost.png

Google map api v3 key generated.png

Latitudes and Longitudes

With TNG 7.0, there are basically two ways to add latitude and longitude to your Place location names:

With TNG 9.0, you can also use the new Geocode Function that allows you to geocode 100 places at a time.

Related Links

  • Maintenance - Places with no maps provides an SQL Report for Places with no latitude and longitude sorted in descending order of event references with links to Admin Places to help geocode