<div id="map_container">
	<div id="map"></div>
</div>
body { 
  margin-top: 2rem;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/black-wallpaper-10.jpg) #111;
}
#map_container {
	position: relative;
	padding-top: 50%;
  width: 80%;
  margin: 0 auto;
}
#map {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
	function initialize() {
	var myLatlng = new google.maps.LatLng(40.758895,-73.985),
	mapOptions = {
		zoom: 13,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var contentString = 'Times Square, Manhattan';
var infowindow = new google.maps.InfoWindow({
	content: contentString,
	maxWidth: 500
});

var marker = new google.maps.Marker({
	position: myLatlng,
	map: map
});

google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
});

google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
	});
}
google.maps.event.addDomListener(window, 'load', initialize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://maps.googleapis.com/maps/api/js?v=3.exp