in this tutorial, I will show you how to integrate a Google map inside your website without using JavaScript.
first, we will need to open google maps and choose any location
then click on the menu button on the top left of the window, a sidebar navigation menu will appear and click on share or embed map
after that, a pop-up window will open and you have to select the embed a map Tab
and click on copy HTML
now that we have copied the HTML Code of the map, let's open our favorite code editor and let's create a beautiful web page.
I already made a web page and this is the source code
HTML CODE
<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1> Google Maps</h1>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96783.19757467517!2d-74.06005297363664!3d40.70756043884096!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+%C3%89tat+de+New+York%2C+%C3%89tats-Unis!5e0!3m2!1sfr!2stn!4v1564332240054!5m2!1sfr!2stn" width="800" height="550" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
h1{
text-align: center;
font-family: 'Roboto',sans-serif;
color: #fafafa;
margin-bottom: 25px;
}
body{
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1522072176817-41673f7f0ccc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1179&q=80);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.map{
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 25px;
background-color: #fafafa;
box-shadow: 0 2px 8px rgba(50,50,50,.6);
}
I hope that you liked this project if you have any other problem that you face, or you have a specific project, just comment it
How to integrate Google Maps To your Website
Reviewed by Medics
on
July 30, 2019
Rating:
Reviewed by Medics
on
July 30, 2019
Rating:
No comments: