Google Places API & Geocode API integration in Ionic 2023

Summary

このビデオでは、Google Places APIの使い方と検索結果の取得方法について学ぶことができます。まず、新しいプロジェクトを作成し、Google Maps APIの取得方法を説明しています。次に、Places APIとGeocode APIを有効にすることが重要です。その後、検索バーを作成し、デザインを整えます。検索バーには、検索アイコン、クリアボタン、フォーカス、アニメーションなどのプロパティを設定します。入力欄での変更を検出するために、`ionChange`と`ionInput`のどちらかを使用することができますが、リアルタイムでの入力検出は`ionInput`が適しています。Google Maps APIを使用して、検索バーのデザインを整えた後、動的なリストを作成し、Google Maps APIと連携して検索結果を表示します。最後に、`geocode`機能を使用して、住所から緯度経度を取得する方法も紹介しています。このビデオは、Google Maps APIを使ったアプリケーション開発の基礎を学ぶための優れたリソースです。

Takeaways

• 📚 まずはGoogle Maps APIの取得とプロジェクトの設定について説明しています。
• 🔍 Google Places APIとGeocode APIを有効にすることが必要です。
• 🛠️ Ionicを使用して、デザインと検索バーの作成方法が紹介されています。
• 📈 入力時の変更検出について、`ionChange`と`ionInput`の使い方と違いが説明されています。
• 🌐 Google Maps APIのスクリプトを有効にし、APIキーを通じて機能を開始します。
• 📱 iOSモードでのデザイン調整方法が説明されており、検索バーのセンタリング方法が提案されています。
• 📝 動的なリストを作成し、各アイテムにアイコンとタイトルを表示する方法が紹介されています。
• 🔑 TypeScriptを使用して、Google MapsのAutocompleteサービスを初期化し、検索機能を実装しています。
• 📊 緯度と経度を取得するために、Google MapsのGeocode機能を使用する方法が説明されています。
• 🔄 observablesを使用して、非同期データの変更を監視し、メモリリークを避ける方法が提案されています。
• 📈 最後に、検索結果の表示と、より多くの結果を取得するために必要なPremium版のGoogle Mapsの存在が触れられています。

Q & A

Google Places APIを有効にする方法は？

Google Places APIを有効にするには、Google Cloud Platformでプロジェクトを作成し、Places APIを検索して有効にします。APIキーも必要です。

Geocode APIとは何ですか？

Geocode APIは、住所を地理的座標に変換するためのAPIです。これにより、住所から緯度と経度の情報を取得できます。

ion-inputとion-changeの違いは何ですか？

ion-inputは入力が行われるたびにイベントが発生し、ion-changeはエンターキーが押されるとイベントが発生します。

APIキーはどのようにして取得するのですか？

APIキーはGoogle Cloud Consoleでプロジェクトを作成した後、対応するAPIを有効にすることで取得できます。APIキーはAPIリクエストに必要です。

TypeScriptでstrictモードをfalseに設定する理由は？

TypeScriptのstrictモードをfalseに設定すると、厳格な型チェックが緩和され、初期化されていない変数や不明な型が許容されます。これにより開発が柔軟になります。

Google Maps APIのスクリプトを動的に挿入する利点は何ですか？

スクリプトを動的に挿入することで、ページの読み込み速度を向上させることができ、必要に応じてAPIキーを安全に管理することが可能です。

プレースの自動補完を使用する利点は何ですか？

プレースの自動補完を使用すると、ユーザーが入力するときに関連する場所の候補が即座に表示され、ユーザー体験が向上します。

検索結果を制限するにはどうすればよいですか？

検索結果を制限するには、Geocode APIのリクエストに地域制限を設定することができます。たとえば、特定の国からの結果のみを要求することが可能です。

Ionicでのデザイン調整の方法は？

Ionicでは、CSSやSCSSを使ってデザインを調整できます。たとえば、ion-search-barにパディングを追加して、デザインをiOSデバイスに合わせることができます。

Google Places APIとGeocode APIの併用の利点は何ですか？

