Incluya Infowindows abiertos dentro de los límites del mapa, al usar FitBounds
-
20-12-2019 - |
Pregunta
Tengo un mapa que contiene múltiples marcadores con inquietud.Los Infowindows deben estar abiertos en la carga de la página.El mapa está siendo centrado usando SetBounds para incorporar a todos los marcadores, que funciona, pero también debe incluir los Infowindows dentro de los límites.Actualmente los inquietud están recortados en lugares.
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; }
Puede ver un violín aquí: http://jsfiddle.net/mkkvm/
¿Puede alguien sugerir cómo obtener las infawindas dentro de los límites?
Solución
Prueba de concepto jsfiddle
- Mostrar el mapa normalmente
- Calcule la distancia de píxeles del ancla del marcador al borde superior del Infowindow
- Calcule la distancia de píxeles desde el ancla del marcador hasta el borde izquierdo del Infowindow
- Calcule la distancia de píxeles del ancla del marcador al borde derecho del Infowindow
- Extienda los límites originales con dos puntos hechos de la esquina derecha de los límites más la mitad del ancho del Infowindow y la parte superior de los límites más la altura del Infowindow.
- Extienda los límites originales con dos puntos hechos de la esquina izquierda de los límites menos la mitad del ancho del Infowindow y la parte superior de los límites más la altura del Infowindow.
- Coloque el mapa a los nuevos límites.
Probablemente se puede refinar para usar 3 puntos Centro superior, centro izquierdo y centro derecho, este es un primer corte, prueba de concepto, probablemente se puede limpiar y refinar.
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);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow