GoogleマップV3にマッチするオートズーム表示

Question

マップ上のマーカーに常にフィットするように、Googleマップのautozoomの指示に従おうとしました。しかし、私はそれを働かせることはできません。誰が私のコードで何が間違っているのを見ることができますか？

<script> 

    function initMap() { 
     var myLatLng = { lat: 55.561213987, lng: 8.1286275387 }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      zoom: 13, 
      center: myLatLng  
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange' 
     }); 


     var marker = new google.maps.Marker({ 
      position: { lat: 55.5577227947, lng: 8.1225042121 }, 
      label: "1", 
      map: map, 
      title: 'Lækkert sommerhus beliggende på en dejlig naturgrund' 
     }); 

     var marker = new google.maps.Marker({ 
      position: { lat: 55.5570797278, lng: 8.1276749566 }, 
      label: "2", 
      map: map, 
      title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og ' 
     }); 

     var marker = new google.maps.Marker({ 
      position: { lat: 55.56169, lng: 8.13126 }, 
      label: "3", 
      map: map, 
      title: 'Dette skønne feriehus fremstår utroligt flot' 
     }); 

     var marker = new google.maps.Marker({ 
      position: { lat: 55.5560563333123, lng: 8.12075257301331 }, 
      label: "4", 
      map: map, 
      title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur' 
     }); 

     var marker = new google.maps.Marker({ 
      position: { lat: 55.55282, lng: 8.12843 }, 
      label: "5", 
      map: map, 
      title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca' 
     }); 


     var map; 
     var bound = new google.maps.LatLngBounds(); 
     var markers = new Array(); 

     //jQuery style entry point, change if necessary 
     $(document).ready(function(){ 
      initMap(); 
      initMarkers(); 

      for(var i in markers) 
      { 
      bound.extend(markers[i].getPosition()); 
      } 
      map.fitBounds(bound); 
     }); 

     } 
</script> 

ご協力いただければ幸いです。

Answer 1

1. あなたのすべてのマーカーが同じ名前を持っています。
2. あなたはマーカー配列にそれらを置くことはありません。
3. initMarkersが存在しません。

proof of concept fiddle

コードスニペット：

function initMap() { 
 
    var myLatLng = { 
 
    lat: 55.561213987, 
 
    lng: 8.1286275387 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 13, 
 
    center: myLatLng 
 
    }); 
 
    var markers = []; 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map, 
 
    title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange' 
 
    }); 
 
    markers.push(marker); 
 

 

 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.5577227947, 
 
     lng: 8.1225042121 
 
    }, 
 
    label: "1", 
 
    map: map, 
 
    title: 'Lækkert sommerhus beliggende på en dejlig naturgrund' 
 
    }); 
 
    markers.push(marker); 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.5570797278, 
 
     lng: 8.1276749566 
 
    }, 
 
    label: "2", 
 
    map: map, 
 
    title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og ' 
 
    }); 
 
    markers.push(marker); 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.56169, 
 
     lng: 8.13126 
 
    }, 
 
    label: "3", 
 
    map: map, 
 
    title: 'Dette skønne feriehus fremstår utroligt flot' 
 
    }); 
 
    markers.push(marker); 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.5560563333123, 
 
     lng: 8.12075257301331 
 
    }, 
 
    label: "4", 
 
    map: map, 
 
    title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur' 
 
    }); 
 
    markers.push(marker); 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 55.55282, 
 
     lng: 8.12843 
 
    }, 
 
    label: "5", 
 
    map: map, 
 
    title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca' 
 
    }); 
 
    markers.push(marker); 
 
    // initMarkers(); 
 
    var bound = new google.maps.LatLngBounds(); 
 

 
    for (var i in markers) { 
 
    bound.extend(markers[i].getPosition()); 
 
    } 
 
    map.fitBounds(bound); 
 
} 
 

 
//jQuery style entry point, change if necessary 
 
$(document).ready(function() { 
 
    initMap(); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Answer 2

マーカーはマーカー配列に追加されていないため、空の配列を繰り返していました。配列にマーカーを追加する必要があります。また、すべてのマーカーに同じ名前を付けました。固定コードの下にあるを見つけてください。

<script> 
var map; 
var bound = new google.maps.LatLngBounds(); 
var markers = new Array(); 

function initMap() { 
     var myLatLng = { lat: 55.561213987, lng: 8.1286275387 }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), { 
      zoom: 13, 
      center: myLatLng  
     }); 
    } 

    function initMarkers(){ 


     var marker1 = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange' 
     }); 
     markers.push(marker1) 

     var marker2 = new google.maps.Marker({ 
      position: { lat: 55.5577227947, lng: 8.1225042121 }, 
      label: "1", 
      map: map, 
      title: 'Lækkert sommerhus beliggende på en dejlig naturgrund' 
     }); 
     markers.push(marker2) 

     var marker3 = new google.maps.Marker({ 
      position: { lat: 55.5570797278, lng: 8.1276749566 }, 
      label: "2", 
      map: map, 
      title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og ' 
     }); 
     markers.push(marker3) 

     var marker4 = new google.maps.Marker({ 
      position: { lat: 55.56169, lng: 8.13126 }, 
      label: "3", 
      map: map, 
      title: 'Dette skønne feriehus fremstår utroligt flot' 
     }); 
     markers.push(marker4) 

     var marker5 = new google.maps.Marker({ 
      position: { lat: 55.5560563333123, lng: 8.12075257301331 }, 
      label: "4", 
      map: map, 
      title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur' 
     }); 
     markers.push(marker5) 

     var marker6 = new google.maps.Marker({ 
      position: { lat: 55.55282, lng: 8.12843 }, 
      label: "5", 
      map: map, 
      title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca' 
     }); 
     markers.push(marker6) 
    } 





     //jQuery style entry point, change if necessary 
     $(document).ready(function(){ 
      initMap(); 
      initMarkers(); 

      for(var i in markers) 
      { 
      bound.extend(markers[i].getPosition()); 
      } 
      map.fitBounds(bound); 
     }); 


</script>