JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
		width: 100%;
		height: 100%;
	} // #map

JavaScript

function CoordMapType(tileSize) {
	this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
		var div = ownerDocument.createElement('DIV');
		
	div.style.width = this.tileSize.width + 'px';
	div.style.height = this.tileSize.height + 'px';
	div.style.backgroundImage = 'url(http://www.transparenttextures.com/patterns/dark-denim-3.png)';
		
	return div;
};

var map;
var mullem = new google.maps.LatLng(50.3873733,7.4952241);

function initialize() {
	var latlng = new google.maps.LatLng(50.3873733,7.4952241);
	var myOptions = {
			disableDefaultUI: true,
						zoom: 2
	};

	var map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
	var myLatLng = new google.maps.LatLng(50.3869012,  7.4950149);
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(40.6700, -73.9400),
							map: map,
							icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
							zIndex: 999999
					});

	map.setCenter(new google.maps.LatLng(51.508742,-0.120850));

	// MAP BOUNDS
//   LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral)	Constructs a rectangle from the points at its south-west and north-east corners.
	var allowedBounds = new google.maps.LatLngBounds(
			 new google.maps.LatLng(-72.711903, -165.058594), 
			 new google.maps.LatLng(73.829945, 160.839844)
	);
	var lastValidCenter = map.getCenter();

		google.maps.event.addListener(map, 'center_changed', function() {
			if (allowedBounds.contains(map.getCenter())) {
					// still within valid bounds, so save the last valid position
					lastValidCenter = map.getCenter();
					return; 
			}

			// not valid anymore => return to last valid position
			map.panTo(lastValidCenter);
	});
	// MAP BOUNDS - END
	

		map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
	}

	google.maps.event.addDomListener(window, 'load', initialize);