Google Map fitbounds error (cannot read property e3)

Question

I'm pretty new to fit bounds with json points and I am struggling with centering the map based on the current points.

My latest fiddle: http://jsfiddle.net/inkedraskal/3fchn090/9/

any references or tips would be greatly appreciated.

my current js is as follow:

(function() {

    window.onload = function() {
        var start_point = new google.maps.LatLng(0, 0);

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: start_point,
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        // Creating the JSON data
        var json = [
            {
                "title": "Stockholm",
                "lat": 59.3,
                "lng": 18.1,
                "description": "<strong>Stockholm</strong> is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
            },
            {
                "title": "Oslo",
                "lat": 59.9,
                "lng": 10.8,
                "description": "<strong>Oslo</strong> is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
            },
            {
                "title": "Copenhagen",
                "lat": 55.7,
                "lng": 12.6,
                "description": "<strong>Copenhagen</strong> is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
            }
        ]

        // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();

        function setMarkerPoints(map){
            var bounds = new google.maps.LatLngBounds();
            // Looping through the JSON data
            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i],
                    latLng = new google.maps.LatLng(data.lat, data.lng);

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });

                // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
                (function(marker, data) {

                    var windowContent = '<h3>'+ data.title +'</h3>'+
                                        '<p>'+ data.description + '</p>'
                    console.log(windowContent);

                    // Attaching a click event to the current marker
                    //google.maps.event.addListener(marker, "click", function(e) {
                        //infoWindow.setContent(data.title + data.description);
                    //  infoWindow.setContent(windowContent);
                    //    infoWindow.open(map, marker);
                    //});
                    infobox = new InfoBox({
                        content: infoWindow.setContent(windowContent),
                        alignBottom: true,
                        pixelOffset: new google.maps.Size(-160, -45)
                    });

                    google.maps.event.addListener(marker, 'click', function () {

                        // Open this map's infobox
                        infobox.open(map, marker);
                        infobox.setContent(windowContent);
                        map.panTo(marker.getPosition());
                        infobox.show();
                    });
                    google.maps.event.addListener(map, 'click', function () {
                        infobox.setMap(null);
                    });


                })(marker, data);
                //END MARKER DATA

            }
            // end loop through json
            bounds.extend(start_point);
            map.setCenter(start_point);
            map.fitBounds(bounds);
        }

        setMarkerPoints();



    }

})();

Answer 1

1. put the bounds.extend call inside the marker loop and add all the positions of the markers to it:

bounds.extend(marker.getPosition());

2. you have a typo in the call to setMarkers, you need to pass the map into that function:

setMarkerPoints(map);

updated fiddle

code snippet:

(function() {

  window.onload = function() {
    var start_point = new google.maps.LatLng(0, 0);

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
      center: start_point,
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    // Creating the JSON data
    var json = [{
      "title": "Stockholm",
      "lat": 59.3,
      "lng": 18.1,
      "description": "<strong>Stockholm</strong> is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
    }, {
      "title": "Oslo",
      "lat": 59.9,
      "lng": 10.8,
      "description": "<strong>Oslo</strong> is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
    }, {
      "title": "Copenhagen",
      "lat": 55.7,
      "lng": 12.6,
      "description": "<strong>Copenhagen</strong> is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
    }];

    // Creating a global infoWindow object that will be reused by all markers
    var infoWindow = new google.maps.InfoWindow();

    function setMarkerPoints(map) {
      var bounds = new google.maps.LatLngBounds();
      // Looping through the JSON data
      for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
          latLng = new google.maps.LatLng(data.lat, data.lng);

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: data.title
        });

        // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
        (function(marker, data) {

          var windowContent = '<h3>' + data.title + '</h3>' +
            '<p>' + data.description + '</p>';
          console.log(windowContent);

          // Attaching a click event to the current marker
          infobox = new InfoBox({
            content: infoWindow.setContent(windowContent),
            alignBottom: true,
            pixelOffset: new google.maps.Size(-160, -45)
          });

          google.maps.event.addListener(marker, 'click', function() {

            // Open this map's infobox
            infobox.open(map, marker);
            infobox.setContent(windowContent);
            map.panTo(marker.getPosition());
            infobox.show();
          });
          google.maps.event.addListener(map, 'click', function() {
            infobox.setMap(null);
          });
        })(marker, data);
        //END MARKER DATA
        bounds.extend(marker.getPosition());
      }
      // end loop through json

      map.setCenter(start_point);
      map.fitBounds(bounds);
    }
    setMarkerPoints(map);
  };
})();

html,
body {
  height: 100%;
  width: 100%;
}
#map {
  display: block;
  height: 100%;
}
.infoBox {
  max-width: 300px;
  background: #fff;
  padding: 10px;
  border: 1px solid red; //so pilot red
  img {
    border: 1px solid yellow;
  }
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>

Answer 2

Heres a function from a previous project I worked on with quick adjustments for your code

function recenterMap(map, json) {
    map.bounds = new google.maps.LatLngBounds();
    for (var i = 0, length = json.length; i < length; i++) {
        var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
        map.bounds.extend(latLng);
        map.fitBounds(map.bounds);
    };
}