Uncaught Typeerror: kann Eigenschaft ‚fitBounds‘ undefinierter mit google map (markerWithlabel js)

Question

ich mehrere Standorte auf einer Google-Karte angezeigt werden soll, lesen, aber es gibt den Fehler

"Uncaught TypeError: Cannot read property 'fitBounds' of undefined"

aber es für ein einzelnes Werk Lage.

Mein JavaScript

jQuery(document).ready(function($) { 

    var map; 
    var bounds = []; 



function initMap() { 

     var latlng = new google.maps.LatLng(<?php echo $map_lat;?>,<?php echo $map_lng;?>); 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
         zoom: 10, 
         center: latlng 
        }); 

     var marker = new MarkerWithLabel({ 
         position:latlng, 
         draggable: false, 
         raiseOnDrag: true, 
         map:map, 
         labelContent:"test", 
         labelAnchor: new google.maps.Point(22, 0), 
         labelClass: "labels", // the CSS class for the label 
         labelStyle: {opacity: 0.75} 
        }); 

    bound.push(marker); 

} 


    google.maps.event.addDomListener(window, 'load', initMap()); 
     map.fitBounds(bounds); //binding all location on the map. 
    }); 

Answer 1

Sie die map Variable Shadowing, da Sie 2 mal haben die var map Erklärung. Entfernen Sie die var innerhalb der initMap() Funktion.

Answer 2

Ihre map ist lokal auf die initMap Funktion. Der Anruf an map.fitBounds sollte auch innerhalb dieser Funktion sein.

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 

    <?php 

    /* fetch all location to display on map */ 
    foreach($locations as $location){ 
         $name = $location['location_name']; 
         $addr = $location['location_address']; 
         $map_lat = $location['google_map']['lat']; 
         $map_lng = $location['google_map']['lng']; 
         $title = $location["title"]; 
        ?> 
function initMap() { 
    <?php 

if(!empty($map_lat)){ 
    ?> 
       var latlng = new google.maps.LatLng(<?php echo $map_lat;?>,<?php echo $map_lng;?>); 
      var map = new google.maps.Map(document.getElementById('map_canvas'), { 
         zoom: 10, 
        center: latlng 
        }); 
      var marker = new MarkerWithLabel({ 
        position:latlng, 
        draggable: false, 
        raiseOnDrag: true, 
        map:map, 
        labelContent:"test", 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "labels", // the CSS class for the label 
        labelStyle: {opacity: 0.75} 
      }); 
    bounds.extend(latlng); 
     <?php } ?> 
    map.fitBounds(bounds); //binding all location on the map. 

    } 
<?php } ?> 
    google.maps.event.addDomListener(window, 'load', initMap()); 
});  
</script>