API do Google Map v3 - defina limites e centro

303

Recentemente, mudei para a API do Google Maps V3. Estou trabalhando em um exemplo simples que plota marcadores de uma matriz, no entanto, não sei como centralizar e aplicar zoom automaticamente em relação aos marcadores.

Pesquisei na rede alta e baixa, incluindo a documentação do Google, mas não encontrei uma resposta clara. Eu sei que poderia simplesmente fazer uma média das coordenadas, mas como eu definiria o zoom de acordo?

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));


      var lat = map.getCenter().lat(); 
      var lng = map.getCenter().lng();      


  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
Michael Bradley
fonte

Respostas:

423

Sim, você pode declarar seu novo objeto de limites.

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

Em seguida, para cada marcador, estenda seu objeto de limites:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API: google.maps.LatLngBounds

spencercooly
fonte
42
você também pode adicionar este map.setCenter (bounds.getCenter ());
Raman Ghai
Tanto a resposta quanto o comentário de Raman ajudaram a diminuir meu foco no que eu precisava.
amigos estão dizendo sobre joão pessoa
@ Sam152: você pode estar interessado em uma recompensa de 500 representantes para uma pergunta relacionada .
Dan Dascalescu 28/03
185

Tenho tudo ordenado - veja as últimas linhas do código - ( bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}
Michael Bradley
fonte
7
Obrigado! Os documentos 3.0 são surpreendentemente vagos sobre onde foi essa funcionalidade.
Bill
12
Os documentos 3.0 são surpreendentemente vagos sobre onde muitas coisas foram. :( #
Scott
5
Desculpe, este local está errado. É para ser um comentário para a resposta selecionada. Mas a função de extensão não precisa estar dentro do seu loop for?
kidbrax
1
Olá, ótimo código, mas esse código poderia ser aprimorado para evitar "nenhuma imagem disponível neste nível de zoom". porque esse código não cuida do nível de zoom, com certeza mostra todos os marcadores, mas, pessoalmente, eu prefiro ver um zoom menor para evitar as mensagens "sem imagens ...". Alguma ideia por favor?
slah
São estes "bounds.extend (myLatLng); map.fitBounds (limites);" disponível para Android também?
lionfly
5

Minha sugestão para o Google Maps api v3 seria (não pense que isso pode ser feito com mais eficiência):

gmap : {
    fitBounds: function(bounds, mapId)
    {
        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    }
}

No resultado, você ajustará todos os pontos em limites na janela do mapa.

Exemplo funciona perfeitamente e você pode livremente vê-lo aqui www.zemelapis.lt

horário local
fonte
Em vez de retornar falsese boundsestiver null, você poderia maps[ mapId ].getBounds().
Kaiser
@localtime na verdade, o seu site precisa de chaves API do Google Maps para o trabalho
1

As respostas são perfeitas para ajustar os limites do mapa para marcadores, mas se você deseja expandir os limites do Google Maps para formas como polígonos e círculos, pode usar os seguintes códigos:

For Circles

bounds.union(circle.getBounds());

Para polígonos

polygon.getPaths().forEach(function(path, index)
{
    var points = path.getArray();
    for(var p in points) bounds.extend(points[p]);
});

Para retângulos

bounds.union(overlay.getBounds());

Para Polilinhas

var path = polyline.getPath();

var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();

for(var i = 1; i < path.getLength(); i++)
{
    var e = path.getAt(i);
    slat = ((slat < e.lat()) ? slat : e.lat());
    blat = ((blat > e.lat()) ? blat : e.lat());
    slng = ((slng < e.lng()) ? slng : e.lng());
    blng = ((blng > e.lng()) ? blng : e.lng());
}

bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));
Hossein
fonte
-1

O método setCenter () ainda é aplicável à versão mais recente da API do Google Maps para Flash, onde fitBounds () não existe.

Sebastien
fonte
-15

Use abaixo de um,

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (limites));

Khayer
fonte
12
Isto é para a API do Google Maps v2
dave1010
Você precisa fornecer uma solução mais pensada. E acredito que seja para o Google Maps v2.
AllJs