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

Поделиться
HTML-код
  • Опубликовано: 23 янв 2025

Комментарии • 310

  • @Dani_Krossing
    @Dani_Krossing  Год назад

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: ruclips.net/video/v8jDnBYc0bs/видео.html&ab_channel=DaniKrossing

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

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

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

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

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

  • @matttepp3038
    @matttepp3038 8 лет назад +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.

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

  • @mavoolumma
    @mavoolumma 3 года назад

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

  • @STEFKOUNGR
    @STEFKOUNGR 4 года назад +1

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

  • @sajadhazrati2000
    @sajadhazrati2000 Год назад

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

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

  • @musicnow8743
    @musicnow8743 Год назад +1

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

  • @jackionendino4293
    @jackionendino4293 4 года назад +4

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

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

      I agree. I could actually code along.

  • @gibran5208
    @gibran5208 3 года назад

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

  • @pujunyu3757
    @pujunyu3757 4 года назад

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

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

  • @calibr0636
    @calibr0636 5 лет назад +5

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

  • @adrianlaub6128
    @adrianlaub6128 4 года назад +1

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

  • @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 10 месяцев назад

    BTW: useful at learning material. Learned a lot.

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

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

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

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

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

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

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

  • @yosefahmad4341
    @yosefahmad4341 7 лет назад +2

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

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

  • @MaryAnpopis
    @MaryAnpopis 7 лет назад +2

    this tutorial was so helpful, thank you soooooo much!

  • @gailius.m
    @gailius.m 8 лет назад +2

    Your tutorials are awesome !

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

    just finished the course and i want more tutorials brother

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

    Wow!!! I liked u r explanation skill

  • @MahbubSBJalil
    @MahbubSBJalil 7 лет назад +2

    Thanks! It worked for me perfectly!

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

  • @elijohn365
    @elijohn365 9 месяцев назад

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

  • @jamesbloom9545
    @jamesbloom9545 3 года назад +2

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

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

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

  • @nomadboy4828
    @nomadboy4828 6 лет назад

    You are so clear and details.

  • @TheNikolajHE
    @TheNikolajHE 5 лет назад

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

  • @abrorbekjoniyev3304
    @abrorbekjoniyev3304 5 лет назад

    Hey dude, works perfectly! Thanks! Keep going!

  • @riadhossain4020
    @riadhossain4020 5 лет назад

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

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

  • @-alfeim2919
    @-alfeim2919 4 года назад +2

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

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

    Wonderfully done. Thank you!

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

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

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

  • @rajnishkalwar1840
    @rajnishkalwar1840 7 лет назад

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

  • @seanurgel8972
    @seanurgel8972 7 лет назад

    Amazing video and a clean tutorial! Keep it up

  • @yoengvisal9984
    @yoengvisal9984 4 года назад

    i love your videos.

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

  • @Oluwanifemiii
    @Oluwanifemiii 2 года назад +1

    what websites do i get my API key

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

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

  • @DemonIgnis
    @DemonIgnis 6 лет назад

    You are the man!!

  • @doncui7404
    @doncui7404 5 лет назад

    Excellent! Thank you.

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

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

    Great tutorial

  • @pauliusjarasunas1757
    @pauliusjarasunas1757 6 лет назад

    Thank you so much this video really helped me!

  • @MortenCopenhagen
    @MortenCopenhagen 6 лет назад

    Very good teacher. Thanks.

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

  • @whitneymcghee7388
    @whitneymcghee7388 7 лет назад

    Thanks for the tutorial! Helped me out alot

  • @samuelnyangulu2691
    @samuelnyangulu2691 6 лет назад

    Man that was awesome
    Thanks a lot

  • @maissa9852
    @maissa9852 3 года назад

    Hello , i need to help me , i have a cafe that there location is in a lot of places so how i can put all this location in my site web ? Pls help me

  • @techcanyon411
    @techcanyon411 6 лет назад +1

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

  • @pochengwu4858
    @pochengwu4858 6 лет назад

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

  • @kbdaily603
    @kbdaily603 7 лет назад

    Thank This is a best video

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

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

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

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

  • @joydas1685
    @joydas1685 7 лет назад

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

  • @eysi8
    @eysi8 5 лет назад

    Does it only works on GoogleChrome?

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

    is this same for google geolocation or is it different

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

  • @vedparmar6530
    @vedparmar6530 8 лет назад

    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

  • @tareqahmed1653
    @tareqahmed1653 7 лет назад

    Thanks! very helpful video tutorial.

  • @QuocAnAlexDjEntermeniter99639
    @QuocAnAlexDjEntermeniter99639 8 месяцев назад

    You are teacher so beatiful

  • @stunningmesh6263
    @stunningmesh6263 6 лет назад

    can i add button in my page when some one click on that link and that button send cordinates to google map and map take user to specified cordinates which were sent throuh click on button
    like i have two buttons 1 button is america and second button is pakistan when someone click on ameriaca it will show america country on map and if someone click on pakistan it will show pakistan country on google map without reloading
    please let me know if you have method i need very urgently
    thanks

  • @maremeaxi3344
    @maremeaxi3344 7 лет назад

    VERY NICE , THANKS DUDE :)

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

    Very helpful

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

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

  • @mdektemalhossain5976
    @mdektemalhossain5976 6 лет назад

    to get a api key google required card number with expire date and so my card expired i can't get a key... do u have any solution for this..@mmtuts

  • @MarcialHeredia
    @MarcialHeredia 6 лет назад +10

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

    • @nellytadi5309
      @nellytadi5309 6 лет назад +1

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

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

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

  • @Blacknut65
    @Blacknut65 2 года назад

    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

  • @tahalamti5966
    @tahalamti5966 6 лет назад

    Great, thank you.

  • @SatriakbarBlogspot
    @SatriakbarBlogspot 6 лет назад +9

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

    • @MrSoloDoesIt
      @MrSoloDoesIt 6 лет назад +1

      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.

  • @lesbar3349
    @lesbar3349 2 года назад

    I have the same problem. I copied the html code exactly and got my own api key and all I get is a blank page in my browser. Can anyone help?

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

    Thank you so much, this was really halpful!

    • @yashsaxena8401
      @yashsaxena8401 5 лет назад

      your api key is not generated properly

  • @chingee5060
    @chingee5060 7 лет назад

    thank you, your video it is helpful

  • @vaveileinn8402
    @vaveileinn8402 4 года назад

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

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

  • @vishwasrchonu7134
    @vishwasrchonu7134 5 лет назад

    ApiNotActivatedMapError in the chrome javascript console. What to do?

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

  • @sagiherer4783
    @sagiherer4783 7 лет назад

    i want to move the map left and down and i used margin and it didnt worked can u tell me what am i need to to move that map ?

  • @aljohndumlao6326
    @aljohndumlao6326 5 лет назад +1

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

      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

  • @sayedhasancp
    @sayedhasancp 7 лет назад

    awesome tutorial,,,, thanks.

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