Hi there guys welcome encourage to 1 other video of easy tutorials this day on this video we’re going to be taught the manner so as to add google map for your net page here is the sunshine mode of google map and this one is the darkish mode we can be taught so as to add each and each darkish mode and light-weight mode for your net page the utilize of html and css so let's inaugurate this video here on this folder i hang one html file.
And one css file and let me delivery this html and css file with my code editor which is visual studio code so here is the html file where i hang added the elemental html constructions and this one is the css file where i hang added margin padding box sizing and font family this is in a position to well perhaps be applicable for the final html substances on this html file now we hang added.
This link label that will join the html and css file on this body label we can add a div with the class title container and next now we must add the css for this container so exquisite add this class title on this css file and here we can add some css properties appreciate.
Width and high for this div width will be 100 and high 100 bh on this html file within this div with the faculty room container we can add a title in h1 so let me add the title.
Embed map map after including this let me reach encourage to the folder and delivery this html file with any net browser now you would be taught this message at the high so now we must drag this message in the heart of the webpage so let's reach encourage to the css file.
And here we can add demonstrate flex then align item center then define allege material it’ll be center and after that we can add flex path column after including this again refresh the net page and now you would be taught this title in the heart of the gain net page.
Subsequent now we must add a google map on this net page so delivery google map and discover the map it is most valuable to embed so let me search any map here you would be taught an icon for fraction let's click on on the fraction icon then click on on this link embed a map click on here and here you would be taught a.
Code that you just’d like so as to add in the html file so exquisite click on on this link reproduction html it’ll reproduction the html code exquisite reach encourage to the html file and space it here appreciate this you would be taught this google map is in the iframe label after including this let's refresh the net page again.
Now you would be taught this google map exquisite below this title next now we must add the size for this google map and we can add some reveal between this title and map so let's reach encourage here in the css we can add h1 and for this h1 let me change the color.
Triple three then we can add some reveal margin bottom 60 pixel and also you would be taught this google map is in the iframe label so exquisite reproduction this iframe write it here and for this one we can add width so the width will be.
80 p.c and let me add the high high will be 500 pixel after including this again refresh the net page now you would be taught this dimension for the google map is good so now we hang added the google map on this net page it used to be very straightforward next now we hang.
To change this google map in the evening mode or darkish mode to turn this google map in darkish mode let's reach encourage to the css file and within this iframe exquisite add a filter we can add filter invert.
100 p.c exquisite after including this one line of code which is filter invert 100 again refresh the net page and now you would be taught this google map in the evening mode or darkish mode so this used to be very straightforward to embed a google map for your net page to demonstrate your alternate map on net page the utilize of html and css i.
Hope this video will be handy for you for those that hang any quiz you would demand me in the commentary piece please appreciate and fraction this video and additionally subscribe my channel straightforward tutorials to appear more movies appreciate this one thank you so grand for staring at this video
