Google Places API & Geocode API integration in Ionic 2023

Coding Technyks
13 Jun 202321:31

Summary

TLDRこのビデオでは、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の活用について触れています。また、動画の感想やチャンネル登録、いいねボタンの押下を呼びかけ、視聴者の健康とコーディングへの情熱を願っています。

Mindmap

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

play00:00

Hello friends welcome back to cooling

play00:02

techniques again today I am going to

play00:04

teach you how to work with the Google

play00:06

Places API and how to get all the

play00:10

results which you are looking for when

play00:13

you search for it so let's get started

play00:14

now you can see I have already created a

play00:17

new project and I have already got my

play00:18

Google Maps API if you do not know how

play00:20

to get the Google Maps API you can just

play00:22

look into my other videos where I have

play00:25

shown how to get the Google Maps API the

play00:27

link is there in the description or you

play00:29

can just click on the I button too now

play00:31

after getting the API you need to make

play00:33

sure that you enable the Google Maps

play00:35

sorry the places API and also the

play00:38

geocode API let's get started now so in

play00:41

the blank project which I have created

play00:43

just now I have cleared up everything

play00:45

from the scss and also from the HTML

play00:49

part and this is how it is running into

play00:51

our browser I've run ionic server now

play00:55

let's get started with Google Maps API

play00:58

designing it first so Google places

play01:00

that's the title that I am going to give

play01:02

and let me change the color to be the

play01:04

primary one so that it looks nice

play01:06

because we have to design it properly

play01:08

right now this is the iOS mode this is

play01:11

iPhone 13. now I'm going to create

play01:13

another toolbar for our search bar

play01:17

because that's where we are going to

play01:18

make the search button so iron search

play01:21

bar I'm going to use you can just check

play01:23

the documentation if you don't

play01:25

understand something but it's pretty

play01:26

easy I'm sure you will understand each

play01:28

and everything here now within this

play01:30

search bar we can give certain fills or

play01:33

I would say properties let me just pass

play01:36

those which I want now I want search

play01:39

icon to be changed to search circle now

play01:43

you can see this is search Circle that

play01:44

is coming up animation to True suppose

play01:47

if you click on it it will animate to

play01:49

the left side that is how it is looking

play01:51

nice then clear button Focus if you just

play01:55

click on it and type something here the

play01:57

button is coming up that is trash in and

play02:01

the focus is always there so that is

play02:02

what it is showing up I think clear

play02:04

button Focus okay fine then the bounce

play02:07

are given of 800 milliseconds because I

play02:11

want after typing it takes some time to

play02:14

render it up otherwise if I type it will

play02:16

keep on rendering this stuff which I

play02:18

don't want when I stop for like some

play02:20

milliseconds then only I want it to get

play02:22

triggered that is why then after the

play02:24

placeholder has been given that's pretty

play02:26

okay now there is one important thing I

play02:28

want to a track for the change detection

play02:30

here for which I can use I and change

play02:33

but in ion change there is a problem

play02:35

that if you just type something it will

play02:38

not detect instantly until unless you

play02:40

press the enter that is the newest in

play02:42

the newest version this is a thing that

play02:45

they have introduced and for overcoming

play02:47

that you can use ion input here so we

play02:49

are going to try both of them let's work

play02:51

with this at first so let me pass a

play02:54

function here in the ion change call on

play02:56

searching or you can give any name you

play02:58

want now within the typescript let's

play02:59

create that on search change event and

play03:05

let's log the value of it event you will

play03:08

get certain errors and for overcoming

play03:11

that error so simply go to tsconfig.json

play03:13

file and set this trick to false

play03:15

otherwise strictly type checking will be

play03:18

done for in the typescript one and you

play03:21

will get certain error because we have

play03:22

not initialized it to any value if you

play03:23

don't want those errors definitely you

play03:25

can pass like a string or any value like

play03:28

you can pass any also here I think that

play03:30

error will go away if I just change it

play03:32

to True again I don't think there will

play03:35

be any error now okay since I didn't

play03:37

give anything that is why the error was

play03:39

coming up I have changed back to false

play03:40

because I want to keep it as false only

play03:42

for the timing okay now let's check it

play03:45

out suppose and how will I check it let

play03:48

me open this up okay now if I just type

play03:51

