Google Maps & Angular | ANGULAR SNIPPETS

[@andreipopa3515]

Fantastic video! Really concise, straightforward, and well explained. Thank you, Max.

[@ramonmurillo167]

Excellent starting point Max. Thanks for sharing.

[@academind]

Thanks a lot Ramon, happy to read that you like the first video of this series!

[@raymondmichael4987]

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

[@PrashantSedhainOfficial]

You are a hero, Max

[@nelsonking]

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!!

[@akashshah9896]

same here...

[@stevenli9385]

Very practical and useful video, thanks heaps!

[@pleasewait8913]

I took your course in Udemy ionic 4. You are the best instructor I ever saw in my life. 1^749382616192519143948362 infinity times star.

[@academind]

Wow, I really want to thank you for your wonderful feedback Rammaya :)

[@MohdSuhail-c9e]

Never thought the video link on the website would take me to the Max.

[@walterbarnie608]

great job always enjoy and learn a lot from your videos

[@jorgeallarguzman346]

Youre breathtaking! all your videos are really helpful and really easy to understand. You're awesome!

[@dzenish.2262]

Max, you're awesome ....

[@academind]

YOU are awesome Dzenis, thanks so much for your support!

[@qwertt14]

he is someone i truly admire haha

[@stockita]

Max is always the best.

[@barjosa31blogspot83]

Yup, thanks for sharing Max!

[@academind]

Thanks a lot for your comment!

[@electricwatches1]

Amazing video man, appreciate it!

[@ahadumelesse2885]

Hi Max, nice lecture, as usual. Have you implemented google map auto complete ( for addresses ) in Angular ?

[@danpride2804]

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 :)

[@academind]

Thanks for the suggestion Dan. I cannot promise if/when such a video is coming, but I put it onto my "ideas" list :)

[@kanakd3710]

Best tutorial, thank you for creating this

[@mohamadhoseinmahrooghi1401]

thank you so much this video helps me a lot

[@yuriinadilnyi3029]

very useful tutorial! keep going

[@fbellod86]

Nice example, but how i can get the LONG and LAT from address typed in input, thanks!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@academind]

Thank YOU for your amazing feedback Abhishek!

[@Faddablack]

Appreciate the tutorial. Great video.

[@alainghawi9122]

The getting-started page of the angular-maps is broken as of today! I cannot find any documentation related to the agm library!

[@yuriinadilnyi3029]

It looks strange, cuz I use it in Angular 12, and it still works.

[@evthiagoandrademinevangeli6937]

Obrigado estamos apreendendo muito aqui no Brasil.... parabéns pelo vídeo.

[@academind]

Muito obrigado Thiago :)

[@theonewheeler]

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.

[@jatinsharma7357]

how can i downgrade it

[@yuriinadilnyi3029]

​ @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)

[@alokagase454]

Thanks

[@soubhagyakumar6157]

Thanks Alot. You saved my time

[@academind]

Happy to read that, thank you for your comment!

[@uheltvuheltv4058]

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

[@academind]

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)

[@uheltvuheltv4058]

Mate, one of greatest online-teachers, i just bought two of urs angular courses, just about to dive in them.

[@jesusyanez726]

Very useful, thanks!

[@academind]

Happy to read that, thank you :)

[@khajinapk1516]

Hi sir...Good Job... How can i get the apiKey?

[@reyno_c]

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.

[@kahanikhelki1865]

Add map JavaScript api it will work

[@luca-rw7ss]

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+

[@PsycMental4606]

Always great explination

[@academind]

Happy to read that Earl, thank you!

[@igorbondarenko9854]

Thank you for this video, maybe you know how to set apki key dynamically?)

[@manoj.thakur.programmer]

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.

[@QwertyNPC]

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.

[@belmiris1371]

Thanks Max!

[@academind]

Thank YOU for your comment!

[@theonewheeler]

awesome!!! How would I add a Transit Layer? Really struggling to find anything

[@intouchbroesevangroenou5017]

Hi, Max. I am currently following your courses in Udemy and thanks you help me again. >_

[@PinoyGuitarTutorials]

Is there a snippets for direction renderer and direction service?

[@us-habesaha]

Awesome 👏

[@ousamaelidrissi5886]

Nice tutorial 😎🤓

[@frontendbuddy8634]

Great video!

[@academind]

Thank you Tarun :)

[@2008Palden]

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.

[@yannyyss]

Thank You so much Max. It's very helpfull!!!

[@academind]

That's just fantastic to read, thanks a lot for sharing this!

[@newdeveloper4922]

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.

[@argeelearner3978]

Hi can you make a video on how to use the KZbin API? Thank you , looking forward.

[@gagangayari5981]

Hi , I dont get the map even after adding the height. There is no any errors too. What could be the reason ?

[@quanbh]

How to have roads connecting locations together?

[@satyasharma59]

@agm/core library in not compatible with the angular ^16 versions, its of no use now

[@praveenkumarbm864]

