javascript - GPS とマーカー間のマップ境界の設定

Question

マップの境界を設定する方法がわかりません。関連する他のいくつかの質問を見ましたが、それらを適切に機能させることができません。

これは私がしようとしているものです: http://jsfiddle.net/ZFyDY/

各マーカーの後、次のようにマップの境界を調整します。

var bounds = new google.maps.LatLngBounds();
bounds.extend(gps_coords);

私は何を間違っていますか？

Answer 1

毎回（マーカーごとに）新しい空の境界オブジェクトを作成しないでください。最初に作成し、すべてのポイントを追加してから、それを使用してマップをズームして中央に配置します。

コードスニペット：

function map_init() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var bounds = new google.maps.LatLngBounds();
  // Add GPS location
  /*
  var sensor_image = new google.maps.MarkerImage("#{asset_path "
    sensor.png "}",
    new google.maps.Size(38, 38),
    new google.maps.Point(0, 0),
    new google.maps.Point(19, 19));
    */

  if (navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      var gps_coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      new google.maps.Marker({
        position: gps_coords,
        map: map,
        // icon: sensor_image
      });

      var bounds = new google.maps.LatLngBounds();
      bounds.extend(gps_coords);

    }, function() {
      // Handle no geolocation support
    })
  }

  //Add Store location
  geocoder = new google.maps.Geocoder();

  geocoder.geocode({
    'address': "New York, NY"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var store_coords = results[0].geometry.location;

      new google.maps.Marker({
        position: store_coords,
        animation: google.maps.Animation.DROP,
        map: map
      });

      bounds.extend(store_coords);
      map.fitBounds(bounds);

    }
  });
  geocoder.geocode({
    'address': "Boston, MA"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var store_coords = results[0].geometry.location;

      new google.maps.Marker({
        position: store_coords,
        animation: google.maps.Animation.DROP,
        map: map
      });

      bounds.extend(store_coords);
      map.fitBounds(bounds);

    }
  });
  //Configure map
  //bounds.extend(gps_coords);

  //bounds.extend(store_coords);

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window,'load', map_init)

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>