Google Maps v3 getBoundsZoomLevel

by john_s

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<script src="https://rawgithub.com/luis-almeida/jPages/master/js/jPages.min.js"></script>
<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>
<div id="infoWindowContentWrapper">
    <div id="infoWindowContent">
        <ul id="pageList">
            <li>Page 1</li>
            <li>Page 2</li>
            <li>Page 3</li>
            <li>Page 4</li>
            <li>Page 5</li>
            <li>Page 6</li>
            <li>Page 7</li>
            <li>Page 8</li>
            <li>Page 9</li>
        </ul>
        <div class="holder"></div>
    </div>
</div>

CSS

#infoWindowContent {
    width: 300px;
    height: 100px;
}
#pageList {
    margin: 0;
    padding: 4px 0 20px 0;
}
#pageList li {
    display: block;
    list-style-type: none;
    margin-left: 0;
}
.holder {
    margin:15px 0;
}
.holder a {
    font-size:12px;
    cursor:pointer;
    margin:0 5px;
    color:#333;
}
.holder a:hover {
    background-color:#222;
    color:#fff;
}
.holder a.jp-previous {
    margin-right:15px;
}
.holder a.jp-next {
    margin-left:15px;
}
.holder a.jp-current,a.jp-current:hover {
    color:#FF4242;
    font-weight:bold;
}
.holder a.jp-disabled,a.jp-disabled:hover {
    color:#bbb;
}
.holder a.jp-current,a.jp-current:hover,.holder a.jp-disabled,a.jp-disabled:hover {
    cursor:default;
    background:none;
}
.holder span {
    margin: 0 5px;
}

JavaScript

function createMarkerForPoint(point) {
    return new google.maps.Marker({
        position: new google.maps.LatLng(point.lat, point.lng)
    });
}
var $mapDiv = $('#mapDiv'),
    $infoWindowContent = $('#infoWindowContent'),
    $pages = $infoWindowContent.children('ul').children('li');

$('.holder').jPages({
    containerID: 'pageList',
    perPage: 1,
    midRange: 3,
    keyBrowse: true,
    scrollBrowse: true
});

$('#infoWindowContentWrapper').hide();

var point = { lat: 36.170603, lng: -114.577065 };

var map = new google.maps.Map($mapDiv[0], {
    center: new google.maps.LatLng(point.lat, point.lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
});

var infoWindow = new google.maps.InfoWindow();

var marker = createMarkerForPoint(point);
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent($infoWindowContent[0]);
    infoWindow.open(map, marker);
});

marker.setMap(map);