Google Maps & Angular | ANGULAR SNIPPETS
ฝัง
- เผยแพร่เมื่อ 25 ก.ย. 2024
- It's pretty common to embed some map into web apps. Learn how to add a map powered by Google Maps into your Angular app in this video.
----------
Want to learn much, much more about Angular? Join my 5-star rated course: acad.link/angular
The Angular Google Maps Package: angular-maps.com/
Source Code: github.com/aca...
----------
• You can follow Max on Twitter (@maxedapps).
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
Fantastic video! Really concise, straightforward, and well explained. Thank you, Max.
The getting-started page of the angular-maps is broken as of today! I cannot find any documentation related to the agm library!
It looks strange, cuz I use it in Angular 12, and it still works.
Excellent starting point Max. Thanks for sharing.
Thanks a lot Ramon, happy to read that you like the first video of this series!
Academind, is this a series!!?
Though I'm not well with angular but I'll be waiting bro, I bet I'll learn a lot of maps and angular too, as you have a way of teaching that makes things stick.
Keep up the good work
Very practical and useful video, thanks heaps!
I tried using the native google maps api with vanilla JS in an Angular 5 project and ran into tons of problems! This video was so helpful!!
same here...
Youre breathtaking! all your videos are really helpful and really easy to understand. You're awesome!
I took your course in Udemy ionic 4. You are the best instructor I ever saw in my life. 1^749382616192519143948362 infinity times star.
Wow, I really want to thank you for your wonderful feedback Rammaya :)
Hi Max, nice lecture, as usual.
Have you implemented google map auto complete ( for addresses ) in Angular ?
great job always enjoy and learn a lot from your videos
This package for basic use is good, but if you planing to use it for having feature like adding data layers etc, this package have poor documentation, any beginner may not know how to use it for generating the data layers. Some of the code still don't work.
Max, you're awesome ....
YOU are awesome Dzenis, thanks so much for your support!
he is someone i truly admire haha
The amount of knowledge i gain from your videos comparing to other tutorial is insane!, Big Up for every content, all of them are helpful.
PS: How can you add a placecard inside element. Thanks
Thanks so much, really awesome to hear that!
I don't know if it's possible to manually add a placecard to be honest. I never did it and I guess it's added automatically if you include Google maps via an (as described here: stackoverflow.com/questions/36654404/google-maps-add-a-placecard)
Mate, one of greatest online-teachers, i just bought two of urs angular courses, just about to dive in them.
If anyone is getting on the console.log(event) from the mapClick "c", then you need to downgrade your agm/core package to 1.1.1 because above this the mapClick doesn't work and is having bugs.
how can i downgrade it
@Jatin Sharma as far as i know you can just rewrite the version in "package.json" and "package-lock.json" (saw it in some blog)
Thanks
Nice example, but how i can get the LONG and LAT from address typed in input, thanks!
Amazing video man, appreciate it!
Hi Max, How can I integrate my current location as the default location. And integrate GPS service to agm-maps.
A little question. How do I access other google maps functionality ? For instance, the geometry library for calculating distance of a polyline, or other stuff. Thanks.
Max is always the best.
Hi,
I'm facing this issue, can you please explain how to resolve.
I tried all the steps mentioned but unable to get out of this error.
Error:
XXX/node_modules/@agm/core/services/maps-api-loader/lazy-maps-api-loader.d.ts (1,10): Module '"XXX/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.
Thanks
the Best Angular teacher until now...i am ALSO following the Complete course! Congratz!
Anyway Max the Maps is shoed, but i receive some (red) errors in the console.log:
1) initMap is not a function";
2) You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
3) stats.js:4 Uncaught TypeError: _.lf is not a constructor...
any hint?
I am on angular-cli 6+
Yup, thanks for sharing Max!
Thanks a lot for your comment!
But how can you hide your Google Maps API key? You can't pass it like that in the app.module.ts file because it gets commited and pushed to remote repo. With this approach, you basically give out an API key. If I use Express + vanilla JS on the frontend, I can simply store the key in the .env file and pass it to the layout through router using dotenv.
I have no idea what to do with Angular.
Max Special Request from a loyal fan,... can you do Maps A to Z ? The whole nine yards the new routes and places and integrating em all ? Just a small request :)
Thanks for the suggestion Dan. I cannot promise if/when such a video is coming, but I put it onto my "ideas" list :)
Best tutorial, thank you for creating this
Obrigado estamos apreendendo muito aqui no Brasil.... parabéns pelo vídeo.
Muito obrigado Thiago :)
Its working fine in desktop browsers but not loading in the mobile browser (Safari or Chrome). I am setting the height to 300px and width to 100%. Any ideas on how this can be resolved?
@agm/core library in not compatible with the angular ^16 versions, its of no use now
I'm using "ng2-google-place-autocomplete" module, to use it I have to import into my index.html the line:
but the problem is that I got this error: "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."
If I omit this line I can't use it, how can I use the same api key for both modules?
Thank you for your help.
You are a hero, Max
Hi I am working on Ionic 3 trying to integrate AGM in the app pages with ionic serve cmd ... AGM work fine with the ng serve in the app component page... but when I am trying to join AGM in custom made page its not working and its showing blank.. console log errors (polyfills.js:3 GET localhost:8100/maps.css 404 (Not Found))
Hi sir...Good Job...
How can i get the apiKey?
adding the google api-key in the angular part is safe ? if not then can you tell me how can i get that through spring boot and mysql?
Hi Max, How to display button zoom in/out like that + / - on this map. And how to enable the switch to google street view.
Thanks you!
Hi , I dont get the map even after adding the height. There is no any errors too. What could be the reason ?
Appreciate the tutorial. Great video.
thank you so much this video helps me a lot
the Weather app you have created using angular 2 , i want to extend it to show country selected in google map on click of country tile. Also, the map should in different tab so that will learn routing also. please suggest. it will be really helpful in completing my app.
how add blue dot to current location please help me max
Getting error that you have exceed the daily qouta for place autocomplete api, where is the error ? I m using angular 5 . This is showing just after first request.
Thank you for this video, maybe you know how to set apki key dynamically?)
Getting error that you have exceed the daily qouta for place autocomplete api, where is the error ? I m using angular 5
What changes are needed if you want to use agm in a separate module? Where should I include AgmCoreModule.forRoot({ apiKey: ' ' }) ? Thanks
Google is asking me to enable billing to use this api? What am i doing wrong?
Nice example .. but how do you add markers (dynamicly) via code and not via template?
thanks a lot for your tutorials. could you share info on how to get address from the coords in angular? is there any link that you would recommend to follow for that? thank you.
Hi Max, Thank You for the Video. Can you please tell how to change the agm-map center dynamically? meaning if a user chooses a particular country or city from a dropdown the map should load in the selected place.
very useful tutorial! keep going
That's awesome max, every time while placing marker on map it comes to centre can i place marker with respective area not at centre Thank you.
Thanks. But unfortunately, for me the site isn't available. Were there moved at an other domain?
Hi can you make a video on how to use the TH-cam API? Thank you , looking forward.
drawing tools couldn't be added to agm map
Thank u for this awesome video
Thank YOU for your amazing feedback Abhishek!
my angular 15 does't support this package
Hi Max, should we go with AGM or the google maps angular. I see AGM page is broken.
Getting error that you have exceed the daily quota for the api. I m using angular 6 . This is showing just after first request. Can anyone help me this?
Please help i am desperate and cannot get mapClick to log the coords for the life of me unless I consle log this and then it only comes out in some weird format that I can't access
awesome!!! How would I add a Transit Layer? Really struggling to find anything
Does agm supports Angular 13 ? because I am facing issue while migrating..
Is there a snippets for direction renderer and direction service?
How to have roads connecting locations together?
How can I hide the google maps API from GitHub?
@Max: What if i need to assign api key dynamically how can I achieve that?
Hi guys :). Is there any way to do reverse geocoding with AGM in Angular 5? And if yes, how should I do it? Cause I have already browsed whole stackOverflow and google as well and no result. Any help will be appreciated.
Also I am big fan, Max. You´re doing awesome work :)
Hi, Max. I am currently following your courses in Udemy and thanks you help me again. >_
angular-maps.com , here getting started does not work anymore, is there any other source of documentation for this?
That's nice but how to get lng and lat from string address
Someone send this guy some flowers please
Is it possible to show directions?
Try to install the npm agm-direction
I want to show path between to marker how can I add this?
Hey, if I click on the Map the output is just a simple "c" nothing more.... Why?
onChooseLocation(event) {
console.log(event);
}
I had the same problem, seems to be a bug in v 3 beta. I reverted back to v 1 and it works fine. Run npm install @agm/core@1.1.1 or change the version number in your package.json and do an npm install
@@geodev6030 @1.1.0 FTFY
Hi, I need some help here please. I've followed the video all the way till 5:19 but I get stuck here as the map just won't load. It keeps saying "Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details." in the browser. Any one knows how do I get around this issue? Thank you.
Add map JavaScript api it will work
Always great explination
Happy to read that Earl, thank you!
That's an great video, very helpful. Is there any chance of getting Dev API key?
Thanks Alot. You saved my time
Happy to read that, thank you for your comment!
awesome ,how to restrict user to specific country ?
is AGM still maintained package ?
Is there any way by which I can hide or put the API key someplace else rather than in the component file. May be save it as a constant ?
Hiding is not possible, your frontend code is always accessible. See: academind.com/learn/javascript/hide-javascript-code/
how to change the theme of map like in google map night theme in agm any help will be appreciated
Hi, namesake! Can you please say about markers clustering?
Angular 12 did not recognize the package, @agm/core. It is going to be wasting time to use other libraries. They don't update accordingly and change their programming theme in new versions.
That way, the community should focus on essential aspects of JS and improve them to create standards.
The same for me on Angular 14
@@codeme8016 I have the same in 12. No info about depedencies
@@codeme8016 have u found any other dependency to use instead of @agm/core in angular>10
In my case, the NPM install of AGM required Angular version 10.0.0!! That is stone age old. I cant downgrade a existing project for 5 Versions. Very disappointed.
i have doubt for AgmCoreModule i need to custom style change agm circle radius draggable icons ,
anyone know pls help me
Great video!
Thank you Tarun :)
Very useful, thanks!
Happy to read that, thank you :)
Thanks Max!
Thank YOU for your comment!
But you need to enter your creditcard number, right? :/
is this tutorial a part of one of your courses ?
Nice tutorial 😎🤓
How are the keys not exposed to the user?
how to set zoom on coordinates??
We want to pay amount for apikey
hey i installed agm im getting errors like cannot find namespace google
got it fixed....had to npm install @types/googlemaps
version 3.39.12
add "googlemaps" in types array in tsconfig.app.json
angular 10
Awesome 👏
do you know if this can be used with pubnub?
How we can change Map language dynamically??
Max, you're awesome ....
I'am really wondering about the guy who disliked this video
Thank you for your great feedback! It's always difficult to meet everybody's expectations but as long as most of you enjoy the videos I'm totally happy :)
It looks like Google has released their own version of google map component as part of the angular family. github.com/angular/components/blob/master/src/google-maps/README.md
Is agm still recommended?
how to using *ngFor for group of markers?
How do I point one icon marker to another?
thank you