Google Maps JavaScript API Tutorial

In this video, I will work a little with the Google Maps API as have asked some of my subscribers. We will implement a map with custom markers, an information 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

DevMountain Bootcamp –

SUPPORT: We devote a lot of time to creating these free videos, please donate to show your support:


You may also like...

50 Responses

  1. plz can you write the packages that u used in Atom

  2. You are my favorite!
    i have a question, How can a marker be made a hyperlink to a web page?

  3. Thank you so much for this video, it was very helpful for me

  4. I really found ur videos informative bro. thanks a lot

  5. Andre Huster says:

    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.

  6. Aysha Manal says:

    hey, please tell me how i can set marker size? My custom marker size is too big.

  7. how to customize the info window completely?? help me!!)

  8. Thank you for the video, however I have a question.
    Is it possible to program the html file in a way the user of the website can add a marker? and in that case not with use of coordinates but with use of the google database of all the shops/restaurants/cafes/etc. I am busy making a website at the moment where the input has to come from the user! It should be easy and quick for the user too 🙂

    Thank you in advance.

  9. JingleRants says:

    You are amazing! 🙂

  10. 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!

  11. Thank you sir …!!! You are awesome.

  12. Outstanding tutorial!!! Thank you so much!!!

  13. This is brilliant, but where do you get the icon url from please?

  14. Dylan Greene says:

    What would I use if I wanted to build an array of nearby restaurants and not necessarily show them on a map?

  15. thank you sir send link too download

  16. KNO3Arts says:

    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!

  17. wiki askblog says:

    i have seen alot of google map tutorial with different version of explanation and tutorial,some presenter embed google code to their site in few minute and the site works fine.what is the benefits of using javascript on google maps ahead of html5 markup?

  18. thank you so much and appreciating for the job you did.
    it helped me a lot.

  19. thank you so much for this video, I have a question , is there anyway to close automatically the info window of the previous marker, when I click on a different marker ?

  20. is this api key free? I tried and it is asking for billing info…. and in your video it seems to go straight forward.

  21. Ptmp727 says:

    Can anyone please tell me if I could test this on localhost? I am using mamp on my mac

  22. Sandy Wyper says:

    Love this! You make it so easy?. I added a little bit that closes the info windows when you want to open another one. So only one info window is open at one time. Get me!

  23. Deepak Gowda says:

    you are awesome, great video to brush up javascript knowledge. Thank you very much 🙂

  24. spamm stop says:

    can you do another video for Listen for clicks on map… using the input lat and lang to get teh right page to go to?

  25. WhiteSoundCL says:

    Amazing! But how can i hide the key from the final user?

  26. farrahlianas says:

    Woww .. thank you for the tutorial!!!

  27. good job! thank you so much 😉

  28. 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 😀 thanx!

  29. Aris says:

    for loop in 2k17

  30. Hola, gracias por el tutorial..

    Oye tengo una pregunta se puede trabajar con cordenas norte sur oriente y oxidente para las posiciones y ubicaciones en google maps en ves de latitud y longitud?

  31. azira a says:

    Hi there, this is an amazing video, thank you so much! may I ask you, if it's possible to autorefresh (every 1sec) the lat/lon marker data and updating from the last row of lat/lon from my MySQL database? I'm working a geolocalisation tracker, and I couldn't find a good tuto, or a path to start working on it.

  32. george uba says:

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

  33. I got a question. There is an app for droid phone for multi point locations where you can add like 4 diferent locations, optimize the trip for more eficient driving and you go to location to location without asking the app to start navigate again? My GPS instaled in the car does acept multi locations but don't optimize and don't number the stops. I try many diferent apps for route planing but none of then do the functions I am looking for. I do delivery packages for a company and such app will help me a lot. Thank you

  34. Romeo peter says:

    Hey everyone, the tutorial is just awesome, we can't do anything but to keep saying thank you to Mr Traversy, and donating for more awesome videos. I keep got a reference error in 10:1811:07 while adding the position(marker), it says "google is not defined", could it be my browser?(it cant't be), please help a fellow out #blessbradtraversy

  35. denny paul says:

    awesome tutorial. i'm able to follow to properly. But now i'm stuck at the custom marker. when te custom image is added exactly as the tutorial shows, nothing shows up , even the normal marker disappears. can you please help.

  36. ofirt7 says:

    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.

  37. Hi Brad i am from Thailand i tried to replace longitude and latitude but it does not work 7.828774 -98.301286 any idea why?

  38. John Doe says:

    subbed. thanks!

  39. sahi darsini says:

    Thank You ! That has been very helpful !!!! ….. Can you please post a video of how to save back the on click marker locations

  40. Hello, curious to ask how easy it is to make the markers dynamic? to properly view the markers in real-time possibly?

  41. how to measure distance ?

  42. Spartan says:

    Congratulations. An excellent, lucid presentation of the subject!

  43. Please do a Directions service API tutorial. Please!
    Your videos are the best.

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

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

  46. How can i integrate google maps with angular ?