• Monday , 11 December 2017

Google Maps JavaScript API Tutorial

Code Canyon



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

http://www.linkedin.com/in/bradtraversy

Original source

3d Ocean

Related Posts

44 Comments

  1. InGeliXo
    September 20, 2017 at 22:27

    Anybody know how to close all open infowindows when clicking and opening another?

  2. TDO Home Inspections llc.
    September 20, 2017 at 22:27

    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.

  3. patrick
    September 20, 2017 at 22:27

    I owe you 5 beers. Let me know when u ever come to Nairobi.

  4. Stanislao Iandolo
    September 20, 2017 at 22:27

    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.

  5. daniel fusi
    September 20, 2017 at 22:27

    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

  6. daniel fusi
    September 20, 2017 at 22:27

    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

  7. Soham Malakar
    September 20, 2017 at 22:27

    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.

  8. Rick D
    September 20, 2017 at 22:27

    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?

  9. Gordon Fiifi Donkoh
    September 20, 2017 at 22:27

    Hello can you please add how to add custom labels below the markers. Thank you. Nice Work

  10. mark liventsov
    September 20, 2017 at 22:27

    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

  11. storyteller Lyndon
    September 20, 2017 at 22:27

    its a very interesting video i have subscribed

  12. david biddulph
    September 20, 2017 at 22:27

    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

  13. Lebohang Mashabane
    September 20, 2017 at 22:27

    Great tutorial

  14. Rizal Yuliandi
    September 20, 2017 at 22:27

    tks …the best

  15. Jan F.
    September 20, 2017 at 22:27

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

  16. Info Planet
    September 20, 2017 at 22:27

    Thanks for sharing this tutorial

  17. Raj kumar Rimal
    September 20, 2017 at 22:27

    Yes you have put the best content I have ever seen . and you are the best teacher.

  18. Bradley Ahrens
    September 20, 2017 at 22:27

    Thanks Brad! Great video!

  19. Irfan Khan
    September 20, 2017 at 22:27

    You are the best. thank you.

  20. Dawood Kokawala
    September 20, 2017 at 22:27

    You made so easy to learn Thanks

  21. Daniel Jimenez Sanchez
    September 20, 2017 at 22:27

    You did a very good video. I will follow you for sure

  22. Nick Duffield
    September 20, 2017 at 22:27

    Great video! refreshed some of my google maps and javascript knowledge. Cheers.

  23. Kevin Hyde
    September 20, 2017 at 22:27

    Thank you great vid Brad

  24. Enjoi154
    September 20, 2017 at 22:27

    Any plans to demonstrate how to display locations held in a database, on google maps?

  25. ABDULAZIZ ALAHMADI
    September 20, 2017 at 22:27

    This my first video of you ,and you are awesome. Thank you

  26. Ravikiran Jadhav
    September 20, 2017 at 22:27

    one of the best tutorial..

  27. AJAZ MIAH
    September 20, 2017 at 22:27

    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?

  28. Mag Pro
    September 20, 2017 at 22:27

    thank you sir 🙂

  29. Андрей Перминов
    September 20, 2017 at 22:27

    Thank you for such a good tutorial!

  30. salabane123
    September 20, 2017 at 22:27

    you're a life saver

  31. Felix Avelar
    September 20, 2017 at 22:27

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

  32. Dincer Aydic
    September 20, 2017 at 22:27

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

  33. Yuanming Shi
    September 20, 2017 at 22:27

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

  34. ali 2017
    September 20, 2017 at 22:27

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

  35. kornel.nyp
    September 20, 2017 at 22:27

    Great content! I learned a lot from this video! Thanks

  36. Gilles Pinchart
    September 20, 2017 at 22:27

    Thank you for your video ! But how to set an InfoBubble to customize the infoWindow in this code ?

  37. Mwa Joe
    September 20, 2017 at 22:27

    Make android app videos pretty please please please!!

  38. Tom Clarke
    September 20, 2017 at 22:27

    Why the negative sign for longitude?

  39. AntiSocial Cloud
    September 20, 2017 at 22:27

    you are the best!

  40. Gregg Cleland
    September 20, 2017 at 22:27

    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!

  41. Aimopotis 80
    September 20, 2017 at 22:27

    Video request: React VR

  42. Arslan Jameel
    September 20, 2017 at 22:27

    thanks sir its very helpful in my project thanks alot

  43. musab minato
    September 20, 2017 at 22:27

    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?

  44. Cath Umali
    September 20, 2017 at 22:27

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

Leave A Comment

You must be logged in to post a comment.