Ionic 6 Google Maps 🔥 - New Capacitor Official Plugin implementation | Setup Google Maps API Key
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Hello Friends, Welcome Back to @CodingTechnyks. In this video, we are going to implement a New Capacitor Official Plugin "Google Maps" using #ionic #angular for #pwa, #android & #ios.
Google maps announcement link
ionicframework...
► Udemy Course on Ionic Coupon Code
MAY122 (Up to 97% Off i.e., Rs.360 or $9.99 | Expires May 8, 2022) - www.udemy.com/...
► Features:-
Setup Google Maps API Key with Billing Account
Use of Native Google Maps
► Uber-Eats Clone App Series: www.youtube.co....
► App Auth Screen Playlist: bit.ly/authScre...
► Setup Ionic 5 Project: • Video
► Source Code: github.com/Nyk...
► Social Media
Facebook: / codingtechnyks
Github: github.com/Nykz
Instagram: / codingtechn. .
Twitter: / codingtechnyks
Thanks for watching!
Kindly Like + Subscribe for such Interesting Videos.
Hello friends, I found a way to set marker at current location and a few more interesting stuff related to move map listeners. If you want an episode 2 of this google maps plugin then comment below, will launch a video on that this sunday if I get atleast 10 comments (just to know that the content will be worth)...thank you
yes please we need this content
Already done check the latest video
hey ... nice tutorial.. please can you add something like a polyline between two markers and perhaps display their distance?
Amazing tutorial, thank you! I hope that Capacitor team will improve this plugin soon because I think should have more customization options :)
Thanks for your valuable response
Great video, currently working on a college project and you uploaded just in time.
We are very thankful for your contribution to angular and firebase developers
Great tutorial . Wait for more useful videos
Hello Sir Please launch a course on udemy of Event Management App with certificate generation using IONIC and firebase
Please sir!!
it is my humble request
hi avishkar,
i am not sure how many people will buy it,
you connect via facebook messenger, let me understand what you are looking for
This video helped me a lot thank you, is there any possible way to check live data/info of the traffic between two points in google maps API?
Get current location
Save in server
Fetch it and update the points
You can use real-time database of firebase or even firestore for real-time data
This video helped me lot bro Thank you
You can check the course on Ionic if you want link in description
Thanks a lot for the video I appreciate, also I am following your tutorials in Udemy, is there away to make a route between more that 2 points and how?
Also is there away to make the user chose from an ion-select then it will show the place with the name selected by the user?
Everything is possible that you can do in Google maps, you can achieve the same to a great extent
@@CodingTechnyks Thanks a lot
Very good!
Great video
How do you implement setOnInfoWindowClickListener?
I will have to check it, I am not sure as no function is present for setting up infowindow in this plugin
But if you just want to use listener then directly initialise it
Hi, Any chance you could do a tutorial on how to add multiples marker using string?
You mean as an object array
AddMarkers is a function to do so to add multiple markers at once I think I might have shown if not here then check it’s episode 2
the best
I'm implementing this plugin right now and I have a problem. there is a way to prevent on mobile the popup opening when click on marker? I wanna use only the bottom sheet for ios, android and web!
That is user controllable because there is no such thing that shows pop up directly
If still you want more flexible maps then Use Javascript googlemaps
@@CodingTechnyks so no way to remove the popup? or hide it with css?
@ericamarchi2699 connect via Instagram and share a photo of popup
@@CodingTechnyks your instagram link in the video description says that the page is not available anymore but I've found the link in your profile. i will connect and show you the photo. thanks
Is it possible to custome make an ID number for a marker? Becase i need to remove markers without chicking anything
Well that option is not available
For confirmation check the documentation once
how can you implement the ngOnInit, ngAfterView functions if you haven't put it in your implements from your class??
it normally would give an esLint error or am i wrong?
Ngoninit and ngafterviewinit comes with interface Oninit
Just implements Oninit
@@CodingTechnyks indeed! thanks for the quick answer
I followed same code but Google maps not loading in device (android)but works fine in browser
In android or ios?
@@CodingTechnyks android
Ionic 6 Google Maps 🔥 - New Capacitor Official Plugin | Testing in Android & iOS
th-cam.com/video/75SwV2kNH4o/w-d-xo.html
Check this latest video, it will be solved
@@CodingTechnyks ok i will thank you so much
Is there a way to plot the optimal route on the map?
Not in this plugin, but can be done in JavaScript one, will make a video on it soon
But for the optimal route, you can try different google maps api feature, I will show to plot the polyline
How show infoWindow marker?
may be its not available in this plugin
Hello Friends, Not able to see map on Android.. but I can see running on iOS.
Did anyone know fix for this?
In the document it is said that setting transparency on elements such as IonContent and the root HTML tag to ensure that it can be seen. If you can’t see your map on Android, this should be the first thing you check.
What to do here?
Set ion-content {-background:none} and check
Hi @mynameiskg1, kindly let me know what you did it to work in iOS, for android will post a video tomorrow
Is there a way to draw a polyline?
In this plugin, no option so far
@@CodingTechnyks thank you, I was checking the Capacitor Community version and there is no option for that too :(
Use JavaScript google maps
You can draw poly line out there
This works great on the web, but I can not get the map to render on an ios device.
On iOS it not working for me also but I am using mac m1, tomorrow will upload a video on that for android and iOS issue also shown in that video, I am sorry, could not help you with that as of now
You try enabling google maps on android, you check my video tomorrow and let me know if it works for you with those changes for iOS
@@CodingTechnyks Thank you. I also am using M1 so it will NOT run on simulator due to well known M1 issue. However when I build on my phone no map! I'll wait for tomorrow's video. Thank you for all your help. This is one of the very best videos on this subject.
Thanks Matthew, but I am sorry could not help you with iOS, if I find a better solution will let you know asap
@matthew test it by giving a timeout of 1000 and then call createmap() in ionviewdidenter or ionviewwillenter
Do let me know if it works or not
@@CodingTechnyks I will give that a try shortly and report back. Also, some have pointed out that there might be css settings that the Ionic team neglected to mention. For example someone pointed out "the div container must be outside of ion-content. I will be trying these this afternoon and report back. This is very frustrating as I have a project that I need to finish. Thank you!