JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<script type="text/javascript" 			src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"/>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }

JavaScript

function initialize() {
	var mapOptions = {
		center: new google.maps.LatLng(28.70, -127.50),
		zoom: 4,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
			mapOptions);
		
	// bounds of the desired area
	var allowedBounds = new google.maps.LatLngBounds(
	  new google.maps.LatLng(28.70, -127.50),
	  new google.maps.LatLng(48.85, -55.90)
	);
	var boundLimits = {
		maxLat : allowedBounds.getNorthEast().lat(),
		maxLng : allowedBounds.getNorthEast().lng(),
		minLat : allowedBounds.getSouthWest().lat(),
		minLng : allowedBounds.getSouthWest().lng()
	};

	var lastValidCenter = map.getCenter();
	var newLat, newLng;
	google.maps.event.addListener(map, 'center_changed', function() {
		center = map.getCenter();
		if (allowedBounds.contains(center)) {
			// still within valid bounds, so save the last valid position
			lastValidCenter = map.getCenter();
			return;
		}
		newLat = lastValidCenter.lat();
		newLng = lastValidCenter.lng();
		if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
			newLng = center.lng();
		}
		if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
			newLat = center.lat();
		}
		map.panTo(new google.maps.LatLng(newLat, newLng));
	});
}
google.maps.event.addDomListener(window, 'load', initialize);