1

Gostaria de uma ajudinha se possível.

Estou desenvolvendo um site, e implementando funções do Google Maps V3 Javascript, mas não encontrei em nenhuma documentação sobre como centralizar o mapa contendo 2 ou mais marcadores.

Não centralizar em 1 (um) marcador, mas centralizar nos marcadores por igual, aplicando o zoom automaticamente, etc...

Acho que deixei bem explicado, se alguém puder me ajudar agradeço...

ATUALIZAÇÃO

Encontrei a resposta no link que o amigo luciorubeens deixou nos comentários... https://stackoverflow.com/questions/15719951/google-maps-api-v3-auto-center-map-with-multiple-markers

1
  • Mesma dúvida respondida no SOEn, talvez lhe ajude 29/01/2015 às 9:53

1 Resposta 1

2

Ao invés de utilizar dois pontos ou mais, use o LatLngBounds() para centralizar o mapa.

API-

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

-js

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(45.4555729, 9.169236),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        panControl: true,
        mapTypeControl: false,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: false,
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };
    var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);



    var Item_1 = new google.maps.LatLng(45.5983128, 8.9172776);

    var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

    var marker = new google.maps.Marker({
        position: Item_1,
        map: map
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    var bounds = new google.maps.LatLngBounds();
    bounds.extend(myPlace);
    bounds.extend(Item_1);
    map.fitBounds(bounds);

}
initialize();

-css

#mapCanvas{width:500px;height:300px;}

html -

<div id="mapCanvas"></div>

VEJA FUNCIONANDO: http://jsfiddle.net/gaby/22qte/

4
  • Lollipop, tomei a liberdade de trazer o código do JSFiddle para cá, para evitar comprometer sua resposta caso o serviço fique offline. Você pode reverter a qualquer momento. 29/01/2015 às 14:24
  • @rrnan, tentei executar, mas não consegui. E pra mim ainda está off.
    – Lollipop
    29/01/2015 às 14:26
  • Que estranho, aqui está funcionando normalmente: Imagem. 29/01/2015 às 14:27
  • amigos... nao funciona... o link correto para o fiddle eh : VEJA FUNCIONANDO: jsfiddle.net/gaby/22qte 28/06/2017 às 2:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .