Google Maps v3 getBoundsZoomLevel

by john_s

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>
<div id="infoWindowContentWrapper" style="display: none;">
    <div id="infoWindowContent">
        <ul class="pages">
            <li>Page 1</li>
            <li>Page 2</li>
            <li>Page 3</li>
            <li>Page 4</li>
        </ul>
        <button type="button" id="prevBtn">Prev</button>
        <button type="button" id="nextBtn">Next</button>
    </div>
</div>

CSS

#infoWindowContent {
    width: 260px;
    height: 70px;
}
ul.pages {
    margin: 0;
    padding: 4px 0 20px 0;
}
ul.pages li {
    display: block;
    list-style-type: none;
}

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');

function changePage($fromPage, $toPage) {
    $fromPage.removeClass('active').hide();
    $toPage.addClass('active').show();
}

$('#prevBtn').click(function() {
    var $activePage = $pages.filter('.active'),
        $prevPage = $activePage.prev();
    if ($prevPage.length == 0) { $prevPage = $pages.last() }
    changePage($activePage, $prevPage);
});

$('#nextBtn').click(function() {
   var $activePage = $pages.filter('.active'),
        $nextPage = $activePage.next();
    if ($nextPage.length == 0) { $nextPage = $pages.first() }
    changePage($activePage, $nextPage);
});

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() {
    $pages.first().addClass('active').show().siblings().removeClass('active').hide();
    infoWindow.setContent($infoWindowContent[0]);
    infoWindow.open(map, marker);
});

marker.setMap(map);