CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Cristiano Fontes
Cristiano Fontes

Reputation: 5088

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

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

Upvotes: 4

Views: 2486

Answers (4)

PodTech.io
PodTech.io

Reputation: 5254

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)

Upvotes: 0

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

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>

Upvotes: 3

Sean Mickey
Sean Mickey

Reputation: 7716

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.

Upvotes: 1

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

I found this example suits your requirement

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

Upvotes: 1

Related Questions