Google Places APIとGeocode APIを併用することで、ユーザーが場所を検索しやすくなり、その場所の正確な地理的座標を得ることができます。これにより、地図上での正確な位置情報の提供が可能になります。

Outlines

00:00

😀 Google Places APIの使い方と検索結果の取得

Google Maps APIの取得方法について説明し、Google Maps APIを有効にし、Google Places APIとGeocode APIを有効にする手順を解説しています。また、プロジェクトの初期設定とGoogle Maps APIのデザインについても説明されています。

05:01

🔍 Google Maps APIを使用した検索バーの作成とデザイン

検索バーの作成方法と、そのデザインに関する詳細が説明されています。検索アイコンの変更、アニメーションの設定、クリアボタンの挙動、入力欄の挙動など、ユーザーインターフェイスに関する細かい調整方法が紹介されています。

10:01

📍 Google Maps APIで場所を検索し、緯度経度を取得

Google Maps APIを使用して、検索バーから入力されたクエリに基づいて場所を検索し、それぞれの場所の緯度経度を取得する方法が説明されています。Autocomplete Serviceの使い方、Geocode機能の有効化、そしてpromiseを使用して緯度経度を取得するプロセスが詳述されています。

15:02

📝 検索結果の表示とObservablesの活用

検索結果を表示し、Observablesを使用して非同期処理を管理する方法が説明されています。places配列への値の追加、エラー処理、そしてメモリリークを防ぐためのアンサブスクライブ処理が詳しく説明されています。

20:04

🎓 Google Maps Places APIの活用と今後の課題

Google Maps Places APIの活用方法を総括し、今後の課題としてObservablesの活用について触れています。また、動画の感想やチャンネル登録、いいねボタンの押下を呼びかけ、視聴者の健康とコーディングへの情熱を願っています。

Keywords

💡Google Places API

Google Places APIは、Google Mapsの一部であり、開発者が特定の場所に関する情報を検索・取得できるようにするサービスです。このAPIを使用することで、ユーザーは近くのレストランやカフェなどの情報を検索することができ、ビデオの主題はGoogle Places APIを使って検索結果を取得する方法を学ぶことです。

💡Google Maps API

Google Maps APIは、地図の表示や検索機能を提供するAPIで、Google Places APIと組み合わせて地理情報を活用することができます。ビデオでは、Google Maps APIの取得方法や使用方法について説明しています。

💡ionic server

ionic serverは、Ionicフレームワークで開発されたアプリケーションをローカルで実行するための開発サーバーです。ビデオでは、ionic serverを使ってアプリケーションをブラウザで実行し、Google Maps APIの機能をテストしています。

💡SCSS

SCSSは、CSSのプリプロセッサで、スタイルシートの記述をより柔軟に行うことができます。ビデオでは、SCSSを使用して、検索バーなどのUI要素のデザインをカスタマイズしています。

💡HTML

HTMLは、ウェブページの構造を定義するマークアップ言語です。ビデオでは、HTMLを使用してGoogle Maps APIの検索バーや結果を表示するリストなどのUI要素を作成しています。

💡TypeScript

TypeScriptは、JavaScriptのスーパーセットで型チェックやオブジェクト指向の機能を追加した言語です。ビデオでは、TypeScriptを使用して、Google Maps APIとやりとりするためのロジックを記述しています。

💡Autocomplete Service

Autocomplete Serviceは、Google Places APIの機能で、ユーザーが入力したテキストに基づいて検索候補を自動的に完成するサービスです。ビデオでは、このサービスを使ってユーザーが入力するテキストに応じて検索候補を表示する方法を学びます。

💡Geocode API

Geocode APIは、Google Mapsのサービスで、住所や地名を緯度経度座標に変換する機能を提供します。ビデオでは、Geocode APIを使って検索結果の住所を緯度経度座標に変換するプロセスを説明しています。

💡Observables

Observablesは、RxJSライブラリで提供されるプログラミングパターンで、非同期データストリームを扱うことができます。ビデオでは、Observablesを使って、Google Maps APIから取得したデータを効率的に処理する方法を学びます。

💡NgModule