here something a a until unless I hit

play03:54

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

play03:56

hit enter and you can see event is

play03:58

getting triggered in which I am getting

play04:01

the value in the detail dot value okay

play04:03

this is the value that is coming up now

play04:05

if I change this to ion input let me

play04:08

minimize it and try it again for the

play04:11

HTML if I change it to iron input let's

play04:15

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

play04:19

just type here AA once again I have not

play04:22

clicked enter and it is detected

play04:24

automatically so this is working but in

play04:27

real time scenario ion input is not that

play04:30

efficient to work with that is why I

play04:32

think ion change is fine to work with so

play04:34

hitting an enter button is quite okay

play04:37

you will get the keyboard one where you

play04:39

can click on the search one and you can

play04:41

start working with it I think that is

play04:42

better but anyways that's completely our

play04:45

choice for the timing I'll just keep it

play04:47

as an input only just for you to

play04:49

understand and work with it properly now

play04:52

let's start with the Google Maps API for

play04:54

which in the index.html I just commented

play04:59

it and I'm uncommenting this particular

play05:01

script in which this is the URL where I

play05:04

am going to pass the API key here and

play05:07

you can pass this you can see places

play05:10

libraries I'm using and a callback is

play05:13

being passed which is a nuke one means

play05:15

no operation will be done just passing

play05:17

it otherwise I was getting some warning

play05:18

so I just want those warnings for which

play05:21

you can pass it up okay once that is

play05:24

done I think we are good to go you just

play05:26

need to pass your API key I'll pass my

play05:28

API key key here and if you want this

play05:31

script to be done dynamically you can do

play05:32

it from the typescript one which I'll

play05:34

not cover up in this particular video

play05:35

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

play05:39

just place my API and start working with

play05:42

it so in order to start working with it

play05:44

at first for the designing part you can

play05:46

see this is not aligned properly for iOS

play05:49

right so in order to align the search

play05:51

bar at the center what am I going to do

play05:53

I'm going to look for the size of it

play05:56

let's search for it what am I going to

play05:59

do I'll just click here and look for

play06:02

this particular value what is coming up

play06:04

you can see it is having a padding top

play06:09

one and at the bottom 15 so I can in

play06:12

total of 16. so I will give 88 to both

play06:14

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

play06:18

only for iOS I need to pass so dot iOS

play06:20

and within that I can directly access

play06:22

the ion search bar okay where I'm going

play06:26

to pass padding to be top and bottom 8

play06:30

pixels and otherwise 12 pixels that was

play06:33

already given by default now you can see

play06:35

it is centered up nicely isn't it so

play06:38

once that is turned let me prepare a

play06:39

list also what am I going to do I'm

play06:42

going to prepare an iron list within

play06:45

which I am going to have an iron item

play06:48

where I'll pass an iron icon whose name

play06:52

is going to be location outline and Slot

play06:58

will be start okay let me just close it

play07:01

so this will be my icon that will be

play07:03

coming up here and along with that I

play07:06

want an iron label 2 where I'm going to

play07:09

pass the title and everything so I can

play07:11

have that let me pass title here so this

play07:15

will be coming up here okay and along

play07:18

with that you can even have a P tag also

play07:20

not exactly in this manner let me enter

play07:23

and P tag where I'll have an Intex you

play07:27

can change the color because because of

play07:29

that and I'm going to pause the

play07:31

description here is the address part and

play07:34

everything all right so that's what you

play07:36

can do okay so our design is ready now

play07:39

we need to make it Dynamic here for

play07:41

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

play07:44

the its TS file and here well I'm going

play07:49

to create an array here called places

play07:52

array of type any that will be

play07:55

initialized to an empty array initially

play07:57

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

play08:00

a condition here NG if please see

play08:03

question mark dot length should be

play08:06

greater than zero then only it's going

play08:08

to work and in the iron item I'm going

play08:10

to run a loop here let place of places

play08:15

okay so this is done now here I am going

play08:18

to pass please question mark dot title

play08:22

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

play08:24

value to be okay don't worry and let me

play08:28

give share please okay press this please

play08:32

question mark dot description or address

play08:35

maybe any one of those I'll just check

play08:37

it okay so now you won't see anything

play08:39

here okay great so what next I need to

play08:43

