Using Google Maps with TNG

Post Reply
Steve
Posts: 36
Joined: Sun Oct 01, 2017 3:08 pm

Using Google Maps with TNG

Post by Steve » Mon Jan 29, 2018 12:42 pm

Using Google maps is more complicated since API keys were introduced. Keys allow Google to control usage. If you remove or do not use key restrictions anyone can use your key. Its not difficult to discover your key if someone visits your site. Once someone has your key you may find maps seem to work off and on from one day to the next. This occurs because the account assigned to your key has reached its limit. So its a good idea to protect your key by using the restrictions Google provides.

Using the key is a bit more than entering it into your program. Since you are using TNG on a website, select HTTP referrees and enter your site name as shown in the Google display: *.example.com/*.* Once this is complete Google must verify your domain before the credentials are "hooked" to your site.

Go to the API dashboard https://console.developers.google.com/apis/. On the API manager screen make sure the project you used to create your credentials is selected and go to credentials. If your domain has been verified you will see your website name, the creation date, restriction type and the key.

Image

If not, select domain verification then select add domain and enter your website info.
Google may assign a new key when you re-enter your information to verify your site.

Image

There are different options for site verification depending on what type of site you have. If you are using a hosted site you can select a host and follow the onscreen instructions to obtain the verification.

If you do not have a hosted site it's a bit more complicated. You must create a DNS Alias (CNAME) with your IP Domain provider and enter the host name and target. Google provides host and target information if you select verifying with an alias. The host name will be a series of letters and numbers followed by your host name such as "ascdef4567.example.com". The target will be more letters and numbers followed by dv.googlehosted.com. Enter the host and target in the appropriate section of the host you are creating on your domain provider's website.
Once the DNS alias is created go back to the Google API and complete the domain verification. Once verified your site will be listed on the screen. At this point maps should work without issue.

Another consideration is if you are running TNG inside WordPress maps may not work depending on options you are using. For example on my site a statistics plugin was conflicting with Google maps. Deactivating the plugin fixed the issue. Your experience may be different depending on your plugins, theme and configuration settings.

Once you have your key login to the TNG administration control panel and select >Setup>Map Settings. Enter your Google MAP KEY. Then select the type of map you want to use. Note satellite maps are slower and take longer to load depending on your traffic and connection speed. If you are in the United States you can use the coordinates in the image below. If not, you can enter the coordinates for your country. This will speed up the Google search. You can change the screen dimensions, depending on how you want your maps to appear but I prefer the default settings. Make sure you save your settings before you exit.

Image

Post Reply