Google Maps JavaScript API Tutorial

Подписаться 2,3 млн

Просмотров 1,1 млн

50% 1

In this video I will work a little bit with the Google Maps API as requested by some of my subscribers. We will implement a map with some custom markers, info window, event listeners and we will optimize the code so that we can easily add new markers with new properties.
CODE: Code for this video
www.traversymedia.com/download...
SPONSORS:
DevMountain Bootcamp - goo.gl/6q0dEa
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/traversymedia
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy

Наука

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

11 июн 2017

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

@keelydyer7838 5 лет назад

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

@SalmanAnsari-sm2zn 7 лет назад

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

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

@SalmanAnsari-sm2zn 7 лет назад

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

@MrAKGarg007 5 лет назад

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

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

@ofirt7 6 лет назад

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.

@ahmetomer1759 7 лет назад

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.

@lulualmohtarif 7 лет назад

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

@TraversyMedia 7 лет назад

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

@mattfrazier8838 5 лет назад

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!

@bobross2404 Год назад

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

@ankitmehrotra8519 7 лет назад

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

@DincerHoca 7 лет назад

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

@mustafaalsaqi 6 лет назад

Please please please!! I have question Can we falter the API ? Like can make the API show me only the Chinese restaurants??

@shubhamdhingra5214 7 лет назад

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

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

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

@djentleman_anurag 7 лет назад

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

@TraversyMedia 7 лет назад

All I ask is that you guys watch with no adblock, share and like. That is plenty

@djentleman_anurag 7 лет назад

Sure. :)

@emmanuel4699 7 лет назад

for sure

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

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.

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

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 👍🏻

@brahimbelkhiria2157 7 лет назад

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

@TraversyMedia 7 лет назад

You're very welcome, thanks for watching!

@TheMustak25 7 лет назад

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

@alexandrufilipescu1301 7 лет назад

Realtime Google Maps Geolocation Tracking with JavaScript netx tutor?

@wesleyyjones602 6 лет назад

brahim belkhirania

@wesleyyjones602 6 лет назад

Call me Call me

@MenAtWorkMedia22 7 лет назад

Thank you, Brad! Amazing video like always!

@AmmarTaicho Год назад

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

@leifan9740 5 лет назад

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

@c0mrade95 7 лет назад

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

@g-luu 7 лет назад

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.

@mrgreggles998 7 лет назад

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!

@TraversyMedia 7 лет назад

Thats awesome, glad I could help

@gradyhodge8517 5 лет назад

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

@alexandros-markovits 7 лет назад

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

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

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

@W-Whiz 4 года назад

Best lecture on google api...

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

@sheldonfourie5959 7 лет назад

You a beast keep pumping such amazing content

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

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

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

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

@javidabbasov959 7 лет назад

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

@TraversyMedia 7 лет назад

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

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

me too

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

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

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

Fact

@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

@EsainM 6 лет назад

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

@dezlo2174 6 лет назад

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.

@CO_IN_TECH 6 лет назад

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?

@maralashyrova7178 5 лет назад

just thanks a lot man from 2019

@Guts-zo3jv 5 лет назад

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

@raviverma8904 7 лет назад

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

@robertosoriano9617 7 лет назад

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

@TraversyMedia 7 лет назад

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

@crystalsky7615 7 лет назад

Thanx Brad...

@georgeuba5421 6 лет назад

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

@corsaronero5619 7 лет назад

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

@lifeisadiyproject1418 7 лет назад

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

@FlyingUnosaur 7 лет назад

What about Push notifications with PHP?

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

gmail specifically plsssss

@Jan-rx1lo 7 лет назад

How about OpenStreetMap? Would be great!

@henr2000 Год назад

always amazing Brad!!!!

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

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

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

@VaporCode 7 лет назад

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

@TraversyMedia 7 лет назад

lol thing flew right in my frigging face :)

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

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

@arnoldoumana3932 7 лет назад

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

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

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

@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

@donmbelembe1089 7 лет назад

yeahhhh I'm falling in love with you

@MrPstifler 7 лет назад

That was great! We want more stuff like this!!

@imninja4220 5 лет назад

you always make complex things simple. great tut

@RobertWildling 5 лет назад

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

@hananeenanah8254 5 лет назад

@@firstnamelastname-tr8fo how can i do that ?

@freegalaxy1695 5 лет назад

google map API is not free now :(

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

nop

@00el04 4 года назад

i think you're allowed one project on billing mode for free.

@AndrewLee-wl6cn 5 лет назад

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

@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

@user-ke6iq4hl6r 8 месяцев назад

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

@mojalili4070 6 лет назад

You are a perfect instructor, Brad. Appreciate it.

@mariacrowley2669 5 лет назад

Great video! Very easy to follow. I'm not quite there yet to program the entire map efficiently but I can understand exactly how it works. I'm using the divi plug in but looking around for more functionality to add in later.

@muthuhari8875 7 лет назад

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

@felixvfox 7 лет назад

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

@ourcore 5 лет назад

Great video! Really helpful. Would be awesome to see a second video with the things that you discussed at the end of this one

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

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

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

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

@hadibq Год назад

awesome explanation as usual Brad! TY!

@JanKowalski-ke6wz 4 года назад

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

@cathumali6624 7 лет назад

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

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

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

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

Awesome video man, keep it up!

@TheHammerAP 5 лет назад

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.

@portlandsound1 6 лет назад

I agree. Your videos are amazing. You have such an amazing way of explaining complex ideas, which demonstrates your expertise. Thank you!

@garrettbaker2320 7 лет назад

Another gem! Thanks Brad.

@00el04 4 года назад

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

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

@lancelogan1 5 лет назад

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.

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

@BradleyAhrens 6 лет назад

Thanks Brad! Great video!

@pierrecallies1133 5 лет назад

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

@pvls9514 5 лет назад

Brad, thanks! Very nice video!

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

Crazy, awesome, huge, many, many, big thanks!

@janf.164 6 лет назад

Tank you for this awesome tutorial. Everything I needed in one place. Keep going :)

@izzatullokanoatov370 6 лет назад

Omg, finally I did it with the help of you. Thank you for such a wonderful video. :))))))

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

@spartanapela 6 лет назад

Congratulations. An excellent, lucid presentation of the subject!

@MortenCopenhagen 6 лет назад

Brilliant. Just what I was looking for. Well done.

@ebenezerl6008 Год назад

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

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

I can't thank you enough for this wonderful video man!

@krowwweee2918 7 лет назад

Thank you so much for everything you do. Awesome stuff. Wish I had more time to go through all your vids in depth :)

@TraversyMedia 7 лет назад

Your very welcome. Don't worry about it, I know you guys have lives :) watch what you can when you have the time

@ketakip1 6 лет назад

Very well explained! Very useful for getting started with the Google Map APIs. Exactly what I was looking for! Thank you so much! :)

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

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

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

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

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

@jeremyshi6597 7 лет назад

Thank you so much! This is very helpful! I find it's best to learn this video by watching it while doing it on my own. I'd love to have more in-depth tutorial on how to integrate database with Google Map API! :)