do well let's go to the typescript now

play08:46

and in the typescript in order to work

play08:48

with the Google Maps I'll just use

play08:50

declare a variable called Google that's

play08:54

how we can do it in JavaScript and we

play08:57

can start working with it now I'll just

play08:59

call implements on init and even I would

play09:04

need on Destroy don't worry I'll tell

play09:06

you why I need all those first let me

play09:08

have it in Gionee neat and NG on Destroy

play09:14

both of them are ready now so we have

play09:16

the places array here now on change what

play09:20

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

play09:23

to get the value of this particular

play09:25

query that I'm passing there so let me

play09:27

have a very variable called or property

play09:30

called query which will be of type

play09:32

string here and I am going to like

play09:35

initialize the value of it to even dot

play09:38

detail dot value we have already seen

play09:41

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

play09:44

to call this particular function here

play09:46

gate places if the query line is greater

play09:48

than 0 if you don't have any query

play09:49

definitely I don't want any places to be

play09:51

searched for okay and in the places I

play09:54

don't need to pass it actually I can

play09:55

directly use it so this dot places gate

play09:59

places which is the function name that I

play10:01

need let's work with this particular

play10:03

function now everything will be done

play10:05

within a try catch block a single way

play10:08

try catch I want to track each and every

play10:10

error if there is any okay at first I

play10:14

will initialize a service here that will

play10:17

be taking the autocomplete service from

play10:21

the Google Places API okay this is how

play10:24

you can initialize it and this Google is

play10:27

coming up from the Declaration that we

play10:29

have given here and it's going to run

play10:30

from the index HTML script that we have

play10:34

passed for the Google Maps API all right

play10:35

so it's going to work in that particular

play10:37

manner now in fact I would get some

play10:39

error also because I am using in the

play10:41

HTML NG if an ng4 that is a part of

play10:45

common module as I have I'm using

play10:47

Standalone once so we need to pass it

play10:49

directly here common module now there

play10:52

won't be any error otherwise you might

play10:55

face some error here which we have not

play10:57

seen but you might be looking into that

play10:59

mostly anyways now that will be solved

play11:01

so this is the first step which we need

play11:04

to make in order to fetch that service

play11:06

for auto completion one of the places

play11:09

after doing that what am I going to do

play11:12

well I'll get the predictions here

play11:14

service dot gate places prediction

play11:17

that's what I'm going to use within

play11:19

which I can pass it in property so I'm

play11:22

going to pass in the input this dot

play11:25

query that's what I need to pass here

play11:27

for the input one and you can pass some

play11:29

restrictions also for the country wise

play11:31

let me just show you if you want to this

play11:34

is how you can pass the restrictions for

play11:36

the country part if you want a specific

play11:38

country to be called means of places

play11:39

from that country only definitely you

play11:41

can use this API miss this particular

play11:43

stuff you can just uncomment it and use

play11:45

it up all right moving ahead now this

play11:47

particular stuff will give us a callback

play11:51

in which we will get predictions and

play11:54

then this will be the Callback in which

play11:56

we are going to work with the other

play11:58

stuff or the functionality actually so

play12:00

let me initialize the a variable called

play12:03

autocomplete items where I'll get all

play12:05

the places one by one because it's going

play12:07

to generate one by one and after doing

play12:10

that I'll have all the other

play12:12

functionality within the zone and Zone

play12:14

because it will detect the changes so in

play12:17

order to use that well you can simply

play12:19

try without it also but I want to use it

play12:21

private Zone NG Zone okay this is

play12:27

imported from where it is at angular

play12:30

slash core okay and once that is turned

play12:33

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

play12:36

to run this up in this particular manner

play12:38

within which what am I going to do I am

play12:42

at first going to check if there are

play12:44

some predictions that means predictions

play12:45

is not null then only I'm going to go

play12:48

ahead okay once I go ahead with it I

play12:51

want to modify these predictions if you

play12:53

don't want that definitely you can

play12:55

directly pass this prediction sir

play12:56

because it's going to give you the whole

play12:58

array but I want to like modify it so I

play13:01

am going to use a for each Loop here in

play13:04

order to modify this particular stuff so

play13:06

I'm using this for each one and within

play13:09

this I will be passing in order to get

play13:12

the Latin long I will be using this

play13:14

