No video :(

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

Подписаться 480 тыс.

Просмотров 434 тыс.

50% 1

Create A Google Map In A Website | Google API Map | Learn HTML and CSS | HTML Tutorial. In this HTML tutorial you will learn how to insert an interactive map inside a website.
Google Maps API guide: developers.goo...
Find your latitude and logitude: www.latlong.net/
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 311

@Dani_Krossing Год назад

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v8jDnBYc0bs.html&ab_channel=DaniKrossing

@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!

@jstonetech2501 3 года назад

Hi bro, I'm working as a UI developer in a software company. I joined 8 months ago. Our Team lead gave google map task. I searched in so many videos, but finally i got the correct code from your video. It worked correctly. Thank u so much for your great video. I liked and subscribed.👍

@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 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!

@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

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

@matttepp3038 7 лет назад

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

@mavoolumma 2 года назад

I just finished your course Dani,You are the best ! From Nigeria.

@caminodigital7542 5 лет назад

Excellent tutorial - just wish other people's online tutorials were delivered as clearly, slowly, and with the same tone.

@RoseyLlama 2 года назад

I agree. I could actually code along.

@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!

@STEFKOUNGR 4 года назад

Just finished all the videos of this tutorial !!! Awesome work !!! Thank you mmtuts !!!!

@sajadhazrati2000 Год назад

i just finish this awesome course and wanted to say thanks a lot for this great videos. im so appreciate this

@jackionendino4293 3 года назад

Thankyou bro love how informative you explained everything i need, deserves a subscribe and thumbs up❤️

@gibran5208 2 года назад

I just finished the course aside from this last one, everything was great! thank you very much!

@toukirahmedrabbi4112 6 лет назад

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 4 года назад

Juz finished the whole course. It really helps a lot appreciate it Daniel👍👍👍

@calibr0636 5 лет назад

YASSSS next video is A JAVASCRIPT ONE!1111111!!!!!!11!

@adrianlaub6128 4 года назад

You have a very clear and pleasant voice. Perfect for doing tutorials. :)

@codercow1941 2 года назад

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. :)

@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

@musicnow8743 Год назад

heyy dani thanks a lot ur videos r so clear to understand😍

@kwokashley2000 2 года назад

Thank you very much with your simple steps and clear explanation!

@gabrielfono844 4 года назад

I watched a video and I pretty much understand everthing. thanks

@TDarkCoder 6 лет назад

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 6 лет назад

god bless you! you are more useful than my teacher T_T

@sumitshekhawat5738 2 года назад

Thanks Dani, It was very help full, you save my day :)

@buhnalaycolorado9587 4 года назад

Thanks bro , I watch all the series! I will also be good to other when others will need a code.

@tinotendagarwe4929 2 года назад

just finished the course and i want more tutorials brother

@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?

@guyklaassen5824 5 месяцев назад

BTW: useful at learning material. Learned a lot.

@TheMichaelSpray 3 года назад

2020 here, Now you can't get API key from Google, but it worked couple years ago

@S.M.A.43 3 года назад

Why not? I just got an API key from Google today on 10-12-2020

@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

@MaryAnpopis 7 лет назад

this tutorial was so helpful, thank you soooooo much!

@TheNikolajHE 5 лет назад

Thank you again for a great video. Helped me out a lot in my current examsproject.

@-alfeim2919 4 года назад

I loved your smile, that what get me getting in this video

@retrofutur1st 3 года назад

Exactly what I was looking for, got me on the right track, tysm!!

@karabomashaba9436 3 года назад

I cant find the key

@retrofutur1st 3 года назад

@@karabomashaba9436 credentials tab in google console brah

@MahbubSBJalil 7 лет назад

Thanks! It worked for me perfectly!

@MightyArts 6 лет назад

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 6 лет назад

can't bro

@komilj5580 4 года назад

Quick and simple! This was a really good tutorial! Thanks man! :D

@jamesbloom9545 3 года назад

I had a problem getting my Api key the Ui has changed know would you mind helping me?

@gailius.m 7 лет назад

Your tutorials are awesome !

@BLOOMwithANSA 6 лет назад

very precise and clear. Thumbs up

@nomadboy4828 6 лет назад

You are so clear and details.

@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

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

@abrorbekjoniyev3304 5 лет назад

Hey dude, works perfectly! Thanks! Keep going!

@vishwasrchonu7134 4 года назад

Do we have to pay and but it or is it free?

@adarshvaranasi1684 4 года назад

Wow!!! I liked u r explanation skill

@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

@QuocAnAlexDjEntermeniter99639 4 месяца назад

You are teacher so beatiful

@pochengwu4858 5 лет назад

Thanks for a nice tutorial! Useful and and easily understandable.

@seanurgel8972 7 лет назад

Amazing video and a clean tutorial! Keep it up

@junaidbhatti4474 6 лет назад

Once the map load and then its shows "opps something went wrong or javascript error" any suggestion what I do ?

@busbusvlog 5 лет назад

Same here! could you find the solution to that?

@karachidavid4722 4 года назад

@@busbusvlog got to goggle cloud and activate your javascript map api

@suburbanblackboyradio2663 4 года назад

Wonderfully done. Thank you!

@mouadjo7530 4 года назад

Hi, why not just use the to embed the map on the site ?

@whitneymcghee7388 6 лет назад

Thanks for the tutorial! Helped me out alot

@yoengvisal9984 3 года назад

