Skip to content

Instantly share code, notes, and snippets.

@greenboyroy

greenboyroy/jsbin.gutaj.html

Last active September 18, 2018 19:53
Show Gist options
  • Save greenboyroy/b0475b8f4f76ec528955 to your computer and use it in GitHub Desktop.
Save greenboyroy/b0475b8f4f76ec528955 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Static Google Maps
Raw
jsbin.gutaj.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Static Google Maps</title>
<style>
img {max-width: 100%;}
</style>
</head>
<body>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=500x500&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=500x500&scale=2&sensor=TRUE_OR_FALSE 2x" media="(min-width: 800px)">
<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x">
<!--[if IE 9]></video><![endif]-->
<img srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x" alt="Google Map">
</picture>
<script src="http://cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>
</body>
</html>
@warksit
Copy link

warksit commented Nov 25, 2015

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment