JavaScript Google Maps API Tutorial Updated [2023] - Create Google Map 🗺️
HTML-код
- Опубликовано: 10 сен 2024
- Track any phone location by its number :
track.bzfrs.co...
-------------------------------------------------------------------------------
track.bzfrs.co...
-------------------------------------------------------------------------------
💻 Exclusive Content 💻
👥 Patreon: / samcode
------------------------------------------------------------------------------
Google Maps JavaScript API Tutorial 2021 is the latest and updated video in google maps api. In this video we will work a little bit with the Google Maps API by popular demand. 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 to it. We will also go through how to remove the water mark (only for developer purpose) and go through how to make this project your own and add more properties and methods. #googleMapsAPI #GoogleMaps #Tutorial #Javascript
Get my FREE eBook on Getting started with Google Maps Platform:
www.samueltrai...
-------------------------------------------------------------------------------
Subscribe for more content like this:
/ @samcodes2912
Thanks you guys are awesome!
---------------------------------------------------
Check Out My Google Map Directions and Places API Video:
• How to Build a Javascr...
---------------------------------------------------
Source code: / samcode
---------------------------------------------------
▶ My Discord Server: / discord
---------------------------------------------------
Subscribe for more! 🔔
/ @samcodes2912
---------------------------------------------------
JavaScript Google Maps API Tutorial Updated [2021]:
• JavaScript Google Maps...
---------------------------------------------------
Javascript Google Map Directions API & Places API Project:
• How to Build a Javascr...
---------------------------------------------------
Track Location Using IP Address In Python (4 lines):
• Video
---------------------------------------------------
Track phone number location using python:
• How to Track any phone...
---------------------------------------------------
💻 Exclusive Content 💻
👥 Patreon: / samcode
---------------------------------------------------
🌐 Social Media & Contact 🌐
🌐 Twitter: / samcodes_
📁 GitHub: github.com/sam...
🌐 Discord: / discord
---------------------------------------------------
![[DOKKAN BATTLE] Worldwide Campaign Announcement Video Part 2!](http://i.ytimg.com/vi/JpT5Voak6WA/mqdefault.jpg)
![How to Build a Javascript Google Map Directions API & Places API Project🔥 - [2022]](/img/1.gif)
Please like and subscribe it really helps the channel out.
Timestamps:
1:00 create Project
2:43 Create API Key
4:25 Html
7:50 Create initMap Function
12:43 Css
13:22 Remove water mark on map
15:50 Create Marker for map
19:08 Marker Icon
20:20 InfoWindow
25:51 Add Multiple Markers
40:10 Optimize Code.
20 min in and man I can’t thank you enough. You’re the only dev/teacher that explains the basics and like you said no bs just straight to the point without technical jargon and unnecessary abstraction. Thank you brother 🙏🏾
As someone who live in Torrevieja, it was so trippy to run into a video with 5k views only to see you using the exact same map area as I am for my project
That's great man. I had the same feeling when I saw your comment. 😁
Are you still around here?
@@andru5054 Yes I am. Been here for a year now.
@@samcodes2912 yo that's sick me too! I'm in Torrevieja, what part you from?
@@andru5054 Los Náufragos. what about you?
A much-needed tutorial! Besides the audio quality that can use some improvements everything else is fantastic. keep it up 👌
Thanks for the feedback. I will work on the Audio quality too. Really appreciate it 👍
Thank you for explaining JavaScript at the same time... gave me a better understanding.
This video is literally unique!!! No one had studied this subject in such detail. You are awesome, my bud. I am very grateful ❤️❤️❤️
Nice video, good to see a tutorial on this that goes a bit more in-depth. I didn't realize how much you can modify the maps, the docs are pretty good.
I added the mouseover event to the map instead and also added a mouseout event.
That's Great. This is the best way to follow a tutorial. Cheers!
its not free. showing watermark message 'for development purpose only". how to remove this?
really well explained - thanks for the tutorial!
This is awesome... You have saved my time.. .Cant thank you enough
That was amazing thank you so much and looking to watch more
Thanks man, I learned a lot from your video. I'll be coming back for more for sure. Liked and subscribed.
Thanks
Yes, would love to see a part 2!
Thanks a lot... Keep going... greetings from Mexico.
Thanks man. really appreciate that👍
good tutorial, subscribed!
Thanks 👍
how would i add an option to search for something nearby? like example a search bar where i can enter "gas station" or "liquor store" and it would return nearby locations with that keyword?
Your channel will go massive very soon... keep up the good work
Thanks 😊
Thanks so much for this video!
Good video man! Keep it going!
i dont have visa or mastercard so what should i do?for cloud platform
great tutorials. Thank you
Hi, in google maps how to zoom based on markers if one is in California and if another is in newyork. So that both the markers are visible
do you know how to add a pin in map then when i press it thers a form at bottom showing its description?
Thank you for the tutorial, I was just curious if you could make another tutorial storing info of markers to the database as you talked about it in the video. It would really help!
Yes will do so
Thanks help me alot
thanks bro, Im grateful
Hey again, would you recommend Google Maps API over Mapbox API for app that uses places and tracks?
Hello, can you tell how i can paint around a marker with s specific radius? Thank you.
Very good thanks!
Hello, thank's for video. can you please tell us how can we execute this program with visuel code studio. because alwayse when i execute my program it shows me localost.
great videos, can you make tutorial about nearest marker by your marker google map api js ?
Great suggestion. will try and make that happen! :)
Do I have to enable billing for my account in order to do this? :(
thank for sharing!
Hi there, firstly, thanks for the tutorial - it's great! I'd like to add marker clustering and have tried adding in the code as supplied by google maps documentation, but no luck.. Could you please give me some tips on how to add this in? Thank you :)
Thanks! really appreciate it. developers.google.com/maps/documentation/javascript/marker-clustering#maps_marker_clustering-javascript just follow the instructions in this link and change the locations to that of the markers. Hope it help out mate.
@@samcodes2912 Thanks Sam. I'm just not sure where to place the new MarkerClusterer snippet...
I've tried placing it within both functions.
yeah it gets a little bit more complicated when you want to add MarkerClusters from your mouse event(meaning when you click on the map the marker gets added to its area's Markerclusterer). We will need to edit the code a little bit more so it doesn't get to messy and make sure there are no bugs. I am a little bit busy right now but very interested in getting it done. I will even create a tutorial about it and the moment I have time to get it done I will send you a link to file immediately.
@@samcodes2912 thanks, I'd really appreciate that!
Good tutorial but the audio mixdown of this video is horrible, it is like you are whispering with full volume.
Thanks for this video!
Is this API usage free?
Hi there Sam , hope your well , i have a business idea where users visit the site , add a marker anonymously on the map as well as view other ppls markers . Can that be made possible via this software for instance ? Many thanks , Xavi
Thanks for your nicely video.
Your welcome!
Thank you for the tutorial - very helpful! I do hope you restricted the key though, since you're actually showing it in the video haha
can i generate heatmap from database? im currently building a incident report system and i want to generate heatmap based from the number of incident reported in each area thanks
I should be possible. Have you researched about it?
Very good !!
Thanks 👍
thank youuuuuuuuuu
Your welcome 👍
Thanku sir for this tutorial , can u make a tutorial on geotracking 🙏🏻🙏🏻
Yeah sure will do so.
This video plays perfectly at 1.4x speed
agreed
Hi Sam, thanks for the tutorial. It’s a great help for a beginner like me. I had an issue with running the code on a local machine. I used your code in VS Code and launched it on Firefox. It wouldn’t display the map. But, it worked perfectly fine on a live server. I had no idea what the problem with this. Just wondering if you could help me with this? Thanks in advance.
Thanks . happy it's helping you out. Not really sure what you mean by local machine and when it worked was it on chrome or Firefox?
@@samcodes2912 Hi Sam, thanks for getting back to me. It didn’t work when I opened the html file in Chrome or Firefox browser from VS code. But it worked when I opened with live server from VS code.
It doesn't work because google map has to run through http and ip address and that's not the case when you open it directly through chrome or Firefox. You can see the difference in the url when you open it with live server and when you open it through chrome
@@samcodes2912 Thank you so much Sam 👍
Hi
Is there any method in google maps where I can get the list of markers which I see in the specific view port and show it in list view
you would have to create the method. If I get you right you want a list of all the markers you created? Will the list contain the lat and lng of the markers or the name of their location?
@@samcodes2912 both
The thing is I am quite busy but will try and make it happen just can't say when. but what you need to do is create an empty div . create a storage for the the location and then place the stored location into the empty div.
Great tutorial Sam! I´m making a map with custom markers and info windows. I´m having some trouble adding an image to the info window though. Do you have any tips on how I could do that?
Sure thing. Try adding it in the MarkerArray like this {location:{lat: , lng: -},
content:`Title123 Address City,Country`}. Hope this helps out.
@@samcodes2912 You're a genius, thank, it works :) I've added an image and a link, but now there's always a scrollbar appearing in the info window. Can you think of an easy way to fix that? ps: Thank you so much for taking the time to help, really appreciated!
This means your icon is too big. you will have to set the width and height of your content give it class name then in your css you will need to set overflow to hidden so it doesn't show the scroll.
@@samcodes2912 did you teach it before?
so in html every one will know your api key .anyone can use this key ?
Thanks bro
Welcome
I still need to activate my billing account, and what are the rates?
It is for free
@@samcodes2912 So, I just need to activate my billing account as a condition? even though the service is still free
Yes exactly.
I don't have a carte how can I continues this project please ??
What do you mean by carte?
@@samcodes2912 I mean card (I write carte with French I'm sorry)
how can I try for free please
@@msadekmarwa5934one year later 🎉 how did you fix that, j'ai le même problème actuellement
Hi, thank you. Can I legally store data from it?
Yes you can
@@samcodes2912 Can you give me some proof? xD I want to be sure
is this api free?
Yes the API key is free.
Is Google Maps API Free?
it is free for small scale usage. What are you using it for?
@@samcodes2912 Please , I'm working on shortest path on google maps project , is key API free for this?
@@hafsa5611 yes it is free for projects like shortest path.
M8, sorry but you have to be more prepared! To much taime waisted wandering what next should be said, prepare some script or something... and... speak quicker, this video should last max 10 minutes or even less.
domage you ask me my carte number
Yes it's normal to open a billing account you need to add your card details. It is completely free. It is 0.00 $
Audio is HORRIBLE!
hey sam please make a video on how to create like this. see this url (console.cloud.google.com/google/maps-apis/solution-builder/locator_plus?project=high-bee-318305&supportedpurview=project) and on how to connect it from dropdown button. example when u click the text from dropdown the result will shown from the list on the left side. sorry im not quite well speak in english
Great suggestion man