Responsive centered Google Maps

responsive-centered-google-maps.css

.container {
  max-width: 640px;
  max-height: 640px;
  margin: 0 auto
}

.google_map
{
  width: 100%;
  overflow:hidden;
  display: block;
  position: relative;
  /* Uncle Daves Padded Box */
  background-size: cover;
  height: 0;
  padding-bottom: 100%;
}

.google_map img
{
  width: 640px;
  height: 640px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -320px; /* Half image width */
  margin-top: -320px; /* Half image height */
}

/* Making it a little sexy */
body {
	background-color: #323236;
  padding: 1em 5em;
}

.google_map {
  box-shadow:         3px 3px 5px 0px #1d1d1d;
}

responsive-centered-google-maps.html

<div class="container">
		<a href="http://goo.gl/maps/kfJyw" class="google_map">
				<img src="http://maps.google.com/maps/api/staticmap?size=640x640&zoom=14&maptype=roadmap&markers=color:green|2+Elizabeth+St,+Melbourne+Victoria+3000+Australia&sensor=false&scale=2" alt="Envato HQ" />	
  </a>
</div>