Geek Answers Handbook

Enable open info windows within the map, when using appropriate

I have a map containing several markers with info windows. Info windows should be open when the page loads. The map is centered using setbounds to include all the tokens that work, but you also need to enable infowindows within. Info windows are currently cropped in places.

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

Here you can see the fiddle: http://jsfiddle.net/mKKVM/

Can anyone suggest how to get infowindows inside borders?

Thanks guys.

+6
source share
1 answer

Jsfiddle proof concept

  • Map display usually
  • Calculate the distance between pixels from the marker anchor to the top edge of the info window
  • Calculate the distance between pixels from the marker anchor to the left edge of the info window
  • Calculate the distance between the pixels from the marker snap to the right edge of the info window
  • Extend the original borders with two points made from the right corner of the borders, plus half the width of the infowindow window and the upper border, as well as the height of the information window.
  • Extend the original borders with two points made from the left corner of the borders, minus half the width of the infowindow window and the upper border, as well as the height of the infowindow.
  • snap map to new borders.

Probably, it is possible to clarify, in order to use the 3-point upper center, the left center and the right center, this is the first section, the proof of the concept can perhaps be cleared and clarified.

 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);
+5
source

More articles:


All Articles