2016-08-06 5 views
-1

Ich habe versucht, Anweisungen für Autozoom auf Google Maps zu folgen, so dass es immer zu den Markierungen auf den Karten passt. Aber ich kann es nicht zur Arbeit bringen. Kann jemand sehen, was mit meinem Code falsch ist?Autozoom zum Einfügen von Markern in Google Maps V3

<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> 

Jede Hilfe wird sehr geschätzt!

+1

alle Marker haben den gleichen Namen, du jemals sie nicht in der Marker-Array setzen. – geocodezip

Antwort

4
  1. Alle Ihre Marker haben den gleichen Namen.
  2. Sie setzen sie nie in das Marker-Array.
  3. initMarkers existiert nicht.

proof of concept fiddle

Code-Schnipsel:

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>

2

Die Marker wurden nicht zum Marker-Array hinzugefügt und Sie haben daher über ein leeres Array iteriert. Sie müssen die Markierungen zum Array hinzufügen. Auch Sie hatten allen Markern den gleichen Namen gegeben. Hier finden Sie den festen Code.

<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>