Question

I’m horrible at javascript and debugging (php is a fav). I dynamically generate a list to show on the map and now I need to find the center of the coordinates, and zoom out to show all of them. Here is the code I use, found from another SO member.

    var map = null;
    var markerArray = []; //create a global array to store markers
    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
        ['Coogee Beach', -33.923036, 151.259052, 5, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png'],
        ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red03.png'],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red02.png'],
        ['Maroubra Beach', -33.950198, 187.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

    function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-33.80010128657071, 151.28747820854187),
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });

        // Add markers to the map
        // Set up markers based on the number of elements within the myPoints array
        for (var i = 0; i < locations.length; i++) {
            createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
        }

        mc.addMarkers(markerArray, true);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        markerArray.push(marker); //push local var marker into global array
    }

    window.onload = initialize;

It appears this is the functionality needed (found in the answer) Google Maps API: Calculate Center/Zoom of Polyline
but I don’t know how to implement it.

Answer 1

Try working that solution into your initialize function like this:

function initialize() {

    ...

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

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // instantiate the bounds object
    var bounds = new google.maps.LatLngBounds();

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for (var i = 0; i < locations.length; i++) {
        var locationLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);

        createMarker(locationLatLng,
                     locations[i][0], 
                     locations[i][3], 
                     locations[i][4]);

        bounds.extend(locationLatLng);
    }

    map.fitBounds(bounds);

    ...
}

Hope this helps