<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="Alan Simpson">
<meta name="description" content="Embed a Responsive Google Map in your Web Page">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Google Map Example</title>
<style>
/* Style the body and other elements however you like */
body {
background: black;
color: white;
font-size: 150%;
}
/* The iframe contains the map */
iframe {
display: block;
/* The 90vw means 90%, use any width you like */
width: 90vw;
/* Calculate the height to maintain original shape,
but match vw number to that above */
height: calc(.75 * 90vw);
/* Optionally, set maximum height and width */
max-width: 800px;
max-height: 600px;
/* If you want the map to the left of subsequent content */
float: left;
margin-right: 10px;
/* Optionally, you can use margin: 1em auto to center */
border: solid 2px gray;
box-shadow: 2px 2px 2px silver;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- The tag below is just a simple copy / paste from Google maps
with the width and height removed -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.615565192524!2d-73.9876131843148!3d40.74848394331907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b30eac9f%3A0xaca05ca48ab5ac2c!2s350+5th+Ave%2C+New+York%2C+NY+10118!5e0!3m2!1sen!2sus!4v1530981553173"
frameborder="0" style="border:0" allowfullscreen></iframe>
We're in the Empire State Building, top by any time.
</body>
</html>