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

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 พ.ย. 2024

ความคิดเห็น • 310

  • @Dani_Krossing
    @Dani_Krossing  ปีที่แล้ว

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing

  • @knows1com
    @knows1com 3 ปีที่แล้ว +7

    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

  • @mulualemabate3193
    @mulualemabate3193 2 ปีที่แล้ว +1

    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!

  • @mitchellrose6865
    @mitchellrose6865 3 ปีที่แล้ว +15

    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!

  • @silverlion
    @silverlion 3 ปีที่แล้ว +2

    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!

  • @mavoolumma
    @mavoolumma 3 ปีที่แล้ว

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

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

  • @kaar951
    @kaar951 5 ปีที่แล้ว +9

    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.

  • @sajadhazrati2000
    @sajadhazrati2000 ปีที่แล้ว

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

  • @STEFKOUNGR
    @STEFKOUNGR 4 ปีที่แล้ว +1

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

  • @matttepp3038
    @matttepp3038 7 ปีที่แล้ว +11

    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.

  • @calibr0636
    @calibr0636 5 ปีที่แล้ว +5

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

  • @caminodigital7542
    @caminodigital7542 6 ปีที่แล้ว +3

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

    • @RoseyLlama
      @RoseyLlama 2 ปีที่แล้ว

      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!

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

  • @kwokashley2000
    @kwokashley2000 2 ปีที่แล้ว

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

  • @pujunyu3757
    @pujunyu3757 4 ปีที่แล้ว

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

  • @musicnow8743
    @musicnow8743 ปีที่แล้ว +1

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

  • @gabrielfono844
    @gabrielfono844 4 ปีที่แล้ว

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

  • @sumitshekhawat5738
    @sumitshekhawat5738 2 ปีที่แล้ว

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

  • @adrianlaub6128
    @adrianlaub6128 4 ปีที่แล้ว +1

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

  • @tinotendagarwe4929
    @tinotendagarwe4929 2 ปีที่แล้ว

    just finished the course and i want more tutorials brother

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

  • @jackionendino4293
    @jackionendino4293 4 ปีที่แล้ว +4

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

  • @guyklaassen5824
    @guyklaassen5824 8 หลายเดือนก่อน

    BTW: useful at learning material. Learned a lot.

  • @adarshvaranasi1684
    @adarshvaranasi1684 4 ปีที่แล้ว

    Wow!!! I liked u r explanation skill

  • @nomadboy4828
    @nomadboy4828 6 ปีที่แล้ว

    You are so clear and details.

  • @alphanelmas1662
    @alphanelmas1662 3 ปีที่แล้ว +1

    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

  • @BLOOMwithANSA
    @BLOOMwithANSA 6 ปีที่แล้ว

    very precise and clear. Thumbs up

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

  • @livelove4ever
    @livelove4ever 2 ปีที่แล้ว

    Great tutorial

  • @yoengvisal9984
    @yoengvisal9984 4 ปีที่แล้ว

    i love your videos.

  • @buhnalaycolorado9587
    @buhnalaycolorado9587 4 ปีที่แล้ว

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

  • @QuocAnAlexDjEntermeniter99639
    @QuocAnAlexDjEntermeniter99639 7 หลายเดือนก่อน

    You are teacher so beatiful

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

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

  • @riadhossain4020
    @riadhossain4020 5 ปีที่แล้ว

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

  • @TDarkCoder
    @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
    @yosefahmad4341 7 ปีที่แล้ว +2

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

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

  • @thezvid
    @thezvid 4 ปีที่แล้ว +1

    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.

  • @suburbanblackboyradio2663
    @suburbanblackboyradio2663 4 ปีที่แล้ว

    Wonderfully done. Thank you!

  • @codercow1941
    @codercow1941 3 ปีที่แล้ว +1

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

  • @jamesbloom9545
    @jamesbloom9545 3 ปีที่แล้ว +2

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

  • @-alfeim2919
    @-alfeim2919 4 ปีที่แล้ว +2

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

  • @MahbubSBJalil
    @MahbubSBJalil 7 ปีที่แล้ว +2

    Thanks! It worked for me perfectly!

  • @doncui7404
    @doncui7404 5 ปีที่แล้ว

    Excellent! Thank you.

  • @TheMichaelSpray
    @TheMichaelSpray 4 ปีที่แล้ว +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 ปีที่แล้ว +1

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

  • @prajvals5283
    @prajvals5283 4 ปีที่แล้ว

    Very helpful

  • @MaryAnpopis
    @MaryAnpopis 7 ปีที่แล้ว +2

    this tutorial was so helpful, thank you soooooo much!

  • @gailius.m
    @gailius.m 7 ปีที่แล้ว +2

    Your tutorials are awesome !

  • @mouadjo7530
    @mouadjo7530 4 ปีที่แล้ว

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

  • @rajnishkalwar1840
    @rajnishkalwar1840 6 ปีที่แล้ว

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

  • @TheNikolajHE
    @TheNikolajHE 5 ปีที่แล้ว

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

  • @MortenCopenhagen
    @MortenCopenhagen 6 ปีที่แล้ว

    Very good teacher. Thanks.

  • @kbdaily603
    @kbdaily603 7 ปีที่แล้ว

    Thank This is a best video

  • @komilj5580
    @komilj5580 4 ปีที่แล้ว

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

  • @vikramchiniwalar3259
    @vikramchiniwalar3259 4 ปีที่แล้ว

    Create a Page to register user.
    Information required for user registration- For the test we don't have to create delete user functionality
    Name -
    Age -
    Gender -
    Location -
    Create a Page to show a google map
    What we want to see in the map
    1 - All users based on their location
    2 - Users based on age group
    3 - Users Based on Gender or combination of age group and gender
    4 - All users should be shown in the same page
    5 - The page should be dynamic, if I add more users it should show all users

    • @tinkytinxx
      @tinkytinxx 2 ปีที่แล้ว

      Hello can you please help me
      Is this a way to meet ppl because you find them on the map?
      My partner has this on his phone but hid it from Me.
      It only came up because he doesn't delete his iPhone website data.
      Please tell me what sneaky ways he's using this for?

  • @dimitristsolakidis1311
    @dimitristsolakidis1311 4 ปีที่แล้ว +1

    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?

  • @seanurgel8972
    @seanurgel8972 7 ปีที่แล้ว

    Amazing video and a clean tutorial! Keep it up

  • @Oluwanifemiii
    @Oluwanifemiii 2 ปีที่แล้ว +1

    what websites do i get my API key

  • @ollivergodvil
    @ollivergodvil 3 ปีที่แล้ว

    Support the Dansih people!

  • @techcanyon411
    @techcanyon411 6 ปีที่แล้ว +1

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

  • @abrorbekjoniyev3304
    @abrorbekjoniyev3304 5 ปีที่แล้ว

    Hey dude, works perfectly! Thanks! Keep going!

    • @vishwasrchonu7134
      @vishwasrchonu7134 4 ปีที่แล้ว

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

  • @samuelnyangulu2691
    @samuelnyangulu2691 6 ปีที่แล้ว

    Man that was awesome
    Thanks a lot

  • @sabuein
    @sabuein 2 ปีที่แล้ว

    Thank you.

  • @DemonIgnis
    @DemonIgnis 6 ปีที่แล้ว

    You are the man!!

  • @pochengwu4858
    @pochengwu4858 6 ปีที่แล้ว

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

  • @whitneymcghee7388
    @whitneymcghee7388 7 ปีที่แล้ว

    Thanks for the tutorial! Helped me out alot

  • @junaidbhatti4474
    @junaidbhatti4474 6 ปีที่แล้ว +5

    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

  • @elijohn365
    @elijohn365 7 หลายเดือนก่อน

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

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

  • @tahalamti5966
    @tahalamti5966 6 ปีที่แล้ว

    Great, thank you.

  • @joydas1685
    @joydas1685 6 ปีที่แล้ว

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

  • @pauliusjarasunas1757
    @pauliusjarasunas1757 6 ปีที่แล้ว

    Thank you so much this video really helped me!

  • @fanny8463
    @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
    @tareqahmed1653 7 ปีที่แล้ว

    Thanks! very helpful video tutorial.

  • @chingee5060
    @chingee5060 7 ปีที่แล้ว

    thank you, your video it is helpful

  • @maruthuganesh2875
    @maruthuganesh2875 6 ปีที่แล้ว

    super its very useful

  • @kyleguerrero6106
    @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

  • @maremeaxi3344
    @maremeaxi3344 6 ปีที่แล้ว

    VERY NICE , THANKS DUDE :)

  • @sumeetbatra2955
    @sumeetbatra2955 3 ปีที่แล้ว

    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

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

  • @anony6161
    @anony6161 6 ปีที่แล้ว +1

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

  • @stryychnine
    @stryychnine 9 หลายเดือนก่อน

    thank you :')

  • @karachidavid4722
    @karachidavid4722 4 ปีที่แล้ว

    is this same for google geolocation or is it different

  • @Enevry
    @Enevry 6 ปีที่แล้ว +2

    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

  • @kristijan7140
    @kristijan7140 7 ปีที่แล้ว +1

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

  • @mackynikat8833
    @mackynikat8833 4 ปีที่แล้ว

    just great. has this bot detected problem with api's

  • @sebastiantedesco8987
    @sebastiantedesco8987 5 ปีที่แล้ว

    Thanks!!

  • @sayedhasancp
    @sayedhasancp 7 ปีที่แล้ว

    awesome tutorial,,,, thanks.

  • @vaveileinn8402
    @vaveileinn8402 4 ปีที่แล้ว

    is there any way to route(draw line) between two coordinates(bu using latitude and longtitude)?

  • @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 ปีที่แล้ว +1

      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!

  • @vedparmar6530
    @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

  • @fayezal-alami6847
    @fayezal-alami6847 7 ปีที่แล้ว

    Thank you so much, this was really halpful!

    • @yashsaxena8401
      @yashsaxena8401 4 ปีที่แล้ว

      your api key is not generated properly

  • @gandalfsnowgrey7037
    @gandalfsnowgrey7037 2 ปีที่แล้ว +1

    Is this still working today? Found some issue with the lat/long website and I think the Google dev website is working differently now.

  • @pagolLM10
    @pagolLM10 7 ปีที่แล้ว +31

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

    • @victormagaud2967
      @victormagaud2967 6 ปีที่แล้ว +1

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

    • @Miden1437
      @Miden1437 5 ปีที่แล้ว +1

      @@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 ปีที่แล้ว +1

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

    • @hardcode6372
      @hardcode6372 4 ปีที่แล้ว

      @@ananyasrivastava5128 nope

  • @VideoNash
    @VideoNash ปีที่แล้ว

    thanks

  • @ShirishJadav162
    @ShirishJadav162 3 ปีที่แล้ว

    How about drawing lines between two coordinates ?! To create a tracking application ?!

  • @yacimemos7612
    @yacimemos7612 5 ปีที่แล้ว

    thank's man