javascript - icon - Google Map API v3-establece límites y centro

google.maps.marker example

Question

Recientemente he cambiado a Google Maps API V3. Estoy trabajando en un ejemplo simple que traza marcadores de una matriz, sin embargo, no sé cómo centrar y ampliar automáticamente con respecto a los marcadores.

He buscado en la red alta y baja, incluida la documentación propia de Google, pero no he encontrado una respuesta clara. Sé que simplemente podría tomar un promedio de las coordenadas, pero ¿cómo puedo configurar el zoom en consecuencia?

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]
    });
  }
}

Answer 1

El método setCenter () sigue siendo aplicable para la última versión de Maps API for Flash donde fitBounds () no existe.

Answer 2

Las respuestas son perfectas para ajustar los límites de los mapas para los marcadores, pero si desea ampliar los límites de Google Maps para formas como polígonos y círculos, puede usar los siguientes códigos:

Para circulos

bounds.union(circle.getBounds());

Para poligonos

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

Para rectángulos

bounds.union(overlay.getBounds());

Para polilíneas

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));

Answer 3

Lo tengo todo ordenado: vea las últimas líneas para el 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);
}

Answer 4

Mi sugerencia para google maps api v3 sería (no creo que se pueda hacer de manera más eficiente):

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);
    }
}

En el resultado, se ajustarán todos los puntos dentro de los límites de la ventana del mapa.

El ejemplo funciona a la perfección y se puede consultar libremente aquí www.zemelapis.lt

Answer 5

Sí, simplemente declare su nuevo objeto de límites.

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

Luego para cada marcador, extiende tu objeto de límites:

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

API: google.maps.LatLngBounds

Answer 6

Use debajo de uno,

map.setCenter (fronteras.getCenter (), map.getBoundsZoomLevel (límites));