No video :(

Google Maps & Angular | ANGULAR SNIPPETS

Подписаться 916 тыс.

Просмотров 174 тыс.

50% 1

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!

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 179

@alainghawi9122 4 года назад

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

@yuriinadilnyi3029 3 года назад

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

@andreipopa3515 3 года назад

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

@ramonmurillo167 6 лет назад

Excellent starting point Max. Thanks for sharing.

@academind 6 лет назад

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

@raymondmichael4987 6 лет назад

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

@theonewheeler 4 года назад

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 3 года назад

how can i downgrade it

@yuriinadilnyi3029 3 года назад

@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

@stevenli9385 5 лет назад

Very practical and useful video, thanks heaps!

@nelsonking 6 лет назад

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 6 лет назад

same here...

@jorgeallarguzman346 4 года назад

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

@stockita 4 года назад

Max is always the best.

@walterbarnie608 2 года назад

great job always enjoy and learn a lot from your videos

@satyasharma59 3 месяца назад

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

@dzenish.2262 6 лет назад

Max, you're awesome ....

@academind 6 лет назад

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

@qwertt14 6 лет назад

he is someone i truly admire haha

@gagangayari5981 Год назад

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

@quanbh 3 месяца назад

How to have roads connecting locations together?

@fbellod86 4 года назад

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

@ahadumelesse2885 Год назад

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

@electricwatches1 5 лет назад

Amazing video man, appreciate it!

@manoj.thakur.programmer 4 года назад

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.

@PrashantSedhainOfficial 4 года назад

You are a hero, Max

@uheltvuheltv4058 6 лет назад

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 6 лет назад

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 6 лет назад

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

@nusratafrin6433 6 лет назад

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

@praveenkumarbm864 6 лет назад

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

@danpride2804 6 лет назад

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 6 лет назад

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

@spectrumsoftapp2818 2 года назад

drawing tools couldn't be added to agm map

@RAJATSRIVASTAVAGadgetgyan 4 года назад

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

@technophileit711 3 месяца назад

my angular 15 does't support this package

@ashutoshnakhe3318 Год назад

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

@QwertyNPC 6 лет назад

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.

@pleasewait8913 5 лет назад

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 5 лет назад

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

@barjosa31blogspot83 6 лет назад

Yup, thanks for sharing Max!

@academind 6 лет назад

Thanks a lot for your comment!

@ladaniavadh2996 4 года назад

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

@kanakd3710 4 года назад

Best tutorial, thank you for creating this

@kavitaagrawal7938 3 года назад

How can I hide the google maps API from GitHub?

@evthiagoandrademinevangeli6937 6 лет назад

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

@academind 6 лет назад

Muito obrigado Thiago :)

@shyambhurgula 6 лет назад

how add blue dot to current location please help me max

@Faddablack 5 лет назад

Appreciate the tutorial. Great video.

@g3anonim 6 лет назад

Is it possible to show directions?

@Massimo-FR 5 лет назад

Try to install the npm agm-direction

@luca-rw7ss 6 лет назад

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+

@dvignesh5 6 лет назад

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

@theonewheeler 4 года назад

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

@sudheercbit 3 года назад

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?

@mohamadhoseinmahrooghi1401 2 года назад

thank you so much this video helps me a lot

@andsviat 6 лет назад

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.

@yuriinadilnyi3029 3 года назад

very useful tutorial! keep going

@fabrizziocht 6 лет назад

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.

@PinoyGuitarTutorials Год назад

Is there a snippets for direction renderer and direction service?

@deepakkiranagi5500 4 года назад

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?

@unknown_traveller 4 года назад

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

@geodev6030 4 года назад

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 4 года назад

@@geodev6030 @1.1.0 FTFY

@anandumdharan6283 3 года назад

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

@anandumdharan6283 3 года назад

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

@kuldeepbhatt8475 2 года назад

is AGM still maintained package ?

@khajinapk1516 3 года назад

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

@user-ur2ft7hp7t 6 лет назад

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

@theonewheeler 4 года назад

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

@AbhishekKumar-mq1tt 6 лет назад

Thank u for this awesome video

@academind 6 лет назад

Thank YOU for your amazing feedback Abhishek!

@newdeveloper4922 6 лет назад

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

@shubhamchandra9258 5 лет назад

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

@sothecominternational8973 4 года назад

Someone send this guy some flowers please

@SkillPulseMedia 8 месяцев назад

Awesome 👏

@lickybuay 4 года назад

Do you know if you could call google api from AGM? if i want to add more settings to the current map

@newdeveloper4922 6 лет назад

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.

@anushree86 3 года назад

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

@xuanhunghoang3283 4 года назад

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!

@manatoshpritam 4 года назад

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

@ABCRetarded 5 лет назад

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 4 года назад

Add map JavaScript api it will work

@argeelearner3978 6 лет назад

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

@osamakhan6033 4 года назад

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

@shubhamjoshi4803 6 лет назад

how to set zoom on coordinates??

@fransjoleihitu 4 года назад

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

@eswarrishigutthi9909 Год назад

We want to pay amount for apikey

@sravanthnetula7150 5 лет назад

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.

@abhishs5119 4 года назад

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.

@aravindhsreenivasan6116 3 года назад

how to get a api key

@sudhinsudhin4367 3 года назад

is it work in angular 12?

@namratajain8220 6 лет назад

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.

@earlcornet4606 6 лет назад

Always great explination

@academind 6 лет назад

Happy to read that Earl, thank you!

@2008Palden 6 лет назад

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.

@igorbondarenko9854 2 года назад

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

@schhajed93 5 лет назад

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?

@soubhagyakumar6157 5 лет назад

Thanks Alot. You saved my time

@academind 5 лет назад

Happy to read that, thank you for your comment!

@belmiris1371 6 лет назад

Thanks Max!

@academind 6 лет назад

Thank YOU for your comment!

@intouchbroesevangroenou5017 4 года назад

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

@mahendraverma3459 2 года назад

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.

@bilalblogger97 5 лет назад

i have doubt for AgmCoreModule i need to custom style change agm circle radius draggable icons , anyone know pls help me

@MrLangam 5 лет назад

How do I point one icon marker to another?

@frontendbuddy8634 6 лет назад

Great video!

@academind 6 лет назад

Thank you Tarun :)

@ajaysinghkoranga1217 6 лет назад

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

@jesusyanez726 4 года назад

Very useful, thanks!

@academind 4 года назад

Happy to read that, thank you :)

@putinscat1208 3 года назад

How are the keys not exposed to the user?

@niranjansutar6116 4 года назад

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

@Marc1920x1080p Год назад

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.

@abdulnaveed4984 5 лет назад

awesome ,how to restrict user to specific country ?

@mohammadnazzal3178 6 лет назад

How we can change Map language dynamically??

@PranshuJawadeishere 6 лет назад

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 6 лет назад

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

@ousamaelidrissi5886 4 года назад

Nice tutorial 😎🤓

@herrbanane 4 года назад

But you need to enter your creditcard number, right? :/

@aviavinash2808 6 лет назад

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

@TheMajonator 5 лет назад

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

@fahemzoldyck1729 4 года назад

is this tutorial a part of one of your courses ?

@maksymbykov 6 лет назад

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

@yannyyss 6 лет назад

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

@academind 6 лет назад

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

@newdeveloper4922 6 лет назад

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.