How to Build a Javascript Google Map Directions API & Places API Project🔥 - [2022]
Вставка
- Опубліковано 18 бер 2021
- Track any phone location by its number :
-------------------------------------------------------------------------------
Get my FREE eBook on Getting started with Google Maps Platform:
www.codewithsamcodes.com/goog...
-------------------------------------------------------------------------------
💻 Exclusive Content 💻
👥 Patreon: / samcode
------------------------------------------------------------------------------
Google Map Directions API & Places API Project Javascript is the latest and updated video in using google maps api. In this video we will work a little bit with the Direction API & Places API by popular demand. We will implement a map with two inputs which will be the origin and destination after that we will also use font awesome icons for our button. We also add an output section below the map where we can displace the origin input , the destination input, the distance of the two places and also the duration it will take to get to these places by driving. We also used bootstrap to help us with the styling . #placesAPI #GoogleMaps #directionsAPI #Javascript
---------------------------------------------------
Get my FREE eBook on Getting started with Google Maps Platform:
www.samueltraining.com/google...
-------------------------------------------------------------------------------
Hey guys let's make my goal of 10k subs possible.
/ @samcodes2912
---------------------------------------------------
Support the channel ❤️: / samcode
---------------------------------------------------
Subscribe for more! 🔔
ua-cam.com/channels/EzL.html...
▶ My Discord Server: / discord
GitHub: github.com/sammy007-debug
boostrap.mini.css: drive.google.com/drive/folder...
Codepen For google script tag: codepen.io/sammy007-debug/pen...
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/sammy007-debug
🌐 Discord: / discord
---------------------------------------------------
![JavaScript Google Maps API Tutorial Updated [2023] - Create Google Map 🗺️](http://i.ytimg.com/vi/uPhWSyRqQDA/mqdefault.jpg)
![JavaScript Google Maps API Tutorial Updated [2023] - Create Google Map 🗺️](/img/tr.png)
Let me know what API projects you guys and girls want next!
Please like and subscribe to the channel it really help others find this video. Thanks
directions with updated current location please!
Thank you so much. Would you please make a tutorial on "Directions with auto updated current location" Plz
@@anantaahmedrana8231 plesaeeee!
please make a video on ETA calculation. Can you please tell that any Google api provide ETA for our own travelling app ? If not tell me the approach for make this.
Great tutorial, Thank you!
Nice video, i was looking for this and finally found it, i adapted it for a project in typescript and works perfectly, thanks a lot.
Hi, Do you have your project on github? I am having difficulty adapting it. May I see yours for reference please?
Great video man.Take love
Thanks. Glad you liked it!
Update: Make sure your button looks like this The button wont work if you don't add onclick="calcRoute();" to it.
Timestamp:
Get API Keys and also enable API Libraries - 2:16
HTML - 7:01
Place API Key - 17:53
CSS - 18:24
Create The Map - 21:52
Calculate Route - 31:38
Autocomplete - 55:40
hello sam codes, please can you do this for ReactJS?? would really appreciate it
This video is even more awesome man. I can't thank you enough for saving my life. You are amazing coder.❤️😍❤️😀😘
Thanks, bro, you really saved me here!!🔥🔥🔥
Best coding channel i've ever seen, please don't leave this.
Thanks man
nice video i will test this once i start my project
thanks bro this helped me a lot in my progress rarely comment on videos but credit given where credit is due XD
Great video man. Thanks. Question, can I take specific directions? like a specific street with its number instead of a city ?
Very cool, congratulations on the job. I have a doubt how it would be adding other stops? From point A to point B and an option to add point C?
nice video, i can continue make my project to research topic, thanks very much sir, i hop god bless u
Hi Sam, nice video! Btw, I am new to this and how do we map route and time it would take to travel from location A to B (i.e. at weekdays for at 7 am), and from place B to A at 10pm ?
Thanks Sam. Great tut. How do you suggest to integrate this in Woocommerce?
Fantastic stuff man!
I need this inside Wordpress. May be with Advanced custom fields for Woocommerce. Any advice there?
Awesome video and valuable information Sir. I have 1 question. In case I want to use the current location as the origin. How can I achieve this?
amazing good job
Thank you for your great tutorial, It's awesome and makes me spent my 1 hour on these.
That's great man. Your welcome
Thank you so much dear....
Thanks a lot ☺️☺️
awesome tutorial but i have some questions does the marker move if i move with the google map
thanks u very much sir, this video very helpful me.
That's great man. Your welcome 👍
This was wonderful. Do you have anything where you can walk me through 'input' being a predetermined dropdown of a few destinations instead of a second autocomplete text bar?
You could just use a select instead of the text input, and have a large dataset of predetermined locations so searching would be easier.
Great video !! I want to add these functionality in my project project so will it be free or we have to pay for it ?? Will tou please clarify ?
hey sam , I got stuck at the route calculations part and unable to calculate the routes distance along with autocomplete part
,help me ASAP as I'm embedding this in my final college project
Nice video. I want to create my own custom route an be able to navigate along that route. How would I do that?
Hi Sam, you are the best to describe and learn. It is a easy to follow and to accomplish. Thank you for that.
I get 1 issue. I cant get it to search for adresses. Only for cities. I have tried to change the "types" to other but then it is not autocomplete anything. Do you have any sugestions?
Remove () part just add address like this types: ['address']
Hello @Sam Codes
please have a question,
about the direction,
Can I create this trend the way
I mean, I want to draw the trend in a short way
Followed your code from start to the end but can't figure out how you handled the button click. Like how did you handle the calculate on click of that blue button? YOu haven't included that anywhere on the video by the way
can i use this to estimate the carbon emissions flying from point A to B?
thanks bro
Hi ,can we make the searching and directions functionality as we see in Google map
hi sir whether u created bootstrap,style.css,index.html,app.js inside the Content? how did u created like that sir?
Hi Sam, thanks for the great video of using DirectionAPI. I am working on a project using Google APIs. I have added the customised markers on the map. But I have no idea how to display the applicable markers between the two locations from each request? Any suggestions? Thanks in advance
Hi.. You might need to use some json and loop through the marker information to get the lat and lng from the marker position. then it's about saving the information in a variable and the placing it where the two locations are need for the request.
@@samcodes2912 Thanks Sam 👍
Hi! What about specific address like streets?
Great tutorial but let me ask, is there any way you can zoom in more into the maps
Yes it's at the map options
awesome
Thanks for your hard work but my problem is that how to track multi users in a database
Thank you for this super video! Can we change the aletr to show in kilometers?
I changed the IMPERIAL to METRIC and its done. Thanks again.
Can I use the Directions API for mobile programming?
hello sam good jobs bro but i have a same question how to change type city to address
Hi Sam! I don't know how to implement bootstrap in html page. Could you help me, please. Thanks in advance!
hi how can i replace mile length unit with kilometer?
Sir i make a project vehicle tracking with speed checking fuel maintain provide specific area ... with google map ... So can can you plz tell me how can i create this type of project.... I am waiting your opinion
my route calculations along with autocomplete is not working please help
Great tutorial! Is there a way to make the map generate specific multiple places, for example petrol stations, within a certain radius based on user location? If so kindly help....my project is due next month and I don't know how to go about it.
have u found it?
Hello, everything works perfectly for me thanks, only that when I try to change the data of the js page, it always remains the same, for example if instead of seeing spain at the beginning I want to see italy, I change the latitude and longitude but it always remains in spain, what can i do? Thank you
I just changed mine to italy and it worked. I used the latitude and longitude of rome like this
var myLatLng = { lat: 41.9028, lng: 12.4964 }; Try it out it should work with your code.
Hi I am experiencing the same problem. Although the map changed to the Latitude and longitude to Massachusetts when I try to search cities in USA autocomplete doesn’t recognize it. It’s still stuck in Spain.
On the other hand you had no problem searching for American cities.
hey should ı do billing to use it man. I couldnt get the map visible
Hi, I like to multiply miles by 2 to give price. how could i do that?
where do I find the files used in this tutorial? app.js and style.css
Where have you called calcRoute method?????. I can only see definition not calling.... Am I missing something??
Is there a source code available for this project
Hello man, thanks for video firstly and i have a question.. What is the plugin, at the end of each block that shows which block it is? Like "/.container-fluid, /#googleMap"..
found it! it's HTML End Tag Labels in the extension store
I did the project just like you I added CSS but my map is not visible
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
You can do that by changing the zoom variable
How to change miles to kms
hello sam codes, please can you do this for ReactJS?? would really appreciate it, as I'm working on a project that requires directionsAPI
Greet suggestion
@@samcodes2912 yes 😊. I’m anticipating it 🙏🏾. I love your tutorial videos 💯
Could not retrieve driving distance.
Good job ,how can i open a billing account
Error: DIRECTIONS_ROUTE: NOT_FOUND: There was an issue performing a Directions request.
at _.AA.yA [as constructor]
Nice video Sam. But please can I get the source code?
how do we resolve Uncaught TypeError: Cannot read properties of undefined (reading 'Autocomplete')? I have pretty much the same code as what's presented in this video.
same now
I cant find button event in the whole video
the autocomplete is showing me this page cant load correctly , Do you own this website , can you plzz tell me how to solve this?
Does anybody know how can I do this in WordPress?
Hi Sam, api doesnt work for ios. Is there any solution? Kind Regards. (A friend of mine need to contact you from U.S.He want to have an mobile app for hes work)
hello great tuto!! Everything is ok but I have this error can help me please? thanks
TypeError: Cannot read properties of undefined (reading 'Autocomplete')
same
Where is host url??
Same function on google maps?
If you search current location into destination they move as you can?
That's would be another project
@@samcodes2912 Waiting for your update
can you add the current location of the user and update the location every second
The current location of which user?
@@samcodes2912 the one who's using the website. Just like the function of google map if you search a place you can see the direction and also you can see your current location moving as you move
Tq
👍you welcome
What is the extension for VS Code that creates autocomplete comments on the closed HTML class? Please
Wow cannot remember. Will get back to you
it's HTML End Tag Labels
How to Change Both start or end point destination Marker into our custom marker
Custom clicking marker?
@@samcodes2912 No sir i want to change (A) or (b) destination marker into custom marker like:- car icon on destination point
59:11 A or B
Hi, Tutorial is great. Thanks a lot but i need support for this application.
Application will be same for wordpress site. How can i contact with you. Thanks.
On discord
sam i have problem when i want to write an origine country and the destination nothink happen and there is no country to choise it please help me please btw i download the last update
Hi Hassine! nice question. The reason for that is because I set the autocomplete for cities and not for countries.
i tried working with the code but got stuck after i noticed you didn't code the onclick function for the button, i tried it myself but it's not working, can i get some assistance
yeah I just noticed that too. This is the complete code in my GitHub. check if your code is the same. github.com/sammy007-debug/Google-map-distance-api
Thanks for this! I was following along and got the button from your github you posted in a comment below. I am running into a problem where the page just seems to reload and it doesn't output the innerhtml that was written. Know what could be causing this?
No I am not sure what that could be. Could you explain better?
Hi, it's safe to put google maps API in HTML code with set credentials?
not sure what you mean by with set credentials. You go to create credentials and create a api key for your html script . Can you explain further?
@@samcodes2912 I have JavaScript maps and directions api key and I set request limit for 200 request per day. It’s enough to safely put my api key in the public html file?
At 27.01 when I load my page.... Its displaying This page can't load google Maps correctly. Do you Own this website? When I click OK.. then on map there is showing for development purposes only..plz help me how to resolve
same
Is billing required for doing this project?
No billing is not required. Your map will work perfectly the only difference is that you will have a watermark over your map that says "this is for development purpose". If you add a billing account then the watermark will be removed.
Amigo, preciso multiplicar os dados de drive distance por uma variável contendo um numero. Como proceder? Obrigado
Exemple.: (driver distance * 2.2) + 9
mostrar essa conta abaixo do tempo.
Amigo hablas Ingles?
Hi, I am following along with your video but my map will not load, the error message I am getting is = Uncaught ReferenceError: google is not defined. Any ideas? is it something to do with not having an init function? any help would be much appreciated
Why don't you have an init function? If you follow the tutorial step by step your map should show up. Did you watch the whole video?
@@samcodes2912 Hey thanks for responding to my message. I did manage to get the map working. in the end I am still a bit unsure where the init function is in your code. I am still unsure on how the init function works. I am currently looking for more info on it
hey can you tell me how you finally got the map???
InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an Object
Have you completed the code and your still getting this error?
How can I fix this?
This page can't load Google Maps correctly.
Do you have a good API key
is that free or you are paying for google maps api
Sir, please help me 🙁
button not working and direction line not show
you need to add onclick on the button like this onclick="calcRoute();". This is the complete code github.com/sammy007-debug/Google-map-distance-api
Bycycling is not working in Travel mode please help!
Make sure you are spelling it correctly. It should work if it is spelt correctly
@@samcodes2912 I tried BYCYCLING , BYCYCLE but dont work, WALKING , DRIVING also the other one is working
The spelling is wrong it should be 'BICYCLING'. Try this out it should work.
@@samcodes2912 Yes sir I tried BICYCLING and it cannot detect the distance and duration. unlike DRIVING, WALKING and TRANSIT
@@DardotesGaming have you compared your code with my code on github?
I want to buy a gg cloud account.
Hi, is that map link will work for me? or where should I copy that?
You copy the google map script tag but you need to add your API key into the script tag where it says place your API KEY HERE. Hope this helps you out bro.
@@samcodes2912 yeah bro I will replace it. but where can I actually get that link directly?
@@alnadzmermabboljamil2430 You can get the link here. developers.google.com/maps/documentation/javascript/libraries.
@@samcodes2912 ah yes thank you so much bro, I wanna see your tutorial about converting lat long to real location.
@@alnadzmermabboljamil2430 Sure thing bro. Will make it happen.
What's your vscode extension that commenting close tag? I need it because sometimes it's so annoying for me to scrolling up and down 😂😂
Hope you reply this, thank you before
Sorry man. I don't use visual studio code anymore and I can't remember the extension
@@samcodes2912 well, okay
voice?
Now google map api is free.?
it didnt display the map, why is that
same here bro:(
the api is free?
Is it free to use google map api?
Yes it is free
@@samcodes2912 but only for trial?
whats the point of this , you can do it directly on google maps with out any line of code :D
How can I Try Google Cloud Platform For Free ??
you can use it for free. everything works the only difference between a paid account and a free account is that the paid account does not have the "for developer watermark on the map" everything else works the same.
Too many Ads.