Generating Key for Google Maps Javascript API: Difference between revisions

From osCommerce Wiki
Jump to navigation Jump to search
No edit summary
Tag: Manual revert
No edit summary
Line 8: Line 8:


<nowiki>https://console.developers.google.com/?pli=1</nowiki>
<nowiki>https://console.developers.google.com/?pli=1</nowiki>
[[File:Image 64.png|none|frame]]
 
By default there is nothing in management panel section for the new account or if API has not been used yet.
By default there is nothing in management panel section for the new account or if API has not been used yet.


Click on '''Enable API''' button.
Click on '''ENABLE APIS AND SERVICES''' link.
[[File:Image 65.png|none|frame]]
[[File:Image 1320.png|none|thumb|799x799px]]
Click on '''Google Maps Javascript API.'''
Click on '''VIEW ALL''' link for the '''Maps''' section.
[[File:Image 66.png|none|frame]]
[[File:Image 1319.png|none|thumb|799x799px]]
Click on '''Maps Javascript API.''' After you enable it come back to this page and also click on '''Geocoding API''' and '''Places API''' and enable them in the same way as '''Maps Javascript API''' described below.
[[File:Image 1318.png|none|thumb|799x799px]]
If the project in console has not been created yet Google system will ask to create it. Click on '''Create project''' button.
If the project in console has not been created yet Google system will ask to create it. Click on '''Create project''' button.
[[File:Image 67.png|none|frame]]
[[File:Image 67.png|none|frame]]
'''Indicate''' the project name, '''read''' Terms of Service, '''agree''' with them and click on '''Create''' button.
'''Indicate''' the project name, '''read''' Terms of Service, '''agree''' with them and click on '''Create''' button.
[[File:Image 68.png|none|frame]]
[[File:Image 68.png|none|frame]]
After creating the project Google system will direct you to where you can enable the chosen Google Javascript Maps API. Click on '''Enable''' button.
After creating the project the Google system will direct you to where you can enable the chosen Maps Javascript API. Click on '''Enable''' button.
[[File:Image 69.png|none|frame]]
[[File:Image 1317.png|none|thumb|800x800px]]
Fill in the data and click on '''Go to Credentials''' button.
Fill in the data and click on '''Go to Credentials''' button.
[[File:Image 70.png|none|frame]]
[[File:Image 70.png|none|frame]]

Revision as of 12:05, 7 March 2024

Note: This manual is for osCommerce v4.

Create a new account in Google (if there is none) or login to the existing one.

Nothing can be done until billing is switched on (trial gives $300 for a new account for a year).

Go to the console page for developers.

https://console.developers.google.com/?pli=1

By default there is nothing in management panel section for the new account or if API has not been used yet.

Click on ENABLE APIS AND SERVICES link.

Image 1320.png

Click on VIEW ALL link for the Maps section.

Image 1319.png

Click on Maps Javascript API. After you enable it come back to this page and also click on Geocoding API and Places API and enable them in the same way as Maps Javascript API described below.

Image 1318.png

If the project in console has not been created yet Google system will ask to create it. Click on Create project button.

Image 67.png

Indicate the project name, read Terms of Service, agree with them and click on Create button.

Image 68.png

After creating the project the Google system will direct you to where you can enable the chosen Maps Javascript API. Click on Enable button.

Image 1317.png

Fill in the data and click on Go to Credentials button.

Image 70.png

Choose Google Maps JavaScript API from Which API are you using? drop down list.

Choose Web browser (Javascript) from Where will you be calling the API from? drop down list.

Then click on What credentials do I need? button.

Image 71.png

Fill in the fields:

Name: google-map-key

Accept requests from these HTTP referrers (web sites): domain name of the website (it is an optional field, when you would like to use this service for this site only).

Note: indicate only domain.

Click on Create API key button.

Image 72.png

You will see the generated API key. Click on Done button.

Image 73.png

The key is filled in in the section Settings/ Google settings under Map Key API tab.

Then you will see the following screen.

Image 74.png

In order to use the key on the website with a high volume of queries to Google Maps Javascript API, it is necessary to pass domain verification and confirm your rights for the domain, where the key will be used. Otherwise in browser console the error will appear and the map will not work.

In order to pass domain verification on Credentials tab click on Domain verification link.

Image 76.png

Click on Add domain button.

Image 77.png

Indicate dns-name of the website only (for example mysite.com)

Important: Your site must be registered on Search Console with an https:// URL or with the domain name provider verification method.

Image 78.png

On the page https://www.google.com/webmasters/verification/verification you can pass one of the suitable procedures of verification of a website owner. After that you will see the list of allowed domains.