I want to show multiple locations on a Google map, but it gives the error

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

However it works for a single location.

My 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.
    });

I want to show multiple locations on a Google map, but it gives the error

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

However it works for a single location.

My 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.
    });

• javascript
• php
• google-maps

• Please provide a Minimal, Complete, Tested and Readable example that demonstrates the issue (without the PHP). – geocodezip Commented May 2, 2016 at 14:27
• There is no bounds defined in the posted code (actually, there is, but it is an array, not a google.maps.LatLngBounds object. – geocodezip Commented May 2, 2016 at 14:28

2 Answers 2

You are shadowing the map variable since you have 2 times the var map declaration. Remove the var inside the initMap() function.

Your map is local to the initMap function. The call to map.fitBounds should also be inside that function.

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