Using Google Maps with TNG

Steve
Posts: 63
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. In the future there will be no limits because you will pay a fee.

Google is opening a new Google Maps Platform. What does this mean for websites? They will have to pay if usage exceeds the minimum tier. Keyless maps will still be available at low resolution with a “for development purposes only” watermark. Keyless calls to the API will return an error. Websites will get a new API key linked to a billable account to pay for map services. Here is info from Google's announcement: "With this new plan, developers will receive the first $200 of monthly usage for free. We estimate that most of you will have monthly usage that will keep you within this free tier. With this new pricing plan you’ll pay only for the services you use each month with no annual, up-front commitments, termination fees or usage limits."

Prior to applying for an API Map key you will need to register a project. To register you will need to create a Google Cloud Account which can be done by going to Google Maps Platform and checking the maps box.
 
Image
 
You will not be able to proceed unless you have a Google account.
 
Image
 
You can register using a gmail address which will then link to you Google Cloud account. Complete setting up your account and setting up a project. Once the project is setup and they have your credit card on file, you can link your websites to the project.
 
Image
 
Select and enable Google Maps API Platform page opens.
 
Image
 
When you select next the 7 APIs are enabled and your API key is generated. At this point I cannot simulate completing the installation. The rest of these instruction may vary with the new system. Typically you have to verify your domain as follows: 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
 
Google has some screens to analyze your site like the traffic screen below.
 
Image
 
This screen shows calls to the Google Maps servers.
 
Image
 
One item to consider, if you plan to use Google Maps, is bots. Web Bots, crawlers and spiders can potentially trigger the Google Maps API which counts as a hit. Google claims they do not charge for googlebot hits but Google doesn't mention the hundreds or possibly thousands of other bots that may hammer your website. It's getting harder to distinguish bots from humans especially since bots can spoof headers.
What does this mean in dollars? I have no idea because I started using the OpenStreetMaps Mod.