title: Google Maps InfoBubble pixelOffset (Moving from default position above marker)
body: <p>I am trying to implement a custom infoBubble that has the box opening to the side of a marker rather than the default position of on top. This has turned out to be harder than expected.</p>
  
  <p>Using the normal infoWindow you can use pixelOffset. See here for the <a href="https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions" rel="nofollow noreferrer">documentation</a></p>
  
  <p>Using infoBubble this does not seem to be the case. Is there anyway of using pixelOffset in an infoBubble, or something that will do the same thing?</p>
  
  <p>I have found this very difficult to search for, as using a google search such as this returns no relevant results <a href="https://www.google.co.uk/search?sugexp=chrome,mod=10&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=google%20maps%20infoBubble%20documentation" rel="nofollow noreferrer">Google Search</a></p>
  
  <p>Below is all my resources I have been using.</p>
  
  <ul>
  <li><p>Example of infoBubble <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html?compiled" rel="nofollow noreferrer">here</a>.</p></li>
  <li><p>My JavaScript to setup the map and infoBubble <a href="http://jsfiddle.net/ssrP9/5/" rel="nofollow noreferrer">here</a>.</p></li>
  </ul>
  
  <p>And now my javascript here just in-case the jsfiddle link is broken.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          init();
      });
  
      function init() {
  
          //Setup the map
          var googleMapOptions = {
              center: new google.maps.LatLng(53.5167, -1.1333),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          //Start the map
          var map = new google.maps.Map(document.getElementById("map_canvas"),
          googleMapOptions);
  
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(53.5267, -1.1333),
              title: "Just a test"
          });
  
          marker.setMap(map);
  
          infoBubble = new InfoBubble({
              map: map,
              content: '&lt;div class="phoneytext"&gt;Some label&lt;/div&gt;',
              //position: new google.maps.LatLng(-35, 151),
              shadowStyle: 1,
              padding: '10px',
              //backgroundColor: 'rgb(57,57,57)',
              borderRadius: 5,
              minWidth: 200,
              arrowSize: 10,
              borderWidth: 1,
              borderColor: '#2c2c2c',
              disableAutoPan: true,
              hideCloseButton: false,
              arrowPosition: 7,
              backgroundClassName: 'phoney',
              pixelOffset: new google.maps.Size(130, 120),
              arrowStyle: 2
          });
          infoBubble.open(map, marker);
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>To help with answering this question i have put together a test case <strike>here</strike>. The important lines are lines 38 &amp; 39, which should specify where to position the label.</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>For the bounty to be awarded i need to see an example of the infoBubble positioned away from its default position above the marker. Preferably to the right hand side of the marker.</p>
  
  <p><strong>Update 3</strong></p>
  
  <p>I have removed the testcase from update 1 because it is hosted on my old company's servers.</p>