particular code so in this particular

play13:17

code in order to get the Latin long I am

play13:19

going to use a function called jio code

play13:21

in which I'm going to pass the

play13:22

description within the prediction here

play13:24

don't worry you will see what is there

play13:26

in the console log then I I am creating

play13:29

an object in which the title address let

play13:31

long will be prepared in this particular

play13:34

manner if you don't want this you can

play13:35

skip this part then we'll get each and

play13:38

every places and then finally I'm going

play13:40

to push that in this particular

play13:42

autocomplete items adding now you can

play13:44

use mapping also here but in the mapping

play13:46

we don't use async away that is why I

play13:49

think 4 which is fine here all right now

play13:51

let me work with the geocode

play13:53

functionality here in order to get the

play13:55

Latin long that is also a part of Google

play13:57

Maps only so you need to enable Google

play14:00

geocode or you can use native geocoder

play14:03

plugin also from code over one in

play14:06

capacitor also you can use that so you

play14:08

can use that also if you want but with

play14:10

browser I if you want to work with

play14:12

browser also definitely this geocode

play14:14

functionality from the Google Maps is

play14:16

much better so you need to enable that

play14:18

also in the Google Maps now let me

play14:20

directly pass the functionality for this

play14:22

particular one here in this manner okay

play14:25

this will be my jio code where I'll just

play14:28

pass the address and I'll get let along

play14:30

in this particular manner which will be

play14:31

an object which I have defined here and

play14:34

I'm going to return a promise in which

play14:36

I'll get the geocoder from the Google

play14:39

Maps and will pass on the address here

play14:42

in the result I am going to get the

play14:43

letter long in this particular manner

play14:45

which I am going to pass it in the

play14:46

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

play14:49

you to understand if you know about

play14:50

promises which I have explained in a lot

play14:52

of videos so this is how we will get the

play14:56

Latin long which I am passing it here

play14:58

the once that is being passed our main

play15:01

job is to get out of this for each Loop

play15:04

and need to pass the value within our

play15:09

places array right so this places should

play15:11

hold the particular values now in order

play15:14

to do that if I just pass directly this

play15:16

dot places will be equals to auto

play15:19

complete items okay let's check it out

play15:22

what do we get here and in the catch one

play15:25

I'll just pass the log here because we

play15:27

are not using it very frequently now

play15:30

means just for the functionality we are

play15:33

using it we are not throwing and

play15:34

fetching it here so I think that's fine

play15:36

or you can just pass some error tools

play15:38

message also if you want to now you can

play15:40

see if I just try to like do something

play15:43

here you will see the results in this

play15:45

particular log let's try this now I'll

play15:48

just pass 10 forward let's see what do

play15:52

we get you can see some results are

play15:53

coming up and it is showing up here

play15:55

directly that's in fact great and let's

play15:57

check it out once again what do we get

play15:59

actually the prediction one so each and

play16:01

every prediction is coming up where we

play16:04

have the description the match strings

play16:07

laces and the structure formatted where

play16:11

we have the main text that is what I'm

play16:13

taking for the title one all right you

play16:16

have the place ID also if you want to

play16:17

keep that for any tracking part or

play16:19

something then you have certain types so

play16:22

you can just look into the documentation

play16:24

that you're in not the documentation you

play16:26

can just look into this log what exactly

play16:28

your gating and where it is located and

play16:30

everything is given so this data is

play16:32

coming up now I want to like that's fine

play16:34

but if you face some problem with this

play16:36

particular data then what you can do is

play16:38

you can use observables and with the

play16:41

help of observables you can like resolve

play16:44

this problem if it is not coming up in

play16:46

one group all right so that's what you

play16:47

can do here for the timing it is coming

play16:50

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

play16:52

change here so let me just log the value

play16:55

and check what exactly I'm getting in

play16:58

the final result this dot places and

play17:02

along with that in the HTML what am I

play17:05

going to do for the ion item I'm going

play17:07

to pass a class with ion margin top so

play17:12

that there is some spacing and it will

play17:13

look better once that is done I think we

play17:16

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

play17:20

look for Carol bug so where is this

play17:23

Karol bug let's search it it's showing

play17:26

New Delhi and lot of related results are

play17:29

coming up and it's only giving you the

play17:31

