Border dectection on Infoboxes, so they don't get draw off the map

Question

What's the best way to recalculate the position of the infobox in a way it's always trying to be full draw inside the map but without moving the map.

So if I try to open an infobox that is close to the right edge of the window it should draw the infobox to the left of the marker not on top of it, or to it's left.

is there a framework for that ?

Thanks !

My infobox options per request.

        var myOptions = {
             content: this.bigInfo(variables)
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(20, -60)
            ,zIndex: 9
            ,boxClass: "bigInfo"
            ,closeBoxMargin: "-9px -9px 3px 3px"
            ,closeBoxURL: "./img/close.png"
            ,infoBoxClearance: new google.maps.Size(100,100)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

Don't like to bug you again, but how exactly are you getting the finished infobox on screen? In particular I'm interested in how you set the width and position. Are they fixed? Depend on the text length? I use the options above and only get a transparent field, with my static text. — Heitor Chang, May 11 '12 at 17:00

score 3 · Accepted Answer · answered May 12 '12 at 01:09

I have a hack for InfoBoxes. It relies on a conversion from LatLng to screen pixels I found in a different question, fromLatLngToContainerPixel. The Google documentation description tells the pixel position is measured in the "map's outer container". However, the answerer warned that its sibling function, fromLatLngToDivPixel. is unreliable because it freezes with a resize or zoom.

So, my code uses fromLatLngToContainerPixel. If you try using my code, play around in your code and see if the offsets need to be changed. In my code I have a fixed InfoBox width of 86px.

Click in the center, and then the edges of the visible area. The map will not move.

Here's the JSFiddle: http://jsfiddle.net/eHT9U/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body { margin: 0; padding: 0; height: 100% }
      #map_canvas { width: 100%; height: 300px }
      #container { padding: 10px; }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="infobox_alt.js"></script>
    <script type="text/javascript" src="jquery.js"></script>    
    <script type="text/javascript">
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(40.0, -88.0),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var count = 0;

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        overlay = new google.maps.OverlayView();
        overlay.draw = function() {};
        overlay.setMap(map);

        google.maps.event.addListener(map, 'click', function (event) {
          count += 1;
          pt = overlay.getProjection().fromLatLngToContainerPixel(event.latLng);
          document.getElementById("end").value = pt;
          addMarker(event.latLng, "index #" + Math.pow(100, count), pt.x, pt.y);
        });
      }

      function addMarker(pos, content, x, y) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        marker.setTitle(content);

        var labelText = content;

        var myOptions = {
          content: labelText
           ,boxStyle: {
              border: "1px solid black"
             ,background: "white"
             ,textAlign: "center"
             ,fontSize: "8pt"
             ,width: "86px"  // has to be set manually
             ,opacity: 1.0
             ,zIndex: -100
            }
           ,disableAutoPan: true
           ,position: marker.getPosition()
           ,closeBoxURL: ""
           ,pane: "floatPane"
           ,enableEventPropagation: true
           ,zIndex:-1
        };
        offX = -43;
        offY = 0;
        //compare boundaries
        if(x > $("#map_canvas").width() - 60) {
          offX = -86;
        } 
        if(x < 60) {
      offX = 0;
        } 
        if(y > $("#map_canvas").height() - 60) {
          offY = -50;
        } 
    myOptions.pixelOffset = new google.maps.Size(offX,offY);

        var ibLabel = new InfoBox(myOptions);
        ibLabel.setZIndex(-1);
        ibLabel.open(map);

        var infowindow = new google.maps.InfoWindow({ 
          content: content
        });

        google.maps.event.addListener(marker, 'click', function (event) {
          infowindow.open(map, this);
          ibLabel.setZIndex(-1);
          this.setZIndex(1);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    end: <input id="end" size="30">
    <div id="container">
      <div id="map_canvas"></div>
    </div>
  </body>
</html>

score 1 · Answer 2 · answered May 11 '12 at 17:39

1

I found this example suits your requirement

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

answered May 11 '12 at 17:39

Ramesh Kotha

8,266
17
66
90

You beat me by a hair! But my description is a little better - – Sean Mickey May 11 '12 at 17:41

score 1 · Answer 3 · answered May 11 '12 at 17:40

1

There is a code example, SmartInfoWindow, that does what you describe using an InfoWindow. You should be able to get started in the right direction using that as an example.

answered May 11 '12 at 17:40

Sean Mickey

7,618
2
32
58

score 0 · Answer 4 · answered Feb 12 '17 at 20:08

0

I was also getting an issue with this, my solution was to use panBy.

map.panBy(0, -100);    // panning to show full infobox    (xoffset,yoffset)

answered Feb 12 '17 at 20:08

PodTech.io

4,874
41
24

Border dectection on Infoboxes, so they don't get draw off the map

4 Answers4

Linked