How to Use LatLngBounds in Google Maps

The LatLngBounds class represents a rectangle in geographical coordinates. Here's how to create and use a LatLngBounds instance in Google Maps.

  1. Start with the following basic Google Map with no options specified. Make sure to replace YOUR_API_KEY in the script tag with your API key that you got from https://developers.google.com/maps.
  2. 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    	<style>
    		#map {
    			height: 100%;
    		}
    		/* Optional: Makes the sample page fill the window. */
    		html, body {
    			height: 100%;
    			margin: 0;
    			padding: 0;
    		}
    	</style>
    	<script>
    	function initMap() {
    		var mapOptions = {
    			zoom: 8,
    			center: new google.maps.LatLng(44, -110),
    			mapTypeId: 'roadmap'
    		};
    		var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    	}
    	</script>
    </head>
    <body>
    <div id="map"></div>
    <script async defer
    		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    </body>
    </html>
    
  3. Add an event listener inside the initMap() function to detect changes to the current map boundaries.
  4. 
    function initMap() {
    	var mapOptions = {
    		zoom: 8,
    		center: new google.maps.LatLng(44, -110),
    		mapTypeId: 'roadmap'
    	};
    	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    	google.maps.event.addListener(map, 'bounds_changed', function() {
    
    	});
    }
    
  5. Use an alert() containing the map.getBounds() function to display the current LatLngBounds object's values when they change.
  6. 
    function initMap() {
    	var mapOptions = {
    		zoom: 8,
    		center: new google.maps.LatLng(44, -110),
    		mapTypeId: 'roadmap'
    	};
    	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    	google.maps.event.addListener(map, 'bounds_changed', function() {
    		alert(map.getBounds());
    	});
    }
    
  7. Open your web page in a browser.
  8. Click and drag on the map to change the boundaries. An alert will appear and show you the four coordinates of the LatLngBounds object that make up the current boundaries of the map.
    Viewing the LatLngBounds
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.