{"id":18131,"date":"2024-01-24T08:35:17","date_gmt":"2024-01-24T01:35:17","guid":{"rendered":"https:\/\/www.makewebeasy.com\/en\/blog\/?post_type=manual-4&p=18131"},"modified":"2024-01-24T08:35:17","modified_gmt":"2024-01-24T01:35:17","slug":"google-api-connection","status":"publish","type":"manual-4","link":"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/google-api-connection\/","title":{"rendered":"Google API Connection"},"content":{"rendered":"

Google API<\/h2>\n

You can make your website connect to the Google system with these systems:<\/span>
\n\u25cf\u00a0\u00a0<\/span>Google Login<\/span><\/strong>
\n\u25cf\u00a0\u00a0<\/span>Google Map<\/span><\/strong><\/p>\n

 <\/p>\n

Set up Google Login<\/span><\/h2>\n

The system enables customers or website visitors to apply for membership and login to the website easily by clicking through your Google account.<\/span><\/p>\n

1. Go to\u00a0<\/span>\u00a0https:\/\/developers.google.com\/identity\/sign-in\/web\/sign-in<\/span><\/a><\/p>\n

2. Click on the\u00a0\u00a0<\/span>Credentials page link.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

3. If you haven’t logged in yet, log in with your\u00a0<\/span>Gmail account, <\/span><\/strong>then click “Next”<\/span><\/strong> \u00a0(If you have already logged in the system will take you to point 4.)<\/span>
\n\"\"
\n4. Click on the “+CREATE <\/strong><\/span>CREDENTIALS” <\/span><\/strong>button.
\n<\/strong>
\n\"\"<\/p>\n

5. <\/strong>Click on the “OAuth client ID”<\/strong> option.<\/span>
\n<\/strong>
\n\"\"<\/p>\n

6. <\/span><\/strong>Click on the select box<\/span><\/strong> option and select\u00a0<\/span>Web application.<\/span>
\n<\/strong>
\n\"\"<\/p>\n

\"\"<\/p>\n

7. Click on the “<\/span>ADD URI” <\/span><\/strong>button.
\n<\/strong>
\n\"\"<\/p>\n

8. Enter your website URL starting with https (e.g. https:\/\/www.makewebeasy.com) and p<\/span>ress the <\/span>CREATE <\/span><\/strong>button.
\n<\/strong>
\n\"\"<\/p>\n

\"\"<\/p>\n

9. In this section, you will get the<\/span>\u00a0Client ID<\/span><\/strong> for using\u00a0\u00a0<\/span>Google Sign-In.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

10. Enter\u00a0\u00a0<\/span>the Client ID<\/span><\/strong>\u00a0value \u00a0into the\u00a0\u00a0<\/span>Google Sign-In Client ID field on the\u00a0<\/span><\/strong>Google API<\/span><\/strong> \u00a0Settings page and then set to <\/span>enable <\/span>the Google Sign-In system.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Set up Google Maps<\/span><\/h2>\n

Map display system on the website for customers or website visitors Able to know the location of the store or company.<\/span><\/p>\n

1. Go to\u00a0\u00a0<\/span>https:\/\/cloud.google.com\/maps-platform<\/span><\/a>
\n2. Click on the <\/span>GET STARTED <\/span><\/strong>button.<\/p>\n

\"\"<\/p>\n

3. <\/span><\/strong>Click to select Maps<\/span><\/strong>\u00a0usage\u00a0 and press\u00a0<\/span>CONTINUE.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

4. If you haven’t logged in yet, log in with\u00a0your\u00a0<\/span>Gmail account<\/span><\/strong>,<\/span><\/strong> then click Next<\/span><\/strong> (If you have already logged in the system will take you to point 5).<\/span><\/p>\n

\"\"<\/p>\n

5. Fill the <\/span>project name<\/span><\/strong>\u00a0as desired. The name must contain more than 4 characters, including a space and\u00a0\u00a0<\/span>\u2013<\/span><\/strong> \u00a0. When the name is complete,\u00a0<\/span>click to accept Yes<\/span><\/strong>\u00a0\u00a0and\u00a0<\/span>click NEXT.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

6. Click <\/span>CREATE BILLING ACCOUNT<\/span><\/strong>\u00a0\u00a0to set up payment information.<\/span><\/p>\n

\"\"<\/p>\n

7. If your Google account has never been used to obtain a\u00a0\u00a0<\/span>Google Map API<\/span><\/strong> key before, a 30-day free trial will be offered as shown in the image below. Select your country, such as Thailand, and review the Terms of Service > <\/span>Click\u00a0<\/span><\/strong>\u00a0AGREE AND CONTINUE.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

8. Set up a payment profile, edit your account type, and fill in your name and address (Step 2 of 2)<\/span><\/p>\n

\"\"<\/p>\n

9. Scroll down to set your payment method. Edit your current name and location > <\/span>Click START MY FREE TRIAL.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

10. Once the credit card information has been set up. Click on the word\u00a0\u00a0<\/span>Credentials <\/span><\/strong>and click on the word<\/span>\u00a0Configure consent screen.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

11. After that, on the next page you will see <\/span>the OAuth consent screen<\/span><\/strong>. Select <\/span>User Type <\/span><\/strong>as <\/span>External<\/span><\/strong> and press\u00a0<\/span>Create.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

12. Fill in the information in the <\/span>App information<\/span><\/strong> field. <\/span>App name<\/span><\/strong> should be a domain name that does not contain .com, <\/span>for example <\/span>makewebeasy.<\/span><\/strong> For <\/span>User support email<\/span><\/strong>, enter it as the email name that we used to register initially.<\/span><\/p>\n

\"\"<\/p>\n

And in the <\/span>Developer Contact information<\/span><\/strong> field, enter the email name used to register as well, as in the picture.<\/span><\/p>\n

\"\"<\/p>\n

After that, click on the word <\/span>SAVE AND CONTINUE.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

 <\/p>\n

And click on the word <\/span>SAVE AND CONTINUE<\/span><\/strong>\u00a0\u00a0again as well.<\/span><\/p>\n

\"\"<\/p>\n

After that, click on the word <\/span>BACK TO DASHBOARD.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

 <\/p>\n

13. Click on Credentials <\/span>and<\/span><\/strong> click on <\/span>+Create Credentials and<\/span><\/strong>\u00a0click on\u00a0<\/span>\u00a0API key.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

14. After that, press copy <\/span>Your API key <\/span><\/strong>and click on the word\u00a0<\/span>RESTRICT KEY.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

15. In the <\/span>Application restrictions<\/span><\/strong> section, click on <\/span>HTTP referrers (websites) and in <\/span><\/strong>the Website restrictions <\/span><\/strong>section, click on <\/span>ADD AN ITEM.<\/span>
\n<\/strong><\/p>\n

\"\"<\/p>\n

The information in the <\/span>ADD AN ITEM <\/span><\/strong>section must be taken from the back-end system.<\/span><\/p>\n

\"\"<\/p>\n

16. Under <\/span>API restrictions<\/span><\/strong>, click on <\/span>Don’t restrict key <\/span><\/strong>and click on <\/span>save.<\/span><\/strong><\/p>\n

\"\"<\/p>\n

17. After that, click on the word <\/span>APIs<\/span><\/strong> to activate the 4 topics as follows.<\/span><\/p>\n

1.\u00a0Geocoding API<\/strong>
\n2.\u00a0Geolocation API<\/strong>
\n3.\u00a0Maps JavaScript API<\/strong>
\n4.\u00a0Places API<\/strong><\/p>\n

\"\"<\/strong>
\nFor example, to enable\u00a0<\/span>the Maps JavaScript API,<\/span><\/strong> click on it. <\/span>You will see the display page as in the picture. Click on the word <\/span>ENABLE\u00a0<\/span><\/strong>\u00a0and it is considered finished opening.<\/span><\/p>\n

\"\"<\/p>\n

After that, press the back sign <\/span>\u2190 <\/span><\/strong>and click on the word\u00a0<\/span>APIs<\/span><\/strong> \u00a0in the left bar t<\/span>o return and open all 4 topics as shown in the picture.<\/span><\/p>\n

\"\"<\/p>\n

18. Return to our website. Go to the\u00a0\u00a0<\/span>Design<\/span><\/strong>\u00a0page \u00a0>\u00a0\u00a0<\/span>Contact Us menu<\/span><\/strong> \u00a0> Click on the word <\/span>Map and Branches > Manage >\u00a0<\/span><\/strong>\u00a0Let us paste\u00a0\u00a0<\/span>the API Key<\/span><\/strong> \u00a0 that we copied in item 14 > and click <\/span>Add Branch<\/span><\/strong>\u00a0\u00a0>\u00a0\u00a0\u00a0<\/span>Save.<\/span><\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n","protected":false},"featured_media":0,"template":"","manual_category_v4":[1810],"yoast_head":"\nGoogle API Connection - MakeWebaEasy Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/google-api-connection\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Google API Connection - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"Google API You can make your website connect to the Google system with these systems: \u25cf\u00a0\u00a0Google Login \u25cf\u00a0\u00a0Google Map   Set up Google Login The system enables customers or website visitors to apply for membership and login to the website easily by clicking through your Google account. 1. Go to\u00a0\u00a0https:\/\/developers.google.com\/identity\/sign-in\/web\/sign-in 2. Click on the\u00a0\u00a0Credentials page […]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/blog\/wp-content\/uploads\/2020\/04\/G1-620x382.png\" \/>\n<meta name=\"twitter:creator\" content=\"@makewebeasy\" \/>\n<meta name=\"twitter:site\" content=\"@makewebeasy\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4\/18131"}],"collection":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4"}],"about":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/types\/manual-4"}],"wp:attachment":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=18131"}],"wp:term":[{"taxonomy":"manual_category_v4","embeddable":true,"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual_category_v4?post=18131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}