Google Maps JavaScript API Tutorial

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

SPONSORS:

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:

FOLLOW TRAVERSY MEDIA:

[itdepends]

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

[hiteshkumar-edsb]

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.

[brahimbelkhiria]

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

[AmmarTaicho]

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

[SalmanAnsari-smzn]

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.

[steveliveshere]

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.

[ofirt]

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.

[bobross]

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

[lulualmohtarif]

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

[keelydyer]

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

[djentleman_anurag]

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

[mrgreggles]

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!

[javidabbasov]

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

[el]

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

[hauntedspear]

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

[camposricardo]

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

[ahmetomer]

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.

[djguy]

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

[chaithanyasurya]

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

[mustafaalsaqi]

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