harunpehlivan
7/29/2018 - 11:12 AM
Embed a Responsive Google Map in a Web page
Embed a Responsive Google Map in a Web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="HARUN PEHLİVAN">
<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=!4v1532862419366!6m8!1m7!1s_35aUW3xmI21YrK9ORdzbA!2m2!1d40.82946776090784!2d35.65740059309628!3f57.57!4f-0.39000000000000057!5f1.3946584482860698" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1514660549" id="avatar" class="img-responsive img-circle" alt="photos"><br><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4960.797732928768!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1532862602371" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</html>