AlanSimpsonMe/Responsive_Google_Map

## Responsive_Google_Map
<!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>
	<!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>