i love your videos.

@joydas1685 6 лет назад

Thank you sir for the awesome video. You can explain very well.

@rajnishkalwar1840 6 лет назад

great video buddy....You have a new subscriber

@techcanyon411 6 лет назад

i think using this html5 markup is very simple and not time comsuming,has the tags deprecated from html5?

@livelove4ever 2 года назад

Great tutorial

@riadhossain4020 4 года назад

Very helpful video it was..!!!♥️

@elijohn365 4 месяца назад

How would you add a map that you create like a marked walking route with markers along the route?

@kristijan7140 7 лет назад

Can you make tutorial how to make multiple marker in google maps, or can somebody help me about that?? by the way nice video

@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 5 лет назад

i have the same problem and i don't know how to fix this problem ? did you fix it?

@dumisanitibane1095 5 лет назад

@@AhmedAli-ky6jt did u manage to fix that problem? I'm facing the same problem also

@AhmedAli-ky6jt 5 лет назад

Replace your googleApi maps plugin with this... "maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"

@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 4 года назад

@@AhmedAli-ky6jt thanks!

@pauliusjarasunas1757 6 лет назад

Thank you so much this video really helped me!

@doncui7404 5 лет назад

Excellent! Thank you.

@pagolLM10 7 лет назад

not working... nothing showing... :( what should i do?

@victormagaud2967 5 лет назад

I have the same problem , do you manage to solve it ?

@marcussunde4737 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 4 года назад

can we then use other map api instead of google map api ?

@hardcode6372 4 года назад

@@ananyasrivastava5128 nope

@anony6161 5 лет назад

can you make a tutorial video ,when you mark a location in the map the coordinates will be shown in the mysql database?

@MortenCopenhagen 6 лет назад

Very good teacher. Thanks.

@ramraiorb2967 5 лет назад

really it worked how

@fanny8463 2 года назад

Hi Dani thanks to lesson on making html. i have a question is it possible to make a e-commerce wbesie using html?

@tareqahmed1653 7 лет назад

Thanks! very helpful video tutorial.

@samuelnyangulu2691 6 лет назад

Man that was awesome Thanks a lot

@kbdaily603 7 лет назад

Thank This is a best video

@prajvals5283 4 года назад

Very helpful

@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

@DemonIgnis 6 лет назад

You are the man!!

@MarcialHeredia 6 лет назад

As always! you save my ass... but one thing, I think the google key is not free anymore...! :(

@nellytadi5309 6 лет назад

Yea i just noticed that too. But i think you are only charged if you exceed a certain limit

@MarcialHeredia 6 лет назад

Oh thanks Nelly! I will be paying more attention... ;)

@himaliamit8698 6 лет назад

still some student donot have access to credit card. how can i go around that?

@nike5246 5 лет назад

Did anyone knows the fee Google is charging now to add the map onto the site?

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

@mohamedsafeeq.s9568 5 лет назад

Bro i completed up to account setup and i got my api, why should we need to write html program, and why gmp pay for us, tell me the advantages of google map platform and its disadvantages, whether it will be helpful for college students

@fayezal-alami6847 7 лет назад

Thank you so much, this was really halpful!

@yashsaxena8401 4 года назад

your api key is not generated properly

@sumeetbatra2955 2 года назад

Heyy!! Thanks for the video. I am trying to do some varition but its not working. How do I take user input for Lat and Lon and display that location on the map. Please help if you can

@offload3286 5 лет назад

it worked!! thank you, the only problem is that whenever i open my website on a mobile phone the data gets out of proportion and the map seems slim and long. do you know how to fix that?

@kyleguerrero6106 5 лет назад

PSA: 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

@calibr0636 5 лет назад

i cant create an api key because i NEED a credit card and its not 2017 where i can just create one without 5 steps

@Dani_Krossing 5 лет назад

Yes people have been complaining that they started charging money for this feature, so a new video is needed at some point in the future

@calibr0636 5 лет назад

thanks for the lessons btw, I'm currently watching the javascript one

@Oluwanifemiii 2 года назад

what websites do i get my API key

@sabuein 2 года назад

Thank you.

@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 4 года назад

describe different var such as location with different coordinates and wfite a marker code for them as in location was written

@karachidavid4722 4 года назад

is this same for google geolocation or is it different

@maremeaxi3344 6 лет назад

VERY NICE , THANKS DUDE :)

@shivanisharma6966 3 года назад

i create api first and the map id also but instant of that it is still not working and I use this same code it show me this error " Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."

@gandalfsnowgrey7037 Год назад

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 Год назад

It still works yes.

@chingee5060 7 лет назад

thank you, your video it is helpful

@aljohndumlao6326 4 года назад

Can you plese help me ? everytime i open it,, this is what i see .. "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details" help how to fix this ?

@Xxbryanboricuapr1xX 4 года назад

you need to go to Google cloud and go to APIs & Services>Library and then search for Maps JavaScript and API, then select enable, that activates the api key and then it should works

@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 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!

@SatriakbarBlogspot 6 лет назад

i tried but the only show up is white blank page, anyone same ?

@IAmSolomon 6 лет назад

Same

@AnkheNaten4 5 лет назад

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 5 лет назад

where is authorized list?

@AnkheNaten4 5 лет назад

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

@vedparmar6530 7 лет назад

hi creating a different file for CSS is making the code of CSS a bit complicated for ex. when I write the CSS code in section the code of all the subpages is having section tag is changed