Google Places API & Geocode API integration in Ionic 2023
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
😀 Google Places APIの使い方と検索結果の取得
Google Maps APIの取得方法について説明し、Google Maps APIを有効にし、Google Places APIとGeocode APIを有効にする手順を解説しています。また、プロジェクトの初期設定とGoogle Maps APIのデザインについても説明されています。
🔍 Google Maps APIを使用した検索バーの作成とデザイン
検索バーの作成方法と、そのデザインに関する詳細が説明されています。検索アイコンの変更、アニメーションの設定、クリアボタンの挙動、入力欄の挙動など、ユーザーインターフェイスに関する細かい調整方法が紹介されています。
📍 Google Maps APIで場所を検索し、緯度経度を取得
Google Maps APIを使用して、検索バーから入力されたクエリに基づいて場所を検索し、それぞれの場所の緯度経度を取得する方法が説明されています。Autocomplete Serviceの使い方、Geocode機能の有効化、そしてpromiseを使用して緯度経度を取得するプロセスが詳述されています。
📝 検索結果の表示とObservablesの活用
検索結果を表示し、Observablesを使用して非同期処理を管理する方法が説明されています。places配列への値の追加、エラー処理、そしてメモリリークを防ぐためのアンサブスクライブ処理が詳しく説明されています。
🎓 Google Maps Places APIの活用と今後の課題
Google Maps Places APIの活用方法を総括し、今後の課題としてObservablesの活用について触れています。また、動画の感想やチャンネル登録、いいねボタンの押下を呼びかけ、視聴者の健康とコーディングへの情熱を願っています。
Mindmap
Keywords
💡Google Places API
💡Google Maps API
💡ionic server
💡SCSS
💡HTML
💡TypeScript
💡Autocomplete Service
💡Geocode API
💡Observables
💡NgModule
💡ngOnInit
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
5.0 / 5 (0 votes)