NgModuleは、Angularフレームワークの基本概念で、関連するコンポーネント、ディレクティブ、サービスをまとめてアプリケーションの機能モジュールを作成します。ビデオでは、NgModuleを使ってGoogle Maps APIの機能をアプリケーションに統合する方法が触れられています。

💡ngOnInit

ngOnInitは、Angularのライフサイクルフックで、コンポーネントが初めて表示されるときに一度だけ実行されるメソッドです。ビデオでは、ngOnInitを使ってGoogle Maps APIの初期化処理を実装しています。

Highlights

Introduction to working with the Google Places API to retrieve search results

Creating a new project and obtaining the Google Maps API key

Enabling the Places API and Geocode API in the Google Cloud Console

Designing the user interface with Ionic for the search bar and results

Configuring the search bar with custom properties like search icon and clear button focus

Using ion-change and ion-input for detecting input changes and handling typing delays

Configuring tsconfig.json to avoid TypeScript errors

Adding the Google Maps script with the API key to index.html

Styling the search bar for proper alignment on iOS devices

Creating a dynamic list to display search results with iron-list and iron-items

Initializing the Google Maps AutocompleteService to fetch place predictions

Using a for-each loop to process and modify the predictions

Geocoding addresses to get latitude and longitude using the Google Maps GeocodeService

Handling errors and logging them in a try-catch block

Using Angular's NgZone to detect changes and update the UI

Storing the final list of places in the 'places' array

Using Observables for efficient handling of asynchronous data updates

Subscribing to the searchPlaces Observable and unsubscribing on component destruction

Final demonstration of searching for a location and displaying the results

Conclusion and invitation to subscribe and like the video for more content

Transcripts

Hello friends welcome back to cooling

techniques again today I am going to

teach you how to work with the Google

Places API and how to get all the

results which you are looking for when

you search for it so let's get started

now you can see I have already created a

new project and I have already got my

Google Maps API if you do not know how

to get the Google Maps API you can just

look into my other videos where I have

shown how to get the Google Maps API the

link is there in the description or you

can just click on the I button too now

after getting the API you need to make

sure that you enable the Google Maps

sorry the places API and also the

geocode API let's get started now so in

the blank project which I have created

just now I have cleared up everything

from the scss and also from the HTML

part and this is how it is running into

our browser I've run ionic server now

let's get started with Google Maps API

designing it first so Google places

that's the title that I am going to give

and let me change the color to be the

primary one so that it looks nice

because we have to design it properly

right now this is the iOS mode this is

iPhone 13. now I'm going to create

another toolbar for our search bar

because that's where we are going to

make the search button so iron search

bar I'm going to use you can just check

the documentation if you don't

understand something but it's pretty

easy I'm sure you will understand each

and everything here now within this

search bar we can give certain fills or

I would say properties let me just pass

those which I want now I want search

icon to be changed to search circle now

you can see this is search Circle that

is coming up animation to True suppose

if you click on it it will animate to

the left side that is how it is looking

nice then clear button Focus if you just

click on it and type something here the

button is coming up that is trash in and

the focus is always there so that is

what it is showing up I think clear

button Focus okay fine then the bounce

are given of 800 milliseconds because I

want after typing it takes some time to

render it up otherwise if I type it will

keep on rendering this stuff which I

don't want when I stop for like some

milliseconds then only I want it to get

triggered that is why then after the

placeholder has been given that's pretty

okay now there is one important thing I

want to a track for the change detection

here for which I can use I and change

but in ion change there is a problem

that if you just type something it will

not detect instantly until unless you

press the enter that is the newest in

the newest version this is a thing that

they have introduced and for overcoming

that you can use ion input here so we

are going to try both of them let's work

with this at first so let me pass a

function here in the ion change call on

searching or you can give any name you

want now within the typescript let's

create that on search change event and

let's log the value of it event you will

get certain errors and for overcoming

that error so simply go to tsconfig.json

file and set this trick to false

otherwise strictly type checking will be

done for in the typescript one and you

will get certain error because we have

not initialized it to any value if you

don't want those errors definitely you

