Google Maps JavaScript API Tutorial

Поділитися
Вставка
  • Опубліковано 2 гру 2024

КОМЕНТАРІ • 943

  • @itdepends5906
    @itdepends5906 3 роки тому +16

    I was not ready for js but found myself sincerely going through every step because the pace, presentation, guidance of this tutorial were all so inviting for learning

  • @AmmarTaicho
    @AmmarTaicho 2 роки тому +2

    Event after 5 years, this is still the best tutorial about location using javascript on The Whole Internet

  • @SalmanAnsari-sm2zn
    @SalmanAnsari-sm2zn 7 років тому +67

    Whenever a notification appeared on my laptop from Traversy Media, it makes me so excited that I cannot stop myself even for a single moment to learn something amazing and new to start developing our own stuff.

    • @TraversyMedia
      @TraversyMedia  7 років тому +38

      Thats awesome. The exact response and outcome I am look for when I upload a video :)

    • @SalmanAnsari-sm2zn
      @SalmanAnsari-sm2zn 7 років тому +1

      Soon I will share some of my stuff to you to have feedbacks from your side

    • @MrAKGarg007
      @MrAKGarg007 6 років тому

      @@TraversyMedia Same here Traversy Media, I am following your precious channel from the last two years. Awesome in all ways. Keep It up Always. Thanks a lot for all the info.

    • @mohammadumar443
      @mohammadumar443 4 роки тому

      @@TraversyMedia please can guide how can i get map mentioned in website doh.saal.ai/

  • @mohammedkhaledkhan6122
    @mohammedkhaledkhan6122 6 років тому

    I Just wanted to speak truth. Every time I was Copying the code and pasting it and whenever I need customizing the code It took a lot of time for me. Today I decided to learn the Gmaps with JS and Your Video Did it. The video is amazing and I understand it very well. No words to describe this video. Amazing awesomeness.

  • @lulualmohtarif
    @lulualmohtarif 7 років тому +15

    i'm going to stop adblock in any time i watch a video from you brad!
    thank you :)

    • @TraversyMedia
      @TraversyMedia  7 років тому +9

      Thank you. I really appreciate that. Ad block is a killer for us little guys :)

  • @bobross2404
    @bobross2404 Рік тому +2

    I've lost count on how many times your videos have helped me, you're a gem!

  • @keelydyer7838
    @keelydyer7838 5 років тому +10

    You're so good at explaining these things, so much clearer than any other videos out there! Thanks for sharing this :)

  • @hiteshkumar-ed3sb
    @hiteshkumar-ed3sb 5 місяців тому +1

    00:08 Creating a no nonsense guide on Google Maps API
    02:10 Setting up Google Maps JavaScript API
    04:34 Setting up the Google Maps API in HTML for a map
    06:57 Creating a new Google Map object and setting options
    09:19 Adding a marker to the map
    12:00 Custom markers and info windows can be added to Google Maps JavaScript API.
    14:26 Create a function called add marker to dynamically set marker values
    17:17 Customize marker icons and coordinates using props object
    19:54 Implementing dynamic content for info windows using Google Maps JavaScript API
    22:14 Creating an array of markers and optimizing marker addition using a loop
    24:50 Adding a click event listener to the map
    27:10 Introduction to Google Maps JavaScript API capabilities.
    Crafted by Merlin AI.

  • @brahimbelkhiria2157
    @brahimbelkhiria2157 7 років тому +264

    You are the best teacher on the net .thank you very much for your effords

    • @TraversyMedia
      @TraversyMedia  7 років тому +19

      You're very welcome, thanks for watching!

    • @TheMustak25
      @TheMustak25 7 років тому +3

      You helped me out multiple times. Thanks for uploading amazing content.

    • @alexandrufilipescu1301
      @alexandrufilipescu1301 7 років тому +3

      Realtime Google Maps Geolocation Tracking with JavaScript netx tutor?

    • @wesleyyjones602
      @wesleyyjones602 7 років тому

      brahim belkhirania

    • @wesleyyjones602
      @wesleyyjones602 7 років тому +1

      Call me Call me

  • @steveliveshere
    @steveliveshere 2 роки тому +2

    For those wondering Uluru is located roughly in the centre of Australia in the Northern Teritory. It's one gigantic rock that people used to spend a day climbing! It used to be known are Ayers Rock which is what the English called it. Uluru is the indigenous name which it is now known by. It's no longer climed as it is considered sacred to the local indigenous group that now have control of it.

  • @ofirt7
    @ofirt7 6 років тому +20

    Thank you Brad!
    I guess you heard that a lot, but I'm watching on many tutorials and web courses and you are one of the best instructors out there!
    Thanks again and keep on with your great tutorials.

  • @urvishjoshi6640
    @urvishjoshi6640 4 роки тому

    I was searching how to add a mark lat lng listener but didn't found anything, and after watching 24mins video u came up with it, I finally ended up sitting peacefully. Thank you bro :)

  • @ahmetomer1759
    @ahmetomer1759 7 років тому +6

    I never seen any useless video you upload, its always a great usefull video that is put together very well and full of informations we really need. Thanks a lot and please never stop doing so.

  • @camposricardo86
    @camposricardo86 Рік тому +2

    Great tut for 2017. Now Google Maps APIs are under Google Cloud and the Interface has all changed!

  • @hauntedspear5728
    @hauntedspear5728 4 роки тому +11

    RIP in 2020...you have to enable billing to display the map :( . Overall, still best tutorial :D

    • @OleTheill
      @OleTheill 4 роки тому

      You need to add billing, but as far as I can tell, all the functions that are used in this video are free.

  • @mrgreggles998
    @mrgreggles998 7 років тому +1

    Enjoy the video? That was f*^%n awesome bro. Damn, I was looking at what I could do with Google Maps for our little business and you've just laid the path. This is truly donation territory, thank you so very much!

  • @javidabbasov959
    @javidabbasov959 7 років тому +111

    I have learned from you more than in university or school 😂

    • @TraversyMedia
      @TraversyMedia  7 років тому +54

      That's awesome. I really wish colleges would teach more practical knowledge. Stuff we actually need and will use

    • @Cebok_barengan
      @Cebok_barengan 4 роки тому +2

      me too

    • @evergreen7781
      @evergreen7781 3 роки тому +4

      @@TraversyMedia The only university I feel we can be deep & practical is UA-cam University ; Specializing from Traversy Media department of Web Development !!!

    • @misterpoof3197
      @misterpoof3197 3 роки тому +2

      Fact

    • @donaldtrump1902
      @donaldtrump1902 2 роки тому

      @Javid Abbasov
      @Traversy Media
      yes you are right, universities don't teach you practical or real world knowledge what they teach you is just Fibonacci series and loops 😂
      I graduated from a university in IT and I learnt nothing more than loops , series and if else in c ,c++ and just SQL nothing about javascript, nothing about GitHub, nothing about node, nothing about dev ops ,I have to learn all that myself

  • @TheAces1979
    @TheAces1979 Рік тому

    I couldn't agree more with the top comments. You're an excellent instructor. Crawl, walk, run. Most videos just skip straight to 'run' without explaining the 'why'. +1 sub/like/comment for this guy! Side note: Your keyboard is very ASMR-y. And yes I'm into that. I sense your judgement and I reject it. 6/5 stars!

  • @DincerHoca
    @DincerHoca 7 років тому +4

    This is one of the best tutorials I have seen. Thank you.

  • @MrManolis97
    @MrManolis97 7 років тому

    THIS MAN IS THE REAL MVP.......SIR I HAVE TO SAY THAT YOU ARE MY NEW TEACHER

  • @djentleman_anurag
    @djentleman_anurag 7 років тому +27

    Brad, I don't know how to express, but I am very thankful to you for all the content you have put up. Learning a lot. :)

  • @TheHammerAP
    @TheHammerAP 6 років тому

    Hi man! Just fall onto your video randomly. I will confirm what everyone is saying bellow. You are a great teacher. Clean shot in the head ! I have learned something painlessly.

  • @chaithanyasurya2224
    @chaithanyasurya2224 4 роки тому +3

    You did a lot of hardwork on this concept and you made this easy to learn, thank you so much.

  • @porcupine9997
    @porcupine9997 7 років тому

    Where was this 2 weeks ago when i was drowning in google's API documentation‽ Keep up the good work. I learn so much from you.

    • @porcupine9997
      @porcupine9997 7 років тому

      Also, I'm currently working on a project requiring google sign-in. I'm guessing you'll cover that in a few weeks? lol

  • @ankitmehrotra8519
    @ankitmehrotra8519 7 років тому +9

    Great tutorial Brad..Thanks a lot for making another amazing video..

  • @MrTouqeerhameed
    @MrTouqeerhameed 7 років тому

    I am a beginner to work on google map ,it help me alot. I really appreciate and thank you.

  • @W-Whiz
    @W-Whiz 4 роки тому +6

    Best lecture on google api...

  • @jumanjiwarlord
    @jumanjiwarlord 4 роки тому

    I tried this one after doing the DOM crash course and it definitely makes more sense now.

  • @robertosoriano9617
    @robertosoriano9617 7 років тому +3

    Hey, thank for the video. I live in Lawrence, so right around the corner from you. Small world!

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      Very familiar with Lawrence. I lived in Methuen about 10 years ago. Very small world

  • @djguy100
    @djguy100 3 роки тому +2

    Been struggling with this all day, Brad teaches me how to do it in less than 30 min lol. Keep up the good work Brad 👍🏻

  • @c0mrade95
    @c0mrade95 7 років тому +4

    Just in time for a new project that I have....!!! Thank you!!!!

  • @00el04
    @00el04 4 роки тому +1

    WOW, this is the best tutorial I have watched regarding to building a web application using API... WELL DONE!
    Would love more tutorials on Brochure site/ e-commerce site / simple games in the future!
    Bell icon turned on :)

    • @00el04
      @00el04 4 роки тому +1

      does google cloud platform cost money once the free trial runs out?

  • @MenAtWorkMedia22
    @MenAtWorkMedia22 7 років тому +9

    Thank you, Brad! Amazing video like always!

  • @lancelogan1
    @lancelogan1 6 років тому

    Awesome video. Like the others said, you are the best on the web. Im currently in a bootcamp and the teacher just yells a bunch of stuff at us. Then I look those things up on your page. Thanks for the help.

  • @CO_IN_TECH
    @CO_IN_TECH 7 років тому +3

    Hey Brad! This is really great! It would be the best to have a video explaining the options you mentionned in the end: enable users to add markers (with info) on the map and that the marker stay. This would be hugely helpful!
    Are you planning this video? If not do you know if there is a good step by step video or material?

  • @dnfusi
    @dnfusi 7 років тому

    My God, You just nailed what have been teaching for a long time. Accept my respect and I'll like to make contributions if possible. #You are the best

  • @shubhamjain1328
    @shubhamjain1328 4 роки тому +14

    Sadly they won't let you use it now, until you apply for payments..

    • @mrj4082
      @mrj4082 Рік тому

      You can use it with free trial. Yea it's sad you can only use it for 3 months but once it expires you can try with another mail. Idk if the same credit will work. Will have to 3 months from now to confirm

  • @hongcai4617
    @hongcai4617 4 роки тому

    Ur tutorials r always enlightening...I learned not only embedding google map, but how to refactory code.

  • @saraswatihavalkod6783
    @saraswatihavalkod6783 5 років тому +4

    Thank you for the video...it helped me a lot....but API key is asking for enable billing

  • @corsaronero5619
    @corsaronero5619 7 років тому

    There are no words about your video. They are simply the best. Thank you mate

  • @lifeisadiyproject1418
    @lifeisadiyproject1418 7 років тому +65

    Video request: any other Google API (GMail, Google Calendar, etc.) :)

    • @FlyingUnosaur
      @FlyingUnosaur 7 років тому +10

      What about Push notifications with PHP?

    • @kielbarry1789
      @kielbarry1789 5 років тому +1

      gmail specifically plsssss

  • @lonermrvedits8754
    @lonermrvedits8754 3 роки тому

    I really loved the way of teaching. You started from beginner level and ended on expert level. I loved it. I got everything which i wanted to learn about Google maps api.
    Very precise and to the point content.

  • @g-luu
    @g-luu 7 років тому +10

    Dope ass intro lol, i feel like i'm attending Microsoft conference :). Great content as always. #just bought your eduonix angular 12project too by the way.

  • @jaimemontero6712
    @jaimemontero6712 6 років тому

    Wow, I was trying for a while just reading from google documentation, and it simply didn't work, but, after this video.. FLFF, LIKE A GLOVE, thank you!

  • @maralashyrova7178
    @maralashyrova7178 5 років тому +4

    just thanks a lot man from 2019

  • @frambuella
    @frambuella Рік тому

    Wow! I wanted to add maps to a website I'm making and this was by far the best tutorial on how simple it can be. Thanks!

  • @alexandros-markovits
    @alexandros-markovits 7 років тому +4

    that was an awesome video, best in youtube, couldnt even find one about the markers (should have seen the documantation i know my bad). thank you and nice intro logo!

    • @TraversyMedia
      @TraversyMedia  7 років тому +10

      Thanks, yeah I noticed that back when I was learning maps. Nobody puts it into simple terms. Actually, most programming tuts are like that. People over complicate things to sound smart. I try and keep things simple. Yes the docs are usually the best place to look (After Traversy Media :0 )

    • @alexandros-markovits
      @alexandros-markovits 7 років тому +1

      Traversy Media haha yes this was definetly better than learning from the documentation :D loved the dynamic way you did the markers also, simple things like these are open minding for beginers like me. Also dont change, you are awesome the way you are :D have a nice day

  • @calderov
    @calderov 7 місяців тому

    This was gold! I was blocked and although the video is a bit outdated, I got to learn enough to make some progress on my own project. Thanks!

  • @RobertWildling
    @RobertWildling 5 років тому +5

    Meanwhile (since August 2018?) the Google Maps API requires credit card validation and has a free limit of 200$/month...

    • @hananeenanah8254
      @hananeenanah8254 5 років тому

      @@firstnamelastname-tr8fo how can i do that ?

  • @shubhamdhingra5214
    @shubhamdhingra5214 7 років тому +1

    Thank You So Much Brad! I am glad that i found your channel Man ! Your videos are great and bulked up with content in simplified manner.Your pace,your voice just everything is fine.I literally enjoy your videos !
    You are an awesome Teacher,Brad ! :)

  • @freegalaxy1695
    @freegalaxy1695 5 років тому +7

    google map API is not free now :(

  • @AFZALAHMED-b9g
    @AFZALAHMED-b9g Рік тому

    You just saved a day or two work. Thanks as always Trever.

  • @crystalsky7615
    @crystalsky7615 7 років тому +7

    Thanx Brad...

  • @mattfrazier8838
    @mattfrazier8838 6 років тому +2

    Great video! It took me a little more time to understand everything when I was implementing the JavaScript into a separate file but you were very thorough! Keep up the great work!

  • @VaporCode
    @VaporCode 7 років тому +6

    12:10 - "What the hell? a mosquito is in here!" -Traversy Media.
    XD hahaha

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      lol thing flew right in my frigging face :)

  • @KNO3Arts
    @KNO3Arts 6 років тому

    The first time I saw something about JAVA script. But it did contain Info on how to implement Google Maps and pinpoint given Coordinates. Just what I was looking for.
    But also very good explained to noobs like me. Very helpfull. wel understoud!

  • @donmbelembe1089
    @donmbelembe1089 7 років тому +8

    yeahhhh I'm falling in love with you

  • @vishaldarji944
    @vishaldarji944 4 роки тому +1

    Best example of google map javascript api
    Thanks for learning

  • @leifan9740
    @leifan9740 5 років тому +1

    Thank you so much for such an intuitive tutorial. Feel so lucky to get in here. Really enjoy watching it. Thanks

  • @andrehuster5377
    @andrehuster5377 6 років тому

    Thanks for the tutorial. As an Australian, I felt I should say that Uluru is a massive rock in Australia, also known as Ayers Rock. Tutorial was very helpful though.

  • @lucbrien9237
    @lucbrien9237 6 років тому

    Great video, thanks! Just FYI, Uluru is the big rock in the middle of the Australian continent. It's a sacred place for the Pitjantjatjara Anangu people who live in the area.

  • @JosephUrban
    @JosephUrban 2 роки тому

    Thanks for a clear, systematic tutorial on these topics. It was one of the best I've seen on this topic.

  • @shahzeb9154
    @shahzeb9154 6 років тому

    finaly i can see u r face u r the most intelligence person in the field of programming God bless u awesome sir i learned a bunch of thing from u.

  • @Fabroskii
    @Fabroskii 7 років тому

    Awesome tutorial man - thank you! If anything, I'd suggest avoiding redundant comments (like "// Add Marker Function" before "function addMarker()"). I just found you, but I feel I'm going to be watching a lot more of your videos. Rad!

  • @AndrewLee-wl6cn
    @AndrewLee-wl6cn 6 років тому

    This was really informative. I liked how he went in to detail about what he was doing.

  • @shadlydiab4131
    @shadlydiab4131 5 років тому

    I’m never one to leave a comment but this was such an outstanding video that I just wanted to thank you

  • @UmarJAN-bz2nq
    @UmarJAN-bz2nq 6 місяців тому

    That`s why i like JavaScript.Thanks for this informative video.

  • @EsainM
    @EsainM 7 років тому

    i have always struggled learning how to code/programme, and you made it so simple... thank you!

  • @LongPhamKimura
    @LongPhamKimura 7 років тому

    I know nothing about coding, your tutorial help me heaps, cheers

  • @georgeuba5421
    @georgeuba5421 6 років тому

    Traversymedia you guys are doing a great job. I learn a lot from all your videos. Thanks for the commitment.

  • @dezlo2174
    @dezlo2174 7 років тому

    Dear Brad. You are a great teacher to show us step by step. You show us the coding methods in details. Hope you can use this method to teach in your forthcoming video. Thank you.

  • @realtemmy_
    @realtemmy_ 2 роки тому +2

    Thanks a lot sir, I really do appreciate your teachings. God bless you

  • @uchihaa_kakashi
    @uchihaa_kakashi 3 роки тому

    I have been following you for an entire year i think first time I saw you today 😅

  • @raviverma8904
    @raviverma8904 7 років тому +1

    the new intro of your video is really cool, and like always video is amazing

  • @LatinoWebStudio
    @LatinoWebStudio Рік тому

    Thanks so much for this video! Even tho it's a few years old it's literally the best one out there for how to create a map with the JavaScript API. Thanks for always creating great content!

  • @imninja4220
    @imninja4220 5 років тому +1

    you always make complex things simple. great tut

  • @ripplereflections9341
    @ripplereflections9341 Рік тому

    Thanks a bunch for the video coach...
    I was searching for such a guide throughout the internet , but couldnt find.. Your explanation helps me a lot in building my project..
    Once again thanks a bunch

  • @barrykruyssen
    @barrykruyssen 5 років тому

    This is one of the best tutorials I have seen todate (and I've been on the internet since it started)

    • @unknownman1
      @unknownman1 5 років тому

      internet was started around end of 1982. lets assume you were 20 at that time,which means now you are around 57 years old. nice to meet you sir.

    • @barrykruyssen
      @barrykruyssen 5 років тому

      @@unknownman1 Acutally 59 and I started in computers in 81 and very soon made it may career. Still learning today.

    • @unknownman1
      @unknownman1 5 років тому

      @@barrykruyssen omg so inspired by you sir

  • @ilikeit6306
    @ilikeit6306 4 роки тому

    I love this UA-cam Channel so much , I learn a lot from here. Thanks Master. Keep share it all. I always here.

  • @BuddyGhimire
    @BuddyGhimire 2 роки тому

    Straight to the point, no BS. Loved your video!!!!!!

  • @jamesye
    @jamesye 7 років тому

    Loving the new video format with live screen recording

  • @JanKowalski-ke6wz
    @JanKowalski-ke6wz 5 років тому

    This is definitely the best Google Maps tutorial ever! Thank you sir

  • @mdjunaid38
    @mdjunaid38 7 років тому

    The best tutorial I have seen for Google maps.. I finally can say , I know how to use Google maps API .. Thanku so much !! Looking forward to more such videos

  • @Guts-zo3jv
    @Guts-zo3jv 5 років тому +1

    Thank you! You've been helping me a lot to understand new APIs! Keep it up!!!

  • @mdkaiserali6830
    @mdkaiserali6830 3 роки тому +1

    You guys are not human ....Super Human!!!!

  • @arnoldoumana3932
    @arnoldoumana3932 7 років тому +1

    great tutorial, you are such a good teacher Brad, keep going.

  • @mojalili4070
    @mojalili4070 6 років тому

    You are a perfect instructor, Brad. Appreciate it.

  • @gradyhodge8517
    @gradyhodge8517 5 років тому +1

    Seriously Great tutorial, this taught me what I was trying to learn in a university course! THANK YOU! I'm recommending you to everyone!

  • @spartanapela
    @spartanapela 6 років тому

    Congratulations. An excellent, lucid presentation of the subject!

  • @vladuxs112
    @vladuxs112 6 років тому

    I think this video was the one, when I finally got understanding of objects, arays and all that js code, I were copying for weeks by now :D thanx!

  • @faaizhaque8415
    @faaizhaque8415 5 років тому +1

    So articulate and easy to understand! Thanks for the video

  • @cathumali6624
    @cathumali6624 7 років тому +2

    Hi, I love your tutorials.. They are clear and I'm learning a lot. Thank you.

  • @williams6726
    @williams6726 4 роки тому

    This tutorial was excellent! Very clear and concise. Hit several relevant points. Thank you for sharing. Subscribed!

  • @pierrecallies1133
    @pierrecallies1133 6 років тому

    One of the best video I have seen in a long time!

  • @LilianaLines
    @LilianaLines 2 місяці тому

    when you started talking i immediately knew you were from Boston 😆 thanks for the video cheers brother

  • @DrSarge37
    @DrSarge37 7 років тому

    Seeing the markers grabbed from the DB would be very useful for me.

  • @ghsdhrorwahin3327
    @ghsdhrorwahin3327 2 роки тому

    Great Work Brother. I like your way of explaining things in an easy way.

  • @muthuhari8875
    @muthuhari8875 7 років тому +1

    finally video i am waiting for, thanks brad, Please do more stuffs on Google API`s

  • @sheldonfourie5959
    @sheldonfourie5959 7 років тому +2

    You a beast keep pumping such amazing content

  • @amigofelixsv
    @amigofelixsv 7 років тому

    All what I wanted in one video, in less than 30 mintutes = AWESOME!!!
    Thank you!!!