Google Map API v3 — set bounds and center

javascript

map-api

google-maps

javascript-geolocation

byAlex Kataev·Feb 8, 2025

To coordinate your Google Map view meticulously, initiate a LatLngBounds object with precise corner coordinates, and utilize the fitBounds() method for zooming and centering control:

let map;
let bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(southWestLat, southWestLng),
  new google.maps.LatLng(northEastLat, northEastLng)
);

function mapInitialization() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: bounds.getCenter()  // Auto-center to bounds
  });
  map.fitBounds(bounds); // Auto-zoom
}

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

Swap southWestLat, southWestLng, northEastLat, and northEastLng with your coordinates. Your map will now salute you with a perfect centering and zooming capability.

Commanding dynamic bounds

For several markers, have them on the map's field of vision. Iteratively expand the LatLngBounds object for a comprehensive view:

let bounds = new google.maps.LatLngBounds();

markers.forEach(function(marker) { // For each marker 
  bounds.extend(marker.getPosition()); // We expand our field of vision. Think of it like birdwatching but with markers!
});

map.fitBounds(bounds);  // Readjust the viewpoint to include new markers.

This programming pattern ensures your markers are no longer introverts, appearing visibly within the map's viewport and boosting user experience. Say goodbye to the simpler pleasures like setCenter()!

Dealing with overlays and markers

Managing overlays like circles, polygons, and polylines

For geometrical shapes such as circles, polygons, or polylines, tweak the bounds to include their entirety:

// Enlarging circle overlay bounds
bounds.union(circle.getBounds());

// For polygons, we go path by path to extend bounds
polygon.getPaths().forEach(function(path) { 
  path.forEach(function(lat_lng) {
    bounds.extend(lat_lng); // Like a snake eating an apple, our bounds have to stretch to accommodate the polygon's path!
  });
});

// Polyline boundary adjustments
polyline.getPath().forEach(function(pathCoord) {
  bounds.extend(pathCoord); // It's like Yelp, but for maps. Every path is reviewed, and if it's good, it's in the map bounds.
});

The use of bounds.union() or path iteration promises to show the entire overlay on the map.

Sprucing up custom markers

Create specialized markers with unique characteristics such as size, position, icon, and more:

let image = 'your_custom_marker.png';  // Your spin on marker visualization
let markerSize = new google.maps.Size(height, width);

markers.forEach(function(location) { 
  let marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: {
      url: image,
      size: markerSize
      // Once upon a time there was an ordinary marker... Well, not anymore! It's customization time!
    }
  });
  bounds.extend(location);
});