can pass like a string or any value like

you can pass any also here I think that

error will go away if I just change it

to True again I don't think there will

be any error now okay since I didn't

give anything that is why the error was

coming up I have changed back to false

because I want to keep it as false only

for the timing okay now let's check it

out suppose and how will I check it let

me open this up okay now if I just type

here something a a until unless I hit

enter it won't detect so now I'll just

hit enter and you can see event is

getting triggered in which I am getting

the value in the detail dot value okay

this is the value that is coming up now

if I change this to ion input let me

minimize it and try it again for the

HTML if I change it to iron input let's

track it now I'll open it up and if I

just type here AA once again I have not

clicked enter and it is detected

automatically so this is working but in

real time scenario ion input is not that

efficient to work with that is why I

think ion change is fine to work with so

hitting an enter button is quite okay

you will get the keyboard one where you

can click on the search one and you can

start working with it I think that is

better but anyways that's completely our

choice for the timing I'll just keep it

as an input only just for you to

understand and work with it properly now

let's start with the Google Maps API for

which in the index.html I just commented

it and I'm uncommenting this particular

script in which this is the URL where I

am going to pass the API key here and

you can pass this you can see places

libraries I'm using and a callback is

being passed which is a nuke one means

no operation will be done just passing

it otherwise I was getting some warning

so I just want those warnings for which

you can pass it up okay once that is

done I think we are good to go you just

need to pass your API key I'll pass my

API key key here and if you want this

script to be done dynamically you can do

it from the typescript one which I'll

not cover up in this particular video

okay so now let's move ahead and I'll

just place my API and start working with

it so in order to start working with it

at first for the designing part you can

see this is not aligned properly for iOS

right so in order to align the search

bar at the center what am I going to do

I'm going to look for the size of it

let's search for it what am I going to

do I'll just click here and look for

this particular value what is coming up

you can see it is having a padding top

one and at the bottom 15 so I can in

total of 16. so I will give 88 to both

sides let's do it let me go to scss and

only for iOS I need to pass so dot iOS

and within that I can directly access

the ion search bar okay where I'm going

to pass padding to be top and bottom 8

pixels and otherwise 12 pixels that was

already given by default now you can see

it is centered up nicely isn't it so

once that is turned let me prepare a

list also what am I going to do I'm

going to prepare an iron list within

which I am going to have an iron item

where I'll pass an iron icon whose name

is going to be location outline and Slot

will be start okay let me just close it

so this will be my icon that will be

coming up here and along with that I

want an iron label 2 where I'm going to

pass the title and everything so I can

have that let me pass title here so this

will be coming up here okay and along

with that you can even have a P tag also

not exactly in this manner let me enter

and P tag where I'll have an Intex you

can change the color because because of

that and I'm going to pause the

description here is the address part and

everything all right so that's what you

can do okay so our design is ready now

we need to make it Dynamic here for

which I'll go to the where I'll go to

the its TS file and here well I'm going

to create an array here called places

array of type any that will be

initialized to an empty array initially

I'll go to the HTML again and I'll give

a condition here NG if please see

question mark dot length should be

greater than zero then only it's going

to work and in the iron item I'm going

to run a loop here let place of places

okay so this is done now here I am going

to pass please question mark dot title

that's what I'm going to like have the

value to be okay don't worry and let me

give share please okay press this please

question mark dot description or address

maybe any one of those I'll just check

it okay so now you won't see anything

here okay great so what next I need to

do well let's go to the typescript now

and in the typescript in order to work

with the Google Maps I'll just use

declare a variable called Google that's

how we can do it in JavaScript and we

can start working with it now I'll just

call implements on init and even I would

need on Destroy don't worry I'll tell

you why I need all those first let me

have it in Gionee neat and NG on Destroy

both of them are ready now so we have

the places array here now on change what

I need to do let's work on that I have

to get the value of this particular

query that I'm passing there so let me

have a very variable called or property

called query which will be of type

string here and I am going to like

initialize the value of it to even dot

detail dot value we have already seen

that let me make it a sync now I'm going

to call this particular function here

