Google Maps JavaScript API Tutorial
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- 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.traversymed...
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/t...
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy
RIP in 2020...you have to enable billing to display the map :( . Overall, still best tutorial :D
You need to add billing, but as far as I can tell, all the functions that are used in this video are free.
You are the best teacher on the net .thank you very much for your effords
You're very welcome, thanks for watching!
You helped me out multiple times. Thanks for uploading amazing content.
Realtime Google Maps Geolocation Tracking with JavaScript netx tutor?
brahim belkhirania
Call me Call me
I have learned from you more than in university or school 😂
That's awesome. I really wish colleges would teach more practical knowledge. Stuff we actually need and will use
me too
@@TraversyMedia The only university I feel we can be deep & practical is TH-cam University ; Specializing from Traversy Media department of Web Development !!!
Fact
@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
It has a free trial but it says we must enable API and "we've to create a billing account first in order to actually use it" Is there any way to deal with this I mean API gets enabled but in order to get the API key from credentials you need to create a billing account. This video is about 5 years ago but today google asks for a billing account what should we do about this?
Sadly they won't let you use it now, until you apply for payments..
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
Hello, why do you put multiple script tags, instead of one script tag for all?
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
Hello Brad,
I have one question, would it be possible to convert Google Maps API response to 3D model (something like Google Earth) beacuse there is Earth Engine that doesn't work well like this.
Thank you in advance :)
i'm going to stop adblock in any time i watch a video from you brad!
thank you :)
Thank you. I really appreciate that. Ad block is a killer for us little guys :)
Thanks a lot sir, I really do appreciate your teachings. God bless you
Video request: any other Google API (GMail, Google Calendar, etc.) :)
What about Push notifications with PHP?
gmail specifically plsssss
Great tut for 2017. Now Google Maps APIs are under Google Cloud and the Interface has all changed!
Meanwhile (since August 2018?) the Google Maps API requires credit card validation and has a free limit of 200$/month...
@@firstnamelastname-tr8fo how can i do that ?
You should have mentioned at the beginning of the video that this API is paid
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.
Thats awesome. The exact response and outcome I am look for when I upload a video :)
Soon I will share some of my stuff to you to have feedbacks from your side
@@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.
@@TraversyMedia please can guide how can i get map mentioned in website doh.saal.ai/
5 YEARS AGOOOOOOOO
Thank you for the video...it helped me a lot....but API key is asking for enable billing
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.
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.
Please please please!!
I have question
Can we falter the API ?
Like can make the API show me only the Chinese restaurants??
You're so good at explaining these things, so much clearer than any other videos out there! Thanks for sharing this :)
Event after 5 years, this is still the best tutorial about location using javascript on The Whole Internet
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. :)
All I ask is that you guys watch with no adblock, share and like. That is plenty
Sure. :)
for sure
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.
Hey, thank for the video. I live in Lawrence, so right around the corner from you. Small world!
Very familiar with Lawrence. I lived in Methuen about 10 years ago. Very small world
is it still works on 2020? , i must add any kind of maps to my web site (using javascript and html) thx a lot
Best lecture on google api...
Is there a way to create a button to add a marker ? like we can click that button and then we can add marker and won't add marker if we click directly on map?
Great video btw :)
Great tutorial Brad..Thanks a lot for making another amazing video..
Does it shows exact location when you zoom it? I wonder it will. Because there is only long/lat.
google map API is not free now :(
nop
i think you're allowed one project on billing mode for free.
awesome. . that's looks fun and easy to understand for me as a beginner for javascript development. thank you for this tutorial. :D
by the way, is it available for me to apply this on my Python Django web?
I want to make it as a form for saving latitude & longitude values to my database.
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?
Best example of google map javascript api
Thanks for learning
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.
Can you please make a video on howto get the location of a user when he/she opens their gps.
just thanks a lot man from 2019
How to edit the “quick facts” on the page of a country on google maps ?
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.
Why i cant implement like this? I hv API key but if i load the maps they told me to hv a billing account? Is that true? I just want to try not buying
you cant use the API for free now
You did a lot of hardwork on this concept and you made this easy to learn, thank you so much.
Jesus Christ loves you all!
Just in time for a new project that I have....!!! Thank you!!!!
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 :)
does google cloud platform cost money once the free trial runs out?
This is one of the best tutorials I have seen. Thank you.
Thank you so much sir! Learned a lot from that video
12:10 - "What the hell? a mosquito is in here!" -Traversy Media.
XD hahaha
lol thing flew right in my frigging face :)
how can i floating object over google map API can you help me cause i need it to my project or may i have resource.
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!
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 )
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
This is so helpful! Thank you! Did you ever end up making a follow-up video on getting this to a database? I'm currently making an web app and want users to be able to store location info for where they've been and I'm using psql for the db.
Thanx Brad...
Thx for this. How about a google map with markers and infowindow that uses PHP Mysqli to get lat/lng from a database. The Google website has Mysql code example, that does not work on servers anymore. pls be so kind to assist
Thank you, Brad! Amazing video like always!
Sir, First of all thanks for a nice tutorial. And now I am getting the following error "you have exceeded your request quota for this API". How to fix it ?
yeahhhh I'm falling in love with you
Almost 2 years later still a great tutorial. Is there any way to trigger the Google directions API/functionality from the entries made with the GM JS API?
how to generate routes between points for example X,Y,Z and determine the fastest route for deliveries
do you have any javascript code for this
Hello Traversy, thanks for your videos. I watched this video recently but I get an error on my console, how do I fix this?
common.js:114 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'defaultView')
at new _.ria (common.js:114:65)
at Ks.j (map.js:105:284)
at Mi.data.Rf.map (js?key=AIzaSyCTRkE6GQARqHnHkfaK17hw8GWCW3Gwul4&callback=initMap:171:70)
I am little confused. Thereis no inner html in the code how the map appear on div ?
the new google.maps.Map() built-in object takes care of it
Hi Brad.. Thanks for video.. I am trying to implement google maps one in Angular2.. in ts fle i made the function function initialize()
{
var options = {
zoom: 8,
center:{lat:28.7027082,lng:-77.1241528}
}
var map = new google.maps.Map(document.getElementById("map"), options);
}
component.html file :
Locate us:
component.css file:
#map{
height: 400px;
width: 100%;
}
And i tried with including :
in both index.html as well as in component.html.
Could you please help?
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 👍🏻
hello I need to create online map, with a floating or layer window that any user go to my online map and introduce their service or data into the map, is possible? and then after bein uploaded appears in the map? this window is like a small form,
thanks
hello, if I want to add a hyperlink in content part of marker then how can we do that..? Actually I've tried like this - content:''}); but it's not working..
Jesus is King! If you do not know Jesus as Savior please pray, “ Jesus save me. At this moment I choose to have faith that You gave Your life for me and rose from the dead. Doing this You defeated death, even though it meant You had to die. You surrendered Your life for me, so I chose to surrender my life to You. Forgive me Jesus, my God. Amen.”
Jesus loves you so much. Please accept His love. I encourage you to read the Bible and pray.
“For God so loved the world that he gave his one and only begotten only Son into this world, that whoever believes that in him shall not perish but have eternal life.”
John 3:16
🙏❤️🙏
Jesus is enough!
Again I tell you, Jesus loves you!
Kinda strange how the coordinates for Boston are 42.3601° N, 71.0589° W, & he just types in negative -71.0589..with absolutely no explanation what so ever..please teach with attention to details...also I loaded this twice cause I wanted to change the zoom value & it said I exceeded my limit and now it cant load..apparently I have to pay for it..sweet
I've lost count on how many times your videos have helped me, you're a gem!
Thanks a lot. Finally I learn maps marker!!!
Thanks a lot. Finally I learn maps marker!!!
Dear Brad,
Thank you for this awesome video.
Can someone please tell me how can add weather API on this google maps, so when I click to display weather information for specific city (the city where I clicked on)?
Thanks!
You are my best teacher, thanks for efforts can you tell me how we add a search box like on the the google map platform
When I repeat the same steps I get a map with black background and text 'For development purposes only'. How do I get rid of it? By providing billing details? Doing a trial period? But it only valid for 30 days I guess. Any advice would be appreciated.
hi sir , i have problem i need to help , when i do test to get location i have this problem "This page can't load Google Maps correctly" to get location ,, this is the code
Now that Google cloud forces you to add a billing method, this can't be done. Not even in dev mode only.
Google cloud should give students an option for dev mode.
I know they have the $300 credit , but what good is that if i have to attach a credit card to it anyway?
They're stopping alot of developers from learning by force enabling billing :(
And now it’s become very old again 😁
Thanks for the tutorial! whatever I do I get this error in my console: "google is not defined". Any ideas?
I had a need to do this with thousand markers but been procrastinating thinking it would be very hard. From this video, it doesn't seem hard at all !!!! Got a question though. Would it be possible (I mean not super difficult) to show thousands of markers on Wordpress site ? Most of the functions that I have in mind can easily be done with WP except for this map part.
Do you know a way to integrate a search box for "my maps" in view mode for the mobile version?
I've been watching this video now for guiding me for my project. The problem is the map doesn't appear whenever I open the html on the browser. The text "My Google Map" just appear. What should I do?
Have a nice day.
I have a queastion.
How can we add a google maps location into the about section?
I am watched this video: th-cam.com/video/Wm6CUkswsNw/w-d-xo.html
But ı don't understand.
I am waiting your answer.
Thank you.
Word on the street is that there's now a charge for this? or maybe I'm thinking of another Google API?
Also, would you still use "var" three years after this was posted? Thanks!
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.
Hello
What if i have to place markers by category like dispensaries or hotels or food restaurants in a city or location
Thank you
Such good instructions... Do you have a video or can you help in adding clusters to your programming? I can either have a map with clusters and no understanding of how to get info windows, or I have multiple markers with info windows that I cant figure out how to cluster. Any ideas?
its time to read about the real threats to our human jobs by Artificial Intelligence in the book 'THE LAST SAPIEN' available at amazon books
I got an API key last fall and it worked then but it isn't working now. I see the map for a second then I get this error in the console: RefererNotAllowedMapError. Does anyone know how to fix that?
I went to the URL shown and the first thing it wanted to do after clicking the 'Get Started' button was set up a project then show an 'Enable billing' details dialog.
I cancelled out of that and it went back to the front page.The Documentation link off that page seems to have something useful though.
I must be missing something, surely I can try out Google Maps API at least in development for free?
I dont think it works anymore.
Now you dont really need JS in order to do this, just go to google maps enter the location, click on share then embed and copy HTML, and there you go.
looks like this:
You guys are not human ....Super Human!!!!
I'm having a lot of trouble removing markers when a function is called. I've lurked on stack overflow, but the solutions seem very convoluted and so far none have been successful at removing pins.
thanks
You push the envelop too hard !
Can you tell me onething ?
I have google buisness profile where google provides free basic website.
If i enable google map api , what are the the benifits ?
I don't know any coding, even don't have a single idea of api.
Please suggest me
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.
Google asks for money to implement this as far as I understand. You get "300 euro" - promotion money. One project costs 27 euro (my first one).
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?
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.
I want to overlay a country's tiff image file onto google maps javascript API. Any reference or guidance on how to do that will be much helpful.
This is brilliant, but where do you get the icon url from please?
Seems to work but it won't display because I haven't enabled billing on the Google Cloud Project. How much does it cost?
Great video, but I have a problem.
I am creating a web app and I need to add markers to locations that I get from firestore, but I get the info after the map is initialized. I trying running the marker block of code on that point but it doesn't show up in the map, only when I do it in the initMap function.
Is there a way to do what I need?
Is there a way to hide the api key in that async defer src? I've made an app using the google maps api and I would like to push to git and eventually deploy. process.env variables won't work in the src string . Anyone know how to do this?
Best tutorial 😍. how about using it offline? for localhost? is it possible? thankyou 😍
Thanks Brad it was an extremely helpful video... May almighty rest your soul in peace.... Amin❣️❣️❣️