Center Map with Multiple Markers

Question

Good afternoon, everyone!

I’m developing a system, but I’ll need to use Geolocation to pick up the user’s location, and show the points next to it, so that’s okay, but when I put a marker in another state, it zooms in too big to grab all the markers, I’d like it to be centered and zoomed in at the top 15 of my current position. I wonder if I could. Thank you in advance

var locations = [
    ['Estádio Mineirão', 'Av. Antônio Abrahão Caran, 1001 - São José, Belo Horizonte - MG, 31275-000, Brasil'],
    ['Estádio Independência', 'R. Pitangui, 3230 - Horto, Belo Horizonte - MG, 31110-732, Brasil', '#'],
    ['Estádio Maracanã', 'Av. Pres. Castelo Branco, s/n - Maracanã, Rio de Janeiro - RJ, 20271-130, Brasil', '#'],
	['Arena da Baixada', 'R. Buenos Aires, 1260 - Água Verde, Curitiba - PR, 80250-070, Brasil', '#']
];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng("-19.94370498", "-44.0317787"),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {


        geocodeAddress(locations, i);
    }
		
}



google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: 'http://upcomunicacaovisual.com.br/modelos/imagem/up.png',
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

function infoWindow(marker, map, title, address, url) {
    google.maps.event.addListener(marker, 'click', function () {
        var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>Ver Perfil</a></p></div>";
        iw = new google.maps.InfoWindow({
            content: html,
            maxWidth: 350
        });
        iw.open(map, marker);
    });
}

function createMarker(results) {
    var marker = new google.maps.Marker({
        icon: 'http://upcomunicacaovisual.com.br/modelos/imagem/up.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
    })
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    infoWindow(marker, map, title, address, url);
    return marker;
}

    html{ margin:0; padding:0; height:100%; width:100%}
    body{ margin:0; padding:0; height:100%; width:100%}			
	#map_canvas { height: 100%;  width: 100%; }

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="teste.js" type="text/javascript"></script>
<div id="map_canvas" ></div>

Answer 1

The question is old, but can still be useful to someone.

Simply remove the references from Bounds(which are the limits) at the beginning:

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

And also within the loop, since the variable no longer exists:

//bounds.extend(marker.getPosition());
//map.fitBounds(bounds);