gate places if the query line is greater

than 0 if you don't have any query

definitely I don't want any places to be

searched for okay and in the places I

don't need to pass it actually I can

directly use it so this dot places gate

places which is the function name that I

need let's work with this particular

function now everything will be done

within a try catch block a single way

try catch I want to track each and every

error if there is any okay at first I

will initialize a service here that will

be taking the autocomplete service from

the Google Places API okay this is how

you can initialize it and this Google is

coming up from the Declaration that we

have given here and it's going to run

from the index HTML script that we have

passed for the Google Maps API all right

so it's going to work in that particular

manner now in fact I would get some

error also because I am using in the

HTML NG if an ng4 that is a part of

common module as I have I'm using

Standalone once so we need to pass it

directly here common module now there

won't be any error otherwise you might

face some error here which we have not

seen but you might be looking into that

mostly anyways now that will be solved

so this is the first step which we need

to make in order to fetch that service

for auto completion one of the places

after doing that what am I going to do

well I'll get the predictions here

service dot gate places prediction

that's what I'm going to use within

which I can pass it in property so I'm

going to pass in the input this dot

query that's what I need to pass here

for the input one and you can pass some

restrictions also for the country wise

let me just show you if you want to this

is how you can pass the restrictions for

the country part if you want a specific

country to be called means of places

from that country only definitely you

can use this API miss this particular

stuff you can just uncomment it and use

it up all right moving ahead now this

particular stuff will give us a callback

in which we will get predictions and

then this will be the Callback in which

we are going to work with the other

stuff or the functionality actually so

let me initialize the a variable called

autocomplete items where I'll get all

the places one by one because it's going

to generate one by one and after doing

that I'll have all the other

functionality within the zone and Zone

because it will detect the changes so in

order to use that well you can simply

try without it also but I want to use it

private Zone NG Zone okay this is

imported from where it is at angular

slash core okay and once that is turned

I'm directly going to use it I'm going

to run this up in this particular manner

within which what am I going to do I am

at first going to check if there are

some predictions that means predictions

is not null then only I'm going to go

ahead okay once I go ahead with it I

want to modify these predictions if you

don't want that definitely you can

directly pass this prediction sir

because it's going to give you the whole

array but I want to like modify it so I

am going to use a for each Loop here in

order to modify this particular stuff so

I'm using this for each one and within

this I will be passing in order to get

the Latin long I will be using this

particular code so in this particular

code in order to get the Latin long I am

going to use a function called jio code

in which I'm going to pass the

description within the prediction here

don't worry you will see what is there

in the console log then I I am creating

an object in which the title address let

long will be prepared in this particular

manner if you don't want this you can

skip this part then we'll get each and

every places and then finally I'm going

to push that in this particular

autocomplete items adding now you can

use mapping also here but in the mapping

we don't use async away that is why I

think 4 which is fine here all right now

let me work with the geocode

functionality here in order to get the

Latin long that is also a part of Google

Maps only so you need to enable Google

geocode or you can use native geocoder

plugin also from code over one in

capacitor also you can use that so you

can use that also if you want but with

browser I if you want to work with

browser also definitely this geocode

functionality from the Google Maps is

much better so you need to enable that

also in the Google Maps now let me

directly pass the functionality for this

particular one here in this manner okay

this will be my jio code where I'll just

pass the address and I'll get let along

in this particular manner which will be

an object which I have defined here and

I'm going to return a promise in which

I'll get the geocoder from the Google

Maps and will pass on the address here

in the result I am going to get the

letter long in this particular manner

which I am going to pass it in the

resolve so it's I hope it's easy to for

you to understand if you know about

promises which I have explained in a lot

of videos so this is how we will get the

Latin long which I am passing it here

the once that is being passed our main

job is to get out of this for each Loop

and need to pass the value within our

places array right so this places should

hold the particular values now in order

to do that if I just pass directly this

dot places will be equals to auto

complete items okay let's check it out

what do we get here and in the catch one

I'll just pass the log here because we

are not using it very frequently now

means just for the functionality we are

using it we are not throwing and

fetching it here so I think that's fine

