[笔记] Google Place API 串接 (Google Map 系列服务)

章节连结

Alpha Camp 的第二学期课程,让大家试试水温串接 API。在心血来潮下,想说串接个 Google Map 的 API 来玩玩看。不过要做的准备工作还真不少,以下是试验不少次后所得到的心得。
web development


串接前的准备工作

1. Google Cloud

请进入 Google Cloud 网站,并点选免费试用(Free Trial),完成注册手续(选取地点和输入信用卡资讯)。google api intro-4google place api intro完成后,请创建一个专案,并进入”API 和服务” 设定页面,寻找要开启的API并启用。(这里以 Google Place API 为例)
google place api


完毕后,点选”API 和服务” 设定页面里的”凭证”,然后建立一组凭证,让你的程式可以呼叫。
google api intro再来,为了避免有心人士滥用你的凭证,所以要进入凭证的设定页面,限制可以存取的 API。在这里,选取所有有关地图服务的API后,储存设定。
AlphaCamp,CSS,google api place,google api教学,google map api,google map api 教学,google place api教学,HTML,JavaScript,selfStudyProgrammingRecord当你的网页完成后,若你要上传到某网域(如:github),记得要限制应用程式的存取方式。在这边,我是使用参照网址和网站限制,换言之,就是这几个网域来的呼叫,Google才会回传资料。
google api intro-3


2.存取方式

Google 若在本机端直接用方才申请的凭证呼叫,其回传资料都会有 CORS error 问题。目前唯一解法是加载 Google Library API 的Script 来存取。

实作步骤

Nearby Search

于 HTML 页面时,请注意会有 Google Library 的程式码要写在自己的JavaScript前面,这样才可以避免掉异步处理的问题。

范例网页请点此。


参考资料

1. Google Nearby Search Demo
2. Google Nearby Search Document

按赞加入粉丝团

延伸阅读