Zoom automático do mapa do Google com base em seus marcadores

Mostre um mapa do Google, com zoom exato para que todos os seus marcadores fiquem visíveis. Este exemplo usa jQuery, mas não é obrigatório.

HTML

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<div id="map-canvas" data-lat-lng="40.689060,-74.044636"></div>
<span class="marker" data-lat-lng="41.689060,-73.044636">Marker 1</span>
<span class="marker" data-lat-lng="42.689060,-72.044636">Marker 2</span>

Coffeescript

$ ->

 # Convert the #map-canvas div into a map.
 # By Joost Baaij www.spacebabies.nl
 $('#map-canvas').each (index, element) ->
  # split the data-lat-lng attribute into lat and lng variables
   [lat, lng]    = $(element).data('lat-lng').split(",")
  # initial zoom and center
   options =
     center:     new google.maps.LatLng(lat, lng)
     mapTypeId:  google.maps.MapTypeId.ROADMAP
     zoom:       $(element).data('zoom') || 16

   map = new google.maps.Map(element, options)
   bounds = new google.maps.LatLngBounds()

   # Go through all markers, if any, and place those on the map.
   $('.marker').each (index, element) ->
     [lat, lng]    = $(element).data('lat-lng').split(",")
     return unless lat && lng

     marker        = new google.maps.Marker
       position:   new google.maps.LatLng(lat, lng)
       title:      $(element).text()
       map:        map

     bounds.extend(marker.position)

   # resize the map to show all markers, if there are more than one.
   map.fitBounds(bounds) if $('.marker').length > 1

javascript gerado

(function() {
  $(function() {
    return $('#map-canvas').each(function(index, element) {
      var bounds, lat, lng, map, options, _ref;

      _ref = $(element).data('lat-lng').split(","), lat = _ref[0], lng = _ref[1];
      options = {
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: $(element).data('zoom') || 16
      };
      map = new google.maps.Map(element, options);
      bounds = new google.maps.LatLngBounds();
      $('.marker').each(function(index, element) {
        var marker, _ref1;

        _ref1 = $(element).data('lat-lng').split(","), lat = _ref1[0], lng = _ref1[1];
        if (!(lat && lng)) {
          return;
        }
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          title: $(element).text(),
          map: map
        });
        bounds.extend(marker.position);
      });
      if ($('.marker').length > 1) {
        return map.fitBounds(bounds);
      }
    });
  });

}).call(this);