Five results because I think beyond that

play17:33

if you want more results definitely you

play17:35

need to get the premium version of

play17:37

Google Maps or you need to enroll for

play17:39

something I think that is what's shown

play17:41

in the Google I have not tried more than

play17:42

that because this is quite enough to

play17:45

work with maximum the top five results

play17:47

are fine to work with if you want some

play17:49

more precise you need to give more

play17:51

description to the address that's what I

play17:53

think okay so what exactly we are

play17:56

getting in the final places well the

play17:58

final places one you can see it is empty

play18:01

here so it is just tracking one by one

play18:03

or something it is not coming up in one

play18:05

go so it's better to work with the

play18:08

observables here let me just show you

play18:11

the observable part because if you face

play18:13

some problem so let's work with the

play18:15

observables now and in order to do with

play18:17

that I'm going to implement few things

play18:19

very quickly for which I am using NG

play18:21

only need and on Destroy so these are

play18:24

the two things which uh one is for the

play18:26

subscription one I am going to sub

play18:28

subscribe to the value for any change

play18:30

and will look for it then this is the

play18:34

one which is going to look for any

play18:36

changes and throw it in the next

play18:39

function okay then in order to get the

play18:42

subscription I'm going to use the gator

play18:44

called search places which is going to

play18:47

return this particular value as

play18:49

observable so this is what I have

play18:51

prepared now simply we need to use it

play18:54

here so this dot places serve will be

play18:58

equals to this dot places or not exactly

play19:02

places search places because this is

play19:05

what I'm using it for the Gator and I

play19:07

can subscribe to this while subscribing

play19:10

there is a new feature that is

play19:11

introduced from I think an angular 15 on

play19:14

words that you can use next and error

play19:17

instead of directly passing it so let me

play19:20

just show you we have to pass next here

play19:22

then in the next you can simply look for

play19:25

the value that will be coming up say

play19:27

like places

play19:28

and simply work with the Callback here

play19:31

so this dot places will be equals to

play19:34

places here that's what I'm going to

play19:36

initialize and if you have any error you

play19:39

can simply pass on the error in this

play19:41

particular manner all right so it's

play19:43

almost the same step but it is more

play19:45

easier to make you understand that you

play19:48

need to work with the next function and

play19:49

the error one here okay so if there is

play19:52

any error I am going to log it fine so

play19:54

once that is done our subscription is

play19:57

done now we need to unsubscribe also at

play19:59

the very end when this page is destroyed

play20:01

otherwise there will be Memory leaks so

play20:03

you need to make sure that you are doing

play20:05

that please say serve if it is available

play20:08

then this dot places sub dot unsubscribe

play20:13

or you can use directly the async part

play20:16

also means directly into the without

play20:18

subscribing also you can work with in

play20:20

the HTML I have shown that kind of

play20:22

videos also in the chat application also

play20:25

I might have shown that so you can just

play20:26

check that out all right so this this is

play20:28

done now how to change the value because

play20:31

we are directly initializing it instead

play20:33

of initializing it here what am I going

play20:34

to do I am going to pass the observables

play20:37

here this is what the comment that I

play20:39

have passed here and I'm initializing

play20:41

the value and passing it in the next

play20:43

function in the underscore places one so

play20:45

in this particular manner Wherever

play20:47

Whenever there is any change it's going

play20:49

to detect pretty nicely so you won't

play20:51

face any problem you can try both the

play20:53

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

play20:55

commented manner so that you can try it

play20:57

out so now let's check it whether it

play21:00

works or not as expected so I'm going to

play21:03

look for South X any address I have

play21:07

given and it is showing the results so I

play21:10

am happy with this too so this is what I

play21:12

wanted to show you how to work with the

play21:14

Google Maps places one so with this I'll

play21:17

wrap up this lecture here if you like

play21:19

this video make sure you subscribe to

play21:20

the channel if you're new here and hit

play21:23

the like button if you like this

play21:24

particular video so I'm going to see you

play21:26

next time till then stay safe stay

play21:28

healthy and keep coding

Rate This

5.0 / 5 (0 votes)

Related Tags
Google Places API検索機能プロジェクト設定デザイン動的検索APIキーGeocodeAngularIonicプログラミングウェブ開発チュートリアル
Do you need a summary in English?