Google Maps & Angular | ANGULAR SNIPPETS

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 พ.ย. 2024

ความคิดเห็น • 177

  • @andreipopa3515
    @andreipopa3515 3 ปีที่แล้ว +1

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

  • @alainghawi9122
    @alainghawi9122 4 ปีที่แล้ว +29

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

    • @yuriinadilnyi3029
      @yuriinadilnyi3029 3 ปีที่แล้ว

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

  • @ramonmurillo167
    @ramonmurillo167 7 ปีที่แล้ว +2

    Excellent starting point Max. Thanks for sharing.

    • @academind
      @academind  7 ปีที่แล้ว

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

    • @raymondmichael4987
      @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

  • @stockita
    @stockita 4 ปีที่แล้ว

    Max is always the best.

  • @MohdSuhail-c9e
    @MohdSuhail-c9e หลายเดือนก่อน

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

  • @walterbarnie608
    @walterbarnie608 2 ปีที่แล้ว

    great job always enjoy and learn a lot from your videos

  • @stevenli9385
    @stevenli9385 5 ปีที่แล้ว +3

    Very practical and useful video, thanks heaps!

  • @jorgeallarguzman346
    @jorgeallarguzman346 4 ปีที่แล้ว

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

  • @nelsonking
    @nelsonking 6 ปีที่แล้ว +1

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

  • @PrashantSedhainOfficial
    @PrashantSedhainOfficial 4 ปีที่แล้ว

    You are a hero, Max

  • @dzenish.2262
    @dzenish.2262 7 ปีที่แล้ว +15

    Max, you're awesome ....

    • @academind
      @academind  7 ปีที่แล้ว

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

    • @qwertt14
      @qwertt14 6 ปีที่แล้ว

      he is someone i truly admire haha

  • @pleasewait8913
    @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
      @academind  5 ปีที่แล้ว

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

  • @barjosa31blogspot83
    @barjosa31blogspot83 7 ปีที่แล้ว

    Yup, thanks for sharing Max!

    • @academind
      @academind  7 ปีที่แล้ว +1

      Thanks a lot for your comment!

  • @mohamadhoseinmahrooghi1401
    @mohamadhoseinmahrooghi1401 3 ปีที่แล้ว

    thank you so much this video helps me a lot

  • @electricwatches1
    @electricwatches1 5 ปีที่แล้ว +2

    Amazing video man, appreciate it!

  • @fbellod86
    @fbellod86 5 ปีที่แล้ว +1

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

  • @kanakd3710
    @kanakd3710 4 ปีที่แล้ว

    Best tutorial, thank you for creating this

  • @yuriinadilnyi3029
    @yuriinadilnyi3029 3 ปีที่แล้ว

    very useful tutorial! keep going

  • @khajinapk1516
    @khajinapk1516 3 ปีที่แล้ว +1

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

  • @Faddablack
    @Faddablack 5 ปีที่แล้ว

    Appreciate the tutorial. Great video.

  • @ahadumelesse2885
    @ahadumelesse2885 2 ปีที่แล้ว +2

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

  • @PinoyGuitarTutorials
    @PinoyGuitarTutorials ปีที่แล้ว

    Is there a snippets for direction renderer and direction service?

  • @satyasharma59
    @satyasharma59 6 หลายเดือนก่อน

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

  • @theonewheeler
    @theonewheeler 4 ปีที่แล้ว +7

    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
      @jatinsharma7357 4 ปีที่แล้ว +2

      how can i downgrade it

    • @yuriinadilnyi3029
      @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
      @alokagase454 ปีที่แล้ว

      Thanks

  • @QwertyNPC
    @QwertyNPC 6 ปีที่แล้ว +1

    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.

  • @danpride2804
    @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
      @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 :)

  • @praveenkumarbm864
    @praveenkumarbm864 6 ปีที่แล้ว +3

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

  • @ashutoshnakhe3318
    @ashutoshnakhe3318 2 ปีที่แล้ว

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

  • @quanbh
    @quanbh 6 หลายเดือนก่อน

    How to have roads connecting locations together?

  • @manoj.thakur.programmer
    @manoj.thakur.programmer 4 ปีที่แล้ว +1

    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.

  • @belmiris1371
    @belmiris1371 6 ปีที่แล้ว

    Thanks Max!

    • @academind
      @academind  6 ปีที่แล้ว

      Thank YOU for your comment!

  • @gagangayari5981
    @gagangayari5981 ปีที่แล้ว

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

  • @evthiagoandrademinevangeli6937
    @evthiagoandrademinevangeli6937 6 ปีที่แล้ว +1

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

    • @academind
      @academind  6 ปีที่แล้ว

      Muito obrigado Thiago :)

  • @jesusyanez726
    @jesusyanez726 5 ปีที่แล้ว

    Very useful, thanks!

    • @academind
      @academind  5 ปีที่แล้ว

      Happy to read that, thank you :)

  • @SkillPulseMedia
    @SkillPulseMedia 11 หลายเดือนก่อน

    Awesome 👏

  • @soubhagyakumar6157
    @soubhagyakumar6157 5 ปีที่แล้ว

    Thanks Alot. You saved my time

    • @academind
      @academind  5 ปีที่แล้ว

      Happy to read that, thank you for your comment!

  • @sothecominternational8973
    @sothecominternational8973 4 ปีที่แล้ว

    Someone send this guy some flowers please

  • @deepakkiranagi5500
    @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?

  • @shyambhurgula
    @shyambhurgula 6 ปีที่แล้ว +1

    how add blue dot to current location please help me max

  • @igorbondarenko9854
    @igorbondarenko9854 2 ปีที่แล้ว

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

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 7 ปีที่แล้ว +2

    Thank u for this awesome video

    • @academind
      @academind  7 ปีที่แล้ว

      Thank YOU for your amazing feedback Abhishek!

  • @kavitaagrawal7938
    @kavitaagrawal7938 3 ปีที่แล้ว

    How can I hide the google maps API from GitHub?

  • @xuanhunghoang3283
    @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!

  • @sudheercbit
    @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?

  • @earlcornet4606
    @earlcornet4606 6 ปีที่แล้ว

    Always great explination

    • @academind
      @academind  6 ปีที่แล้ว

      Happy to read that Earl, thank you!

  • @theonewheeler
    @theonewheeler 4 ปีที่แล้ว

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

  • @dvignesh5
    @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))

  • @RAJATSRIVASTAVAGadgetgyan
    @RAJATSRIVASTAVAGadgetgyan 4 ปีที่แล้ว

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

  • @theonewheeler
    @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

  • @ousamaelidrissi5886
    @ousamaelidrissi5886 4 ปีที่แล้ว

    Nice tutorial 😎🤓

  • @ladaniavadh2996
    @ladaniavadh2996 4 ปีที่แล้ว

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

  • @frontendbuddy8634
    @frontendbuddy8634 7 ปีที่แล้ว +1

    Great video!

    • @academind
      @academind  7 ปีที่แล้ว +1

      Thank you Tarun :)

  • @kuldeepbhatt8475
    @kuldeepbhatt8475 2 ปีที่แล้ว

    is AGM still maintained package ?

  • @putinscat1208
    @putinscat1208 4 ปีที่แล้ว

    How are the keys not exposed to the user?

  • @fabrizziocht
    @fabrizziocht 7 ปีที่แล้ว

    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.

  • @spectrumsoftapp2818
    @spectrumsoftapp2818 2 ปีที่แล้ว

    drawing tools couldn't be added to agm map

  • @technophileit711
    @technophileit711 6 หลายเดือนก่อน

    my angular 15 does't support this package

  • @andsviat
    @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.

  • @nusratafrin6433
    @nusratafrin6433 6 ปีที่แล้ว +1

    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

  • @manatoshpritam
    @manatoshpritam 4 ปีที่แล้ว

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

  • @niranjansutar6116
    @niranjansutar6116 4 ปีที่แล้ว

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

  • @shubhamchandra9258
    @shubhamchandra9258 6 ปีที่แล้ว

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

  • @ПавелКоломыткин
    @ПавелКоломыткин 6 ปีที่แล้ว

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

  • @g3anonim
    @g3anonim 6 ปีที่แล้ว +4

    Is it possible to show directions?

    • @Massimo-FR
      @Massimo-FR 5 ปีที่แล้ว

      Try to install the npm agm-direction

  • @newdeveloper4922
    @newdeveloper4922 6 ปีที่แล้ว

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

  • @namratajain8220
    @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.

  • @unknown_traveller
    @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
      @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
      @cosmokram8454 4 ปีที่แล้ว

      @@geodev6030 @1.1.0 FTFY

  • @uheltvuheltv4058
    @uheltvuheltv4058 6 ปีที่แล้ว +1

    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
      @academind  6 ปีที่แล้ว +1

      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
      @uheltvuheltv4058 6 ปีที่แล้ว

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

  • @fransjoleihitu
    @fransjoleihitu 5 ปีที่แล้ว

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

  • @luca-rw7ss
    @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+

  • @yannyyss
    @yannyyss 6 ปีที่แล้ว

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

    • @academind
      @academind  6 ปีที่แล้ว +1

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

    • @newdeveloper4922
      @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.

  • @osamakhan6033
    @osamakhan6033 4 ปีที่แล้ว

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

  • @argeelearner3978
    @argeelearner3978 7 ปีที่แล้ว

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

  • @newdeveloper4922
    @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.

  • @fahemzoldyck1729
    @fahemzoldyck1729 4 ปีที่แล้ว

    is this tutorial a part of one of your courses ?

  • @2008Palden
    @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.

  • @jaseembinmuhammed4906
    @jaseembinmuhammed4906 6 ปีที่แล้ว

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

    • @academind
      @academind  6 ปีที่แล้ว +1

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

  • @abdulnaveed4984
    @abdulnaveed4984 5 ปีที่แล้ว

    awesome ,how to restrict user to specific country ?

  • @anushree86
    @anushree86 4 ปีที่แล้ว

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

  • @eswarrishigutthi9909
    @eswarrishigutthi9909 ปีที่แล้ว

    We want to pay amount for apikey

  • @reyno_c
    @reyno_c 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.

  • @intouchbroesevangroenou5017
    @intouchbroesevangroenou5017 4 ปีที่แล้ว

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

  • @abhishs5119
    @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.

  • @anandumdharan6283
    @anandumdharan6283 3 ปีที่แล้ว

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

    • @anandumdharan6283
      @anandumdharan6283 3 ปีที่แล้ว +1

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

  • @PranshuJawadeishere
    @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
      @academind  6 ปีที่แล้ว

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

  • @MrLangam
    @MrLangam 5 ปีที่แล้ว

    How do I point one icon marker to another?

  • @maksymbykov
    @maksymbykov 6 ปีที่แล้ว

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

  • @schhajed93
    @schhajed93 6 ปีที่แล้ว

    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?

  • @sravanthnetula7150
    @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.

  • @sudhinsudhin4367
    @sudhinsudhin4367 3 ปีที่แล้ว

    is it work in angular 12?

  • @herrbanane
    @herrbanane 5 ปีที่แล้ว

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

  • @ajaysinghkoranga1217
    @ajaysinghkoranga1217 6 ปีที่แล้ว

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

  • @aviavinash2808
    @aviavinash2808 6 ปีที่แล้ว

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

  • @TheMajonator
    @TheMajonator 6 ปีที่แล้ว

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

  • @breacker0153
    @breacker0153 5 ปีที่แล้ว

    Do you have to pay for the api?

  • @SergioDavidLaserna
    @SergioDavidLaserna 6 ปีที่แล้ว

    Gracias!

    • @academind
      @academind  6 ปีที่แล้ว

      Thank you Sergio!

  • @mohammadnazzal3178
    @mohammadnazzal3178 6 ปีที่แล้ว

    How we can change Map language dynamically??

  • @shubhamjoshi4803
    @shubhamjoshi4803 6 ปีที่แล้ว +1

    how to set zoom on coordinates??

  • @jeffersonuniajc4704
    @jeffersonuniajc4704 6 ปีที่แล้ว

    how to using *ngFor for group of markers?

  • @RM-14js
    @RM-14js 7 ปีที่แล้ว

    do you know if this can be used with pubnub?