Hi Max, How can I integrate my current location as the default location. And integrate GPS service to agm-maps.

[@ashutoshnakhe3318]

Does agm supports Angular 13 ? because I am facing issue while migrating..

[@deepakkiranagi5500]

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?

[@xuanhunghoang3283]

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!

[@sothecominternational8973]

Someone send this guy some flowers please

[@abhishs5119]

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.

[@sravanthnetula7150]

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.

[@ladaniavadh2996]

I want to show path between to marker how can I add this?

[@namratajain8220]

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.

[@theonewheeler]

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

[@fransjoleihitu]

Nice example .. but how do you add markers (dynamicly) via code and not via template?

[@kuldeepbhatt8475]

is AGM still maintained package ?

[@shyambhurgula]

how add blue dot to current location please help me max

[@osamakhan6033]

angular-maps.com , here getting started does not work anymore, is there any other source of documentation for this?

[@jaseembinmuhammed4906]

Max, you're awesome .... I'am really wondering about the guy who disliked this video

[@academind]

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 :)

[@Its_wes01]

awesome ,how to restrict user to specific country ?

[@aviavinash2808]

That's an great video, very helpful. Is there any chance of getting Dev API key?

[@RAJATSRIVASTAVAGadgetgyan]

Google is asking me to enable billing to use this api? What am i doing wrong?

[@spectrumsoftapp2818]

drawing tools couldn't be added to agm map

[@shubhamchandra9258]

What changes are needed if you want to use agm in a separate module? Where should I include AgmCoreModule.forRoot({ apiKey: ' ' }) ? Thanks

[@nusratafrin6433]

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

[@fahemzoldyck1729]

is this tutorial a part of one of your courses ?

[@putinscat1208]

How are the keys not exposed to the user?

[@sudheercbit]

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?

[@dvignesh5]

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))

[@ПавелКоломыткин]

Thanks. But unfortunately, for me the site isn't available. Were there moved at an other domain?

[@fabrizziocht]

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.

[@niranjansutar6116]

That's nice but how to get lng and lat from string address

[@PranshuJawadeishere]

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 ?

[@academind]

Hiding is not possible, your frontend code is always accessible. See: academind.com/learn/javascript/hide-javascript-code/

[@MrSlug1992]

Wow, what are the chances?!? I am currently busy with your Angular 5 course on Udemy

[@academind]

Great to have you on board! :)

[@parasmyname784]

And i am busy with your Angular 6 course on Udemy

[@TheMajonator]

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 :)

[@manatoshpritam]

Hi Max, should we go with AGM or the google maps angular. I see AGM page is broken.

[@maksymbykov]

Hi, namesake! Can you please say about markers clustering?

[@anushree86]

@Max: What if i need to assign api key dynamically how can I achieve that?

[@andsviat]

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.

[@newdeveloper4922]

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.

[@kavitaagrawal7938]

How can I hide the google maps API from GitHub?

[@newdeveloper4922]

Getting error that you have exceed the daily qouta for place autocomplete api, where is the error ? I m using angular 5

[@anandumdharan6283]

hey i installed agm im getting errors like cannot find namespace google

[@anandumdharan6283]

got it fixed....had to npm install @types/googlemaps version 3.39.12 add "googlemaps" in types array in tsconfig.app.json angular 10

[@g3anonim]

Is it possible to show directions?

[@Massimo-FR]

Try to install the npm agm-direction

[@unknown_traveller]

Hey, if I click on the Map the output is just a simple "c" nothing more.... Why? onChooseLocation(event) { console.log(event); }

[@geodev6030]

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

[@cosmokram8454]

@@geodev6030 @1.1.0 FTFY

[@MrLangam]

How do I point one icon marker to another?

[@technophileit711]

my angular 15 does't support this package

[@breacker0153]

Do you have to pay for the api?

[@RM-14js]

do you know if this can be used with pubnub?

[@ajaysinghkoranga1217]

how to change the theme of map like in google map night theme in agm any help will be appreciated

[@sudhinsudhin4367]

is it work in angular 12?

[@ahmedelmetwally5172]

thank you

[@academind]

Thank you for your comment Ahmed!

[@eswarrishigutthi9909]

We want to pay amount for apikey

[@schhajed93]

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?

[@shubhamjoshi4803]

how to set zoom on coordinates??

[@yanivsalman9685]

great! can you make another one on autocomplete.? sorry for demanding.. but it will help if you will someday (: i need to know how to get a json file i created with some supermarket branches and show it to the user when he click on input and search for it. and it should be according to his location . it my exame (:

[@academind]

Thanks for your suggestion! I can't promise it but I'll see what I can do

[@yanivsalman9685]

its amazing! how can you comment to everyone? really nice of you. keep up the good work

[@barneydk]

I would also love to see how to do autocomplete. Have tried a few times, but my Angular knowledge is not so good yet

[@mohammadnazzal3178]

How we can change Map language dynamically??