Create A Google Map In A Website | Google API Map | Learn HTML and CSS | HTML Tutorial

  Рет қаралды 435,896

Dani Krossing

Dani Krossing

Күн бұрын

Пікірлер: 310
@Dani_Krossing
@Dani_Krossing Жыл бұрын
NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing
@mitchellrose6865
@mitchellrose6865 3 жыл бұрын
Hey Dani! Just finished your entire HTML and CSS course and just wanted to say thanks so much my guy! You're a fantastic teacher and I really appreciate your going slow and explaining every step. Us noobies appreciate it more than you know. Cheers brother!
@mulualemabate3193
@mulualemabate3193 2 жыл бұрын
For those who find a google api map in your website, i bet you won't get a better tutorial than this. Easy, Slow and very descriptive. Thanks man!
@silverlion
@silverlion 3 жыл бұрын
Just finished all your HTML and CSS tutorials!!! I watched all the commercials and will sign up for your patreon as soon as I can afford to! THANK YOU SOO MUCH!
@kaar951
@kaar951 5 жыл бұрын
I just finish the whole course. I love you so much! Thanks for such incredible content, you deserve only good things for making this for free. Your way to explain everything it's amazing. Thanks to you I'm a little closer to become a web dev and I wanna buy a beer for you. Regards from Costa Rica.
@knows1com
@knows1com 3 жыл бұрын
embed Google map without API key 1- Go to Google Maps and search for the location you want to embed. 2- Next click Share > Embed a map > copy HTML
@matttepp3038
@matttepp3038 8 жыл бұрын
Well, this was unexpected. Thought you were done with HTML and CSS when you started your PHP series, glad to see there is always something new to learn.
@seeker2214
@seeker2214 3 жыл бұрын
Thank you Dani just completed all the episodes, i really appreciate your work. without your videos i could not learn so fast, within 2 weeks time.
@STEFKOUNGR
@STEFKOUNGR 4 жыл бұрын
Just finished all the videos of this tutorial !!! Awesome work !!! Thank you mmtuts !!!!
@mavoolumma
@mavoolumma 3 жыл бұрын
I just finished your course Dani,You are the best ! From Nigeria.
@sajadhazrati2000
@sajadhazrati2000 Жыл бұрын
i just finish this awesome course and wanted to say thanks a lot for this great videos. im so appreciate this
@calibr0636
@calibr0636 5 жыл бұрын
YASSSS next video is A JAVASCRIPT ONE!1111111!!!!!!11!
@anuschughtai1830
@anuschughtai1830 2 жыл бұрын
I just finish the whole course. Thanks for such incredible content, you deserve only good things for making this for free. Your way to explain everything it's amazing. Thanks to you I'm a little closer to become a web dev and I wanna buy a beer for you.Thank you so much!
@caminodigital7542
@caminodigital7542 6 жыл бұрын
Excellent tutorial - just wish other people's online tutorials were delivered as clearly, slowly, and with the same tone.
@RoseyLlama
@RoseyLlama 3 жыл бұрын
I agree. I could actually code along.
@gibran5208
@gibran5208 2 жыл бұрын
I just finished the course aside from this last one, everything was great! thank you very much!
@adrianlaub6128
@adrianlaub6128 4 жыл бұрын
You have a very clear and pleasant voice. Perfect for doing tutorials. :)
@jackionendino4293
@jackionendino4293 4 жыл бұрын
Thankyou bro love how informative you explained everything i need, deserves a subscribe and thumbs up❤️
@toukirahmedrabbi4112
@toukirahmedrabbi4112 7 жыл бұрын
watched a lots of videos of those type.. but only found solution in this one.. thanks a lot.. hopefully i will finish your all the tutorial..
@pujunyu3757
@pujunyu3757 4 жыл бұрын
Juz finished the whole course. It really helps a lot appreciate it Daniel👍👍👍
@musicnow8743
@musicnow8743 Жыл бұрын
heyy dani thanks a lot ur videos r so clear to understand😍
@sumitshekhawat5738
@sumitshekhawat5738 2 жыл бұрын
Thanks Dani, It was very help full, you save my day :)
@kwokashley2000
@kwokashley2000 2 жыл бұрын
Thank you very much with your simple steps and clear explanation!
@guyklaassen5824
@guyklaassen5824 9 ай бұрын
BTW: useful at learning material. Learned a lot.
@TDarkCoder
@TDarkCoder 7 жыл бұрын
Huge thanks from me! I did not think it is so easy to get API key since the time i watched this video! Like for video)
@yosefahmad4341
@yosefahmad4341 7 жыл бұрын
god bless you! you are more useful than my teacher T_T
@MaryAnpopis
@MaryAnpopis 7 жыл бұрын
this tutorial was so helpful, thank you soooooo much!
@MahbubSBJalil
@MahbubSBJalil 7 жыл бұрын
Thanks! It worked for me perfectly!
@retrofutur1st
@retrofutur1st 3 жыл бұрын
Exactly what I was looking for, got me on the right track, tysm!!
@karabomashaba9436
@karabomashaba9436 3 жыл бұрын
I cant find the key
@retrofutur1st
@retrofutur1st 3 жыл бұрын
@@karabomashaba9436 credentials tab in google console brah
@codercow1941
@codercow1941 3 жыл бұрын
Hey there Dani, I have just finished the course and I wanted to say that it's been really helpful for me starting out a a front end dev, and to show that I'm gonna be showing my progress of my learning by streaming in this youtube channel. Thankyou for what you put in for me and everyone else who is going to be a learning the lang of HTML and CSS. :)
@gabrielfono844
@gabrielfono844 4 жыл бұрын
I watched a video and I pretty much understand everthing. thanks
@gailius.m
@gailius.m 8 жыл бұрын
Your tutorials are awesome !
@buhnalaycolorado9587
@buhnalaycolorado9587 4 жыл бұрын
Thanks bro , I watch all the series! I will also be good to other when others will need a code.
@tinotendagarwe4929
@tinotendagarwe4929 2 жыл бұрын
just finished the course and i want more tutorials brother
@BLOOMwithANSA
@BLOOMwithANSA 6 жыл бұрын
very precise and clear. Thumbs up
@adarshvaranasi1684
@adarshvaranasi1684 4 жыл бұрын
Wow!!! I liked u r explanation skill
@nomadboy4828
@nomadboy4828 6 жыл бұрын
You are so clear and details.
@abrorbekjoniyev3304
@abrorbekjoniyev3304 5 жыл бұрын
Hey dude, works perfectly! Thanks! Keep going!
@vishwasrchonu7134
@vishwasrchonu7134 5 жыл бұрын
Do we have to pay and but it or is it free?
@komilj5580
@komilj5580 4 жыл бұрын
Quick and simple! This was a really good tutorial! Thanks man! :D
@suburbanblackboyradio2663
@suburbanblackboyradio2663 4 жыл бұрын
Wonderfully done. Thank you!
@-alfeim2919
@-alfeim2919 4 жыл бұрын
I loved your smile, that what get me getting in this video
@DemonIgnis
@DemonIgnis 6 жыл бұрын
You are the man!!
@yoengvisal9984
@yoengvisal9984 4 жыл бұрын
i love your videos.
@TheNikolajHE
@TheNikolajHE 5 жыл бұрын
Thank you again for a great video. Helped me out a lot in my current examsproject.
@doncui7404
@doncui7404 5 жыл бұрын
Excellent! Thank you.
@riadhossain4020
@riadhossain4020 5 жыл бұрын
Very helpful video it was..!!!♥️
@seanurgel8972
@seanurgel8972 7 жыл бұрын
Amazing video and a clean tutorial! Keep it up
@samuelnyangulu2691
@samuelnyangulu2691 6 жыл бұрын
Man that was awesome Thanks a lot
@alphanelmas1662
@alphanelmas1662 3 жыл бұрын
It's the first time i watched your video and your explanation is very clear keep it up btw what should we do if we want to point multiple places in map
@livelove4ever
@livelove4ever 2 жыл бұрын
Great tutorial
@rajnishkalwar1840
@rajnishkalwar1840 7 жыл бұрын
great video buddy....You have a new subscriber
@ianhayden2839
@ianhayden2839 Жыл бұрын
Solid video for basic code to obtain a map on your website, however this map displays the location of the latitude and longitude you hard code into the website, not your actual live location
@whitneymcghee7388
@whitneymcghee7388 7 жыл бұрын
Thanks for the tutorial! Helped me out alot
@pauliusjarasunas1757
@pauliusjarasunas1757 6 жыл бұрын
Thank you so much this video really helped me!
@TheMichaelSpray
@TheMichaelSpray 4 жыл бұрын
2020 here, Now you can't get API key from Google, but it worked couple years ago
@S.M.A.43
@S.M.A.43 4 жыл бұрын
Why not? I just got an API key from Google today on 10-12-2020
@MightyArts
@MightyArts 7 жыл бұрын
Wouldn't it be easier to just go to google maps, find the location you want, click on the share button, then click on embedded copy, and just copy that link to your HTML document? I tested it, and it works just fine. Is there some difference or ?
@SatriakbarBlogspot
@SatriakbarBlogspot 6 жыл бұрын
can't bro
@QuocAnAlexDjEntermeniter99639
@QuocAnAlexDjEntermeniter99639 8 ай бұрын
You are teacher so beatiful
@pochengwu4858
@pochengwu4858 6 жыл бұрын
Thanks for a nice tutorial! Useful and and easily understandable.
@maremeaxi3344
@maremeaxi3344 7 жыл бұрын
VERY NICE , THANKS DUDE :)
@MortenCopenhagen
@MortenCopenhagen 6 жыл бұрын
Very good teacher. Thanks.
@ramraiorb2967
@ramraiorb2967 6 жыл бұрын
really it worked how
@tareqahmed1653
@tareqahmed1653 7 жыл бұрын
Thanks! very helpful video tutorial.
@kbdaily603
@kbdaily603 7 жыл бұрын
Thank This is a best video
@joydas1685
@joydas1685 6 жыл бұрын
Thank you sir for the awesome video. You can explain very well.
@tahalamti5966
@tahalamti5966 6 жыл бұрын
Great, thank you.
@prajvals5283
@prajvals5283 4 жыл бұрын
Very helpful
@fayezal-alami6847
@fayezal-alami6847 7 жыл бұрын
Thank you so much, this was really halpful!
@yashsaxena8401
@yashsaxena8401 4 жыл бұрын
your api key is not generated properly
@stokbrot
@stokbrot 2 жыл бұрын
just look for the wanted location on maps then share and then there will be an option "Embed Map" that will give u a html code.... easy
@chingee5060
@chingee5060 7 жыл бұрын
thank you, your video it is helpful
@thezvid
@thezvid 4 жыл бұрын
google needs a billing account now to do this method but you can use embedded way. that is much easier and simple just copy the code and paste it.
@maruthuganesh2875
@maruthuganesh2875 6 жыл бұрын
super its very useful
@jamesbloom9545
@jamesbloom9545 3 жыл бұрын
I had a problem getting my Api key the Ui has changed know would you mind helping me?
@sayedhasancp
@sayedhasancp 7 жыл бұрын
awesome tutorial,,,, thanks.
@dimitristsolakidis1311
@dimitristsolakidis1311 4 жыл бұрын
Great video man! I want to ask if this method is legal. I mean, to i have to do something more to have google maps on my web site or i follow these steps and i'm fine?
@junaidbhatti4474
@junaidbhatti4474 6 жыл бұрын
Once the map load and then its shows "opps something went wrong or javascript error" any suggestion what I do ?
@busbusvlog
@busbusvlog 5 жыл бұрын
Same here! could you find the solution to that?
@karachidavid4722
@karachidavid4722 4 жыл бұрын
@@busbusvlog got to goggle cloud and activate your javascript map api
@stryychnine
@stryychnine 10 ай бұрын
thank you :')
@sabuein
@sabuein 2 жыл бұрын
Thank you.
@ollivergodvil
@ollivergodvil 3 жыл бұрын
Support the Dansih people!
@cjmonte9303
@cjmonte9303 6 жыл бұрын
thanks sir :D
@mouadjo7530
@mouadjo7530 4 жыл бұрын
Hi, why not just use the to embed the map on the site ?
@Oluwanifemiii
@Oluwanifemiii 2 жыл бұрын
what websites do i get my API key
@elijohn365
@elijohn365 8 ай бұрын
How would you add a map that you create like a marked walking route with markers along the route?
@pagolLM10
@pagolLM10 7 жыл бұрын
not working... nothing showing... :( what should i do?
@victormagaud2967
@victormagaud2967 6 жыл бұрын
I have the same problem , do you manage to solve it ?
@Miden1437
@Miden1437 5 жыл бұрын
@@victormagaud2967 Google no longer offers the API for free....The API will probably be free for your project and google will give you a free $200 credit each month currently. MyMaps will work but you won't have an API, It will embed with .
@ananyasrivastava5128
@ananyasrivastava5128 4 жыл бұрын
can we then use other map api instead of google map api ?
@hardcode6372
@hardcode6372 4 жыл бұрын
@@ananyasrivastava5128 nope
@yash6680
@yash6680 6 жыл бұрын
awesome !
@radutiyghita5513
@radutiyghita5513 7 жыл бұрын
Thank you!
@ramraiorb2967
@ramraiorb2967 6 жыл бұрын
really it worked how
@Blacknut65
@Blacknut65 Жыл бұрын
Hi Dani You are an amazing teacher! I have tested your Google map code exactly as you show it, using a good (tested) Google api key. I’m getting a blank screen. Any thoughts?? Did Google change something? ~Steve
@rajkumart08
@rajkumart08 3 жыл бұрын
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
@SatriakbarBlogspot
@SatriakbarBlogspot 6 жыл бұрын
i tried but the only show up is white blank page, anyone same ?
@IAmSolomon
@IAmSolomon 6 жыл бұрын
Same
@AnkheNaten4
@AnkheNaten4 6 жыл бұрын
you have to authorize the referring website/page in order for it to display. If the web page is not displaying your map, it likely is not authorized to do so in your google API settings. Copy/paste the website into the authorized list and wait 5-10 mins.
@Pnx1206
@Pnx1206 6 жыл бұрын
where is authorized list?
@AnkheNaten4
@AnkheNaten4 6 жыл бұрын
@@Pnx1206 under the credentials tab go to OAuth consent screen within APIs and services. You need to host your map app on an authorized domain because it is collecting data and needs authorization to do so.
@MarcialHeredia
@MarcialHeredia 6 жыл бұрын
As always! you save my ass... but one thing, I think the google key is not free anymore...! :(
@nellytadi5309
@nellytadi5309 6 жыл бұрын
Yea i just noticed that too. But i think you are only charged if you exceed a certain limit
@MarcialHeredia
@MarcialHeredia 6 жыл бұрын
Oh thanks Nelly! I will be paying more attention... ;)
@himaliamit8698
@himaliamit8698 6 жыл бұрын
still some student donot have access to credit card. how can i go around that?
@nike5246
@nike5246 5 жыл бұрын
Did anyone knows the fee Google is charging now to add the map onto the site?
@kyleguerrero6106
@kyleguerrero6106 5 жыл бұрын
@@nike5246 The basic google map with a location pinned on it is FREE, they want a card on file so that if you use a premium feature they will charge for it. I know this bc i used a embedded map today on my project. You can review what the free restrictions are in googles docs.
@bluestormdiycrafts5259
@bluestormdiycrafts5259 6 жыл бұрын
Initially, it didn't work for me either but as soon as I rewrote height property above the width property in CSS file, it worked for me.I wonder why that happened since it should not make any differnece.
@rsj1002rs
@rsj1002rs 6 жыл бұрын
wow - same thing for me.. that's extremely odd to say the least.. It shouldn't make a difference. However, going back towards the start of his coding, he did style it in the html.. I wonder if that is why... Either way, your reply helped me out once I changed the format to the style sheet.. Thanks!
@sebastiantedesco8987
@sebastiantedesco8987 5 жыл бұрын
Thanks!!
@techcanyon411
@techcanyon411 6 жыл бұрын
i think using this html5 markup is very simple and not time comsuming,has the tags deprecated from html5?
@gandalfsnowgrey7037
@gandalfsnowgrey7037 2 жыл бұрын
Is this still working today? Found some issue with the lat/long website and I think the Google dev website is working differently now.
@Dani_Krossing
@Dani_Krossing 2 жыл бұрын
It still works yes.
@karachidavid4722
@karachidavid4722 4 жыл бұрын
is this same for google geolocation or is it different
@andrejzubcov5815
@andrejzubcov5815 7 жыл бұрын
Thanks !
@fanny8463
@fanny8463 3 жыл бұрын
Hi Dani thanks to lesson on making html. i have a question is it possible to make a e-commerce wbesie using html?
@yacimemos7612
@yacimemos7612 5 жыл бұрын
thank's man
@Enevry
@Enevry 6 жыл бұрын
Hello, Do You know how to put multiple markers on a map of a website in an automated form? The locations are supposed to be in a list. Thank You
@billiardrichard6351
@billiardrichard6351 4 жыл бұрын
describe different var such as location with different coordinates and wfite a marker code for them as in location was written
@eysi8
@eysi8 5 жыл бұрын
Does it only works on GoogleChrome?
@kristijan7140
@kristijan7140 8 жыл бұрын
Can you make tutorial how to make multiple marker in google maps, or can somebody help me about that?? by the way nice video
@anony6161
@anony6161 6 жыл бұрын
can you make a tutorial video ,when you mark a location in the map the coordinates will be shown in the mysql database?
@mianazaz7939
@mianazaz7939 5 жыл бұрын
facing this problem... Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.
@AhmedAli-ky6jt
@AhmedAli-ky6jt 5 жыл бұрын
i have the same problem and i don't know how to fix this problem ? did you fix it?
@dumisanitibane1095
@dumisanitibane1095 5 жыл бұрын
@@AhmedAli-ky6jt did u manage to fix that problem? I'm facing the same problem also
@AhmedAli-ky6jt
@AhmedAli-ky6jt 5 жыл бұрын
Replace your googleApi maps plugin with this... "maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
@AhmedAli-ky6jt
@AhmedAli-ky6jt 5 жыл бұрын
Simple Map html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } Hope it works for you.
@franciscomartiarena
@franciscomartiarena 5 жыл бұрын
@@AhmedAli-ky6jt thanks!
Learn Google Maps JavaScript API (Beginners Tutorial) | JavaScript Project #7
15:12
The Ultimate Dev Academy (Formerly AnotherWebGuy)
Рет қаралды 90 М.
The Best Band 😅 #toshleh #viralshort
00:11
Toshleh
Рет қаралды 22 МЛН
Гениальное изобретение из обычного стаканчика!
00:31
Лютая физика | Олимпиадная физика
Рет қаралды 4,8 МЛН
Next.js 15 Tutorial - 9 - Catch all Segments
6:15
Codevolution
Рет қаралды 1 М.
Use the Google Maps API to build a custom map with markers
24:00
Coder Coder
Рет қаралды 295 М.
ASMR Programming - Animated Login Page - No Talking
18:18
AsmrProg
Рет қаралды 1,8 МЛН
How To Use Mapbox To Create A Google Maps Clone Quickly
12:23
Web Dev Simplified
Рет қаралды 133 М.
HTML Tutorial for Beginners: HTML Crash Course
1:09:34
Programming with Mosh
Рет қаралды 9 МЛН
The Best Band 😅 #toshleh #viralshort
00:11
Toshleh
Рет қаралды 22 МЛН