Включать открытые информационные окна в пределах карты при использовании fitbounds

Question

У меня есть карта, которая содержит несколько маркеров с информационными окнами.Информационные окна должны быть открыты при загрузке страницы.Карта центрируется с использованием setbounds для включения всех маркеров, что работает, но также необходимо включить информационные окна в границы.В настоящее время информационные окна местами обрезаны.

JS:

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284)
    var contentString1 = '<div class="map-content"><p>Test1<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {infowindow1.open(map,marker1);});
    infowindow1.open(map,marker1);
    bounds.extend(myLatlng1);

    var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729)
    var contentString2 = '<div class="map-content"><p><br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {infowindow2.open(map,marker2);});
    infowindow2.open(map,marker2);
    bounds.extend(myLatlng2)

    //  Fit these bounds to the map
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

CSS:

#map-canvas { width: 100%; height: 520px; }

Вы можете увидеть скрипку здесь: http://jsfiddle.net/mKKVM/

Кто-нибудь может подсказать, как разместить infowindows внутри границ?

Answer 1

Доказательство концепции jsfiddle

1. Отображать карту в обычном режиме
2. Вычислите расстояние в пикселях от привязки маркера до верхнего края информационного окна
3. Вычислите расстояние в пикселях от привязки маркера до левого края информационного окна
4. Вычислите расстояние в пикселях от привязки маркера до правого края информационного окна
5. Расширьте исходные границы двумя точками, сделанными от правого угла границ плюс половина ширины информационного окна и верхняя часть границ плюс высота информационного окна.
6. Расширьте исходные границы двумя точками, сделанными от левого угла границ минус половина ширины информационного окна и верхняя часть границ плюс высота информационного окна.
7. подгоните карту к новым границам.

Вероятно, можно доработать, чтобы использовать 3 точки - верхний центр, левый центр и правый центр, это первый разрез, подтверждение концепции, вероятно, можно почистить и доработать.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'));
  var projection = null; 
  google.maps.event.addListener(map,'projection_changed', function() {
    projection = map.getProjection();
  }); 

  var bounds = new google.maps.LatLngBounds();
  if (!projection) 
    google.maps.event.addListener(map, 'idle', computeBounds);
  else 
    computeBounds();

  var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284);
  bounds.extend(myLatlng1);
  var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729);
  bounds.extend(myLatlng2);
  //  Fit these bounds to the map
  map.fitBounds(bounds);

  function computeBounds() {    

    var contentString1 = '<div class="map-content"><p>Test1<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {
      infowindow1.open(map,marker1);
    });
    infowindow1.open(map,marker1);
    google.maps.event.addListenerOnce(infowindow1,'domready',calcInfoWindowBounds); 

    var contentString2 = '<div class="map-content"><p><br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map,marker2);
    });
    infowindow2.open(map,marker2);

    google.maps.event.addListenerOnce(infowindow2,'domready',calcInfoWindowBounds); 

    function calcInfoWindowBounds(){
      domEls = document.getElementsByClassName('map-content');
      var markerSpace = 32+8;
      var maxTop = 0;
      var maxLeft = 0;
      var maxRight = 0;
      for (var i=0; i<domEls.length; i++) {
        var topOfWindow = domEls[i].offsetHeight + markerSpace;
        var leftOfWindow = domEls[i].offsetWidth/2;
        var rightOfWindow = domEls[i].offsetWidth/2;

        if (topOfWindow > maxTop) maxTop = topOfWindow;
        if (leftOfWindow > maxLeft) maxLeft = leftOfWindow;
        if (rightOfWindow > maxRight) maxRight = rightOfWindow;
      }

      var leftBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouththWest().lng()));
      var rightBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast()));
      var topBounds0 = rightBounds.y + maxTop;
      var rightBounds0 = rightBounds.x + maxRight;
      var leftBounds0 = leftBounds.x - maxLeft;
      bounds.extend(projection.fromPointToLatLng(leftBounds0,topBounds0));
      bounds.extend(projection.fromPointToLatLng(rightBounds0,topBounds0));
      map.fitBounds(bounds);
    }   

  }

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