Google Maps use in Website using HTML and CSS

Creative CSS Effects | October 29, 2021

This tutorial blog to learn how to add Google Maps using only HTML and CSS.

Video tutorial of how to add Google Maps using only HTML and CSS.

This tutorial video can help you to add Google Maps using only HTML and CSS.

You might like this

Google Maps use in Website using HTML and CSS[Source Codes]

This source code can help you to add Google Maps using only HTML and CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="map-container">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d376991.6121350662!2d76.95336224934569!3d28.61451361982638!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x52c2b7494e204dce!2sNew%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1635010180629!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #08aec8;
	color: #000;

	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 100vh;
}

.map-container{
	width: 1000px;
	margin: 0 auto;
	height: 70vh;
	background-color: lightgray;
	border-radius: 10px;
}
.map-container iframe{
	border-radius: 10px;
}