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
http://www.traversymedia.com/downloads/mymap.zip
SPONSORS:
DevMountain Bootcamp – https://goo.gl/6q0dEa
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Tweets by traversymedia
http://www.linkedin.com/in/bradtraversy
Original source
44 responses to “Google Maps JavaScript API Tutorial”
Anybody know how to close all open infowindows when clicking and opening another?
Can you do a Gmaps video on entering long/lat via an admin page input field and that will post a marker on a G map on a home page of a site. As if a Realtor wanted to have markers of all their properties available. When a visitor comes to the home page and sees the map, they could click on the marker and be taken to that property info.
I owe you 5 beers. Let me know when u ever come to Nairobi.
Hi from Italy. First I want to congreatulate with you for the nice and welldone video. I only have a request. When the map appears in the website, all ok if I click on the marker but if I click somwhere else it appear a standard pin. Is it possible not to allow users to add extra pins? Thank you.
I've got a problem, I''m using sublime text 3 and really could get them after following them procedure. Please I need help or tips to couplet my job. Thanks
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
I tried cut pasting the script portion in the html to a separate JS file. However, the map was not showing up. Any idea why is it so ? Does it mean that all the JS script related to Google Map has to be in the script tag. PS: I was testing this thing in meteor.js client folder and then running it as a server.
Thanks for this walk-through. I felt I learned a lot just from this video. I'm thinking of tying it to a back-end database. Do you think mongoDB would be a better choice than MySQL?
Hello can you please add how to add custom labels below the markers. Thank you. Nice Work
Hey Brad, I was having issues with the map loading up towards the end of the course and wanted to compare your code with mine, and when I ran you html file, your map didn't come up as well but instead a error message came up. Thanks
its a very interesting video i have subscribed
Hi could you possible tell me how to save the markers that you create by clicking on the map to a database or just direct me to a tutorial that can
Great tutorial
tks …the best
Tank you for this awesome tutorial. Everything I needed in one place. Keep going 🙂
Thanks for sharing this tutorial
Yes you have put the best content I have ever seen . and you are the best teacher.
Thanks Brad! Great video!
You are the best. thank you.
You made so easy to learn Thanks
You did a very good video. I will follow you for sure
Great video! refreshed some of my google maps and javascript knowledge. Cheers.
Thank you great vid Brad
Any plans to demonstrate how to display locations held in a database, on google maps?
This my first video of you ,and you are awesome. Thank you
one of the best tutorial..
Do we need to create an API key everytime, lets say I wann awork with Youtube API do i need a different key. Or this API key is only for google map api?
thank you sir 🙂
Thank you for such a good tutorial!
you're a life saver
All what I wanted in one video, in less than 30 mintutes = AWESOME!!!
Thank you!!!
This is one of the best tutorials I have seen. Thank you.
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! 🙂
i'm going to stop adblock in any time i watch a video from you brad!
thank you 🙂
Great content! I learned a lot from this video! Thanks
Thank you for your video ! But how to set an InfoBubble to customize the infoWindow in this code ?
Make android app videos pretty please please please!!
Why the negative sign for longitude?
you are the best!
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!
Video request: React VR
thanks sir its very helpful in my project thanks alot
nice video … but i really want to know ..
how about if i got .shp/.kml file, i want to show it on Google Maps JavaScript API?
Hi, I love your tutorials.. They are clear and I'm learning a lot. Thank you.