Created
July 7, 2018 16:55
-
-
Save AlanSimpsonMe/20d0c192824d01cf356b1741dbf21f0c to your computer and use it in GitHub Desktop.
Embed a Responsive Google Map in a Web Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment