Google Maps Api Version 3 Auto-Zoom

Question

I have a Problem i am a beginner in Google Maps and not really good in Java Script but in PHP. Is there a possibel Solution for an "Auto-Zoom" Function. I have different Markers on my Map an i want to Zoom automaticcaly to the level that every Marker is Visibel ?

Is there any Solution Please Help me !

Ok This is my Script:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCxuRdCmN2BO5PD7kwI0mO8JflcUOF4CtI&sensor=true">

</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.903033, 10.496063),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        var markerBounds = new google.maps.LatLngBounds();
        var contentString;
        <? php
        $i = 1;
        foreach($FertigID as $ID) {
            $result = mysql_query("SELECT * FROM Daten_CH WHERE ID = ".$ID."");
            while ($Ergebnisse = mysql_fetch_array($result)) { // Werden alle ergebnisse (ID´s) in einen Array geschriebenn 
                if (isset($Ergebnisse["GIS_y"]) && $Ergebnisse["GIS_y"] != "" && $Ergebnisse["GIS_y"] != " ") { ?> contentString = '<a href="Change.php?ID=<?php echo $ID; ?>"><input type="button" value="BEARBEITEN"></button></a>';
    var Position = new google.maps.LatLng( <? php echo $Ergebnisse["GIS_y"]; ?> , <? php echo $Ergebnisse["GIS_x"]; ?> );
                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                    var marker <? php echo $i; ?> = new google.maps.Marker({
                        position: Position,
                        map: map,
                        title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
                    });
                    google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function() {
                        infowindow.open(map, marker <? php echo $i; ?> );
                    });
                    <? php
                }
            }

            $i++;

        } ?>
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

What you want to do, is create a LatLngBounds object, use its extend method to extend the bounds with your markers (using LatLng objects), then use the fitBounds (or panToBounds if you want animation) of the Map object and the map will auto zoom to a position where it will show all your markers.

Here's some basic pseudocode:

// You create your map. You have to do this anyway :)
// The Map object has a lot of options, you specify them according to your needs.
var map = new google.maps.Map(document.getElementById('map'), {
    'param1': 'value1',
    'param2': 'value2'
});

// Create a new LatLngBounds object
var markerBounds = new google.maps.LatLngBounds();

// Add your points to the LatLngBounds object.
foreach(marker in markers) {
    var point = new google.maps.LatLng(marker.lat, marker.lng);
    markerBounds.extend(point);
}

// Then you just call the fitBounds method and the Maps widget does all rest.
map.fitBounds(markerBounds);

Here's your code:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCxuRdCmN2BO5PD7kwI0mO8JflcUOF4CtI&sensor=true">

</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.903033, 10.496063),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

        var markerBounds = new google.maps.LatLngBounds();

        var contentString;
        <? php
        $i = 1;
        foreach($FertigID as $ID) {
            $result = mysql_query("SELECT * FROM Daten_CH WHERE ID = ".$ID."");
            while ($Ergebnisse = mysql_fetch_array($result)) { // Werden alle ergebnisse (ID´s) in einen Array geschriebenn 
                if (isset($Ergebnisse["GIS_y"]) && $Ergebnisse["GIS_y"] != "" && $Ergebnisse["GIS_y"] != " ") { ?> contentString = '<a href="Change.php?ID=<?php echo $ID; ?>"><input type="button" value="BEARBEITEN"></button></a>';
    var Position = new google.maps.LatLng( <? php echo $Ergebnisse["GIS_y"]; ?> , <? php echo $Ergebnisse["GIS_x"]; ?> );
                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                    var marker <? php echo $i; ?> = new google.maps.Marker({
                        position: Position,
                        map: map,
                        title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
                    });

                    markerBounds.extend(Position); // you call this method for each Position (LatLng object)

                    google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function() {
                        infowindow.open(map, marker <? php echo $i; ?> );
                    });
                    <? php
                }
            }

            $i++;

        } ?>
        map.fitBounds(markerBounds); // Then you call this method here.
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>