or you can just pass some error tools

message also if you want to now you can

see if I just try to like do something

here you will see the results in this

particular log let's try this now I'll

just pass 10 forward let's see what do

we get you can see some results are

coming up and it is showing up here

directly that's in fact great and let's

check it out once again what do we get

actually the prediction one so each and

every prediction is coming up where we

have the description the match strings

laces and the structure formatted where

we have the main text that is what I'm

taking for the title one all right you

have the place ID also if you want to

keep that for any tracking part or

something then you have certain types so

you can just look into the documentation

that you're in not the documentation you

can just look into this log what exactly

your gating and where it is located and

everything is given so this data is

coming up now I want to like that's fine

but if you face some problem with this

particular data then what you can do is

you can use observables and with the

help of observables you can like resolve

this problem if it is not coming up in

one group all right so that's what you

can do here for the timing it is coming

up and I don't think I need to make it

change here so let me just log the value

and check what exactly I'm getting in

the final result this dot places and

along with that in the HTML what am I

going to do for the ion item I'm going

to pass a class with ion margin top so

that there is some spacing and it will

look better once that is done I think we

are good to go let's try this now let me

look for Carol bug so where is this

Karol bug let's search it it's showing

New Delhi and lot of related results are

coming up and it's only giving you the

Five results because I think beyond that

if you want more results definitely you

need to get the premium version of

Google Maps or you need to enroll for

something I think that is what's shown

in the Google I have not tried more than

that because this is quite enough to

work with maximum the top five results

are fine to work with if you want some

more precise you need to give more

description to the address that's what I

think okay so what exactly we are

getting in the final places well the

final places one you can see it is empty

here so it is just tracking one by one

or something it is not coming up in one

go so it's better to work with the

observables here let me just show you

the observable part because if you face

some problem so let's work with the

observables now and in order to do with

that I'm going to implement few things

very quickly for which I am using NG

only need and on Destroy so these are

the two things which uh one is for the

subscription one I am going to sub

subscribe to the value for any change

and will look for it then this is the

one which is going to look for any

changes and throw it in the next

function okay then in order to get the

subscription I'm going to use the gator

called search places which is going to

return this particular value as

observable so this is what I have

prepared now simply we need to use it

here so this dot places serve will be

equals to this dot places or not exactly

places search places because this is

what I'm using it for the Gator and I

can subscribe to this while subscribing

there is a new feature that is

introduced from I think an angular 15 on

words that you can use next and error

instead of directly passing it so let me

just show you we have to pass next here

then in the next you can simply look for

the value that will be coming up say

like places

and simply work with the Callback here

so this dot places will be equals to

places here that's what I'm going to

initialize and if you have any error you

can simply pass on the error in this

particular manner all right so it's

almost the same step but it is more

easier to make you understand that you

need to work with the next function and

the error one here okay so if there is

any error I am going to log it fine so

once that is done our subscription is

done now we need to unsubscribe also at

the very end when this page is destroyed

otherwise there will be Memory leaks so

you need to make sure that you are doing

that please say serve if it is available

then this dot places sub dot unsubscribe

or you can use directly the async part

also means directly into the without

subscribing also you can work with in

the HTML I have shown that kind of

videos also in the chat application also

I might have shown that so you can just

check that out all right so this this is

done now how to change the value because

we are directly initializing it instead

of initializing it here what am I going

to do I am going to pass the observables

here this is what the comment that I

have passed here and I'm initializing

the value and passing it in the next

function in the underscore places one so

in this particular manner Wherever

Whenever there is any change it's going

to detect pretty nicely so you won't

face any problem you can try both the

ways okay that is why I've kept it in a

commented manner so that you can try it

out so now let's check it whether it

works or not as expected so I'm going to

look for South X any address I have

given and it is showing the results so I

am happy with this too so this is what I

wanted to show you how to work with the

Google Maps places one so with this I'll

wrap up this lecture here if you like

this video make sure you subscribe to

the channel if you're new here and hit

the like button if you like this

particular video so I'm going to see you

next time till then stay safe stay

healthy and keep coding