Centering Custom Google Map Pins

Hi All,

I am having some big trouble trying to get my custom google map pins centered, and zoomed-in to show them all at the same time.

Can anyone perhaps spot why this isn't working!?

Here is the code below:

Thanks !!!

var scriptFolder = location.pathname.substr(0, location.pathname.lastIndexOf('/') + 1);
    var marker = [];
    var map;
    var lastZoom = 3;
    var lastSizeW = 40;
    var lastSizeH = 30;

    function initialize() {
        var styles = [
            {"elementType": "geometry", "stylers": [{"visibility": "no"}]}, {"elementType": "labels", "stylers": [{"visibility": "no"}]}, {"stylers": [{"color": "#ffffff"}, {"visibility": "yes"}]}, {}
                    ];
        var styledMap = new google.maps.StyledMapType(styles);
        var centerlatlng = new google.maps.LatLng(0, 0);
        var myOptions = {
            zoom: 3
            , center: centerlatlng
            , styles: styles
            , panControl: true
            , zoomControl: false
            , mapTypeControl: false
            , scaleControl: false
            , streetViewControl: false
            , overviewMapControl: false
            , rotateControl: true
            , disableDefaultUI: true
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        var zoomControlDiv = document.createElement('div');
        var zoomControl = new ZoomControl(zoomControlDiv, map);
        var image_bar = document.getElementById("pin_image_bar");
        zoomControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(image_bar);
        createMarker();
        google.maps.event.addDomListener(map, 'zoom_changed', function () {
            var zoom = map.getZoom();
            if (zoom > lastZoom) {
                lastSizeW = lastSizeW + 40;
                lastSizeH = lastSizeH + 30;
                for (i in marker) {
                    var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));
                    marker.setIcon(image);
                }
            }
            else {
                if (lastSizeW != 40 && lastSizeH != 30) {
                    lastSizeW = lastSizeW - 40;
                    lastSizeH = lastSizeH - 30;
                }
                for (i in marker) {
                    var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));
                    marker.setIcon(image);
                }
            }
            lastZoom = zoom;
        });
        $('#map').children().closest('div').append(' <video loop="" autoplay="" poster="image_xi_logo_01.png" style="position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;opacity:0.7;"><source src="video_xi_bg_05a.webm" type="video/webm"> </video>');
  $('.gm-style').children().children().closest('div').addClass('pins');
    }

  
    function createMarker() {
        var bounds = new google.maps.LatLngBounds();
        for (i in pins) {
            var position = new google.maps.LatLng(pins.Lat, pins.Lng);
            var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(lastSizeW, lastSizeH));
            marker = new google.maps.Marker({
                map: map
                , title: pins.Name
                , position: position
                , icon: image
            });
            /*var content = '<div id="iw-container">';
            content += '<div class="iw-title">'+pins.Info.Title+'</div>';
            content += '<div class="iw-content">';
            content += '<div class="iw-subTitle">'+pins.Info.Content.Title+'</div>';
            content += '<img src="images/'+pins.Image+'" alt="'+pins.Info.Title+'" height="115" width="83">';
            content += '<p>'+pins.Info.Content.Detail+'</p>';
            content += '</div>';
            content += '<div class="iw-bottom-gradient"></div>';
            content += '</div>';*/
            bounds.extend(marker.getPosition());
            marker.pinDetail = pins;
                    google.maps.event.addListener(marker, 'click', function () {
                $("#pname").html(this.pinDetail.Name);
                var image = "<img src='" + this.pinDetail.Image + "' style='visibility:visible;'/>"
                $("#pimage").html(image);
                $("#ptitle").html(this.pinDetail.Info.Title);
                $("#pcontent").html(this.pinDetail.Info.Content);
                document.getElementById('pin_image_bar').style.display='';
                document.getElementById('overlay').style.display='';
                $('#overlay').show();
                $('#pin_image_bar').show();
            });
        }

    }
    function ZoomControl(controlDiv, map) {}

Code (markup):

 

i've just answered my own question by adding directly after "var bounds = new google.maps.LatLngBounds();" the following:

map.fitBounds(bounds);  
map.panToBounds(bounds);  

Code (markup):