Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It seems as though the infoBubble library itself defaults to positioning the bubble above the marker it is bound to. Take a look at the sample file they included in the library: <a href="http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/examples/example.html" rel="noreferrer">http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/examples/example.html</a> . Specifically notice from line 99 to line 122 and the use of the two infobubbles. The first one is bound to the marker, however the second one is a stand-alone and thus if you see line 106, you can define a position to it. Now, based on this understanding I've created an example for you in this fiddle <a href="http://jsfiddle.net/pDFc3/" rel="noreferrer">http://jsfiddle.net/pDFc3/</a>. The infoBubble is positioned to the right of the marker.</p> <p>It's strange, because the infoBubble js library has a function for setPosition ( <a href="http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js?r=206" rel="noreferrer">http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js?r=206</a> ) see Line 1027. But for some reason after I wait for the DOM to load and try to change the position by going <code>infoBubble.setPosition(newLatLng);</code> I doesn't work. On the contrary, declaring <code>infoBubble.getPosition();</code> after the DOM loads gives me the current position of the marker the infoBubble is bound to. So setPosition() may have a bug in the js library, because I believe it is still being worked on (I could be wrong maybe it's just buggy).</p> <hr> <p>I've fixed my jsFiddle to solve your issue for when zooming in and out, and positioning the infoBubble accordingly ( <a href="http://jsfiddle.net/pDFc3/" rel="noreferrer">http://jsfiddle.net/pDFc3/</a> ). Let me explain the logic first. Firstly, the maximum zoom level on Google Maps for road map type is 21 - this value is inconsistent for satellite imagery but the maximum zoom the user can go to is 21. From 21, each time you zoom out the differences between two points can be kept consistent "on screen" based on the following logic:</p> <pre><code>consitent_screen_dist = initial_dist * (2 ^ (21 - zoomlevel)) </code></pre> <p>In our case, the reasonable value for initial distance was 0.00003 degrees (between marker and infoBubble). So, based on this logic I added the following piece to find the initial longitudinal distance between marker and infoBubble:</p> <pre><code>var newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom()))); </code></pre> <p>Likewise, to ensure the distance stays consistent on each zoom level change we simply declare a new longitude as we listen for a change in the zoom level:</p> <pre><code> google.maps.event.addListener(map, "zoom_changed", function() { newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom()))); infoBubble.setPosition(new google.maps.LatLng(marker.getPosition().lat(), newlong)); }); </code></pre> <p>Keep in mind you can make this code much more efficient by declaring variables for marker.getPosition and other values that are called through methods. So that the method calls aren't repeated and slow your code down.</p>
    singulars
    1. This table or related slice is empty.
    1. POGoogle Maps InfoBubble pixelOffset (Moving from default position above marker)
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSuvi Vignarajah
    1. USSuvi Vignarajah
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POGoogle Maps InfoBubble pixelOffset (Moving from default position above marker)
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThat is what i am looking for, one issue is that when zooming in and out the marker moves in relation to the marker, sometimes hiding it entirely. Do you think this is something that can be resolved?
      singulars
      1. PO
      1. USUndefined
    2. COThat is true, it's because we're setting the position of the infoBubble with relation to the marker at a specific zoom level. But once you change the zoom level, the distance between the marker and the infoBubble (difference between the lat/long coordinates of both) does not change. So when you zoom out, that difference is so small that you view the infoBubble on top of the marker.
      singulars
      1. PO
      1. USSuvi Vignarajah
    3. COThere is a fix to this issue though, I've found that if you don't bind the infoBubble to maker then you can actually use the infoBubble.setPosition(latlng) method. This means that we can listen for the zoom changes using google maps event listener `zoom_changed` and then use the `getZoom()` function to determine classes for how to position the infoBubble with relation to the marker based on zoom levels. I will update my jsfiddle with this possible fix, but feel free to experiment based on this principle.
      singulars
      1. PO
      1. USSuvi Vignarajah
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload