Databases
StackOverflow2013
Postsdbo
POHow to size a Google Maps InfoWindow in Javascript (v3 API)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to size a Google Maps InfoWindow in Javascript (v3 API)
    primarykey
    data
    text
    <p>Yes. This is a duplicate of <a href="https://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly">Google Maps API v3: InfoWindow not sizing correctly</a>. <br /> <strong>However</strong>, none of the solutions offered on that question worked for me :( <br /> <br /> code:</p> <pre><code> //after getting a 'position' object: var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP }; var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions); var infoContent = '&lt;div style="width:40px;height:20px;"&gt;some information content...&lt;/div&gt;'; var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40}); infoBaloon.open(yourLocationMap); </code></pre> <p>This is the HTML Google Maps creates for the info-window on top of the map: <br /></p> <pre><code>&lt;div style="width: 247px; height: 88px;"&gt; //&lt;-This is actually the size of the info window. I have no idea on what basis it decides on these dimensions. //next is the div for the 'X'(close) button: &lt;div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;"&gt; &lt;img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"&gt;&lt;/div&gt;&lt;div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"&gt; &lt;/div&gt; // I don't know where this div is coming from... :\ &lt;div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"&gt; &lt;div style="overflow: auto;"&gt; **// and then, finally, the div I put in the Content of the InfoWindow: &lt;div style="width:40px;height:20px;"&gt;Some content information...&lt;/div&gt;** &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><br /> Um, help?</p> <p><br /> <strong>NOTE</strong>: the #locationMap div has stylings for its size (not included in the code example). There are no problems in the representation of the map - just the representation of the InfoWindow which always seem to be 247px wide, no matter what I set its content to...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USYuval A.
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to size a Google Maps InfoWindow in Javascript (v3 API)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCould it be that there is a minimum width for the info-window of 247px? The only sort-of "evidence" I found for this, is in this article: http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/
      singulars
      1. POHow to size a Google Maps InfoWindow in Javascript (v3 API)
      1. USYuval A.
    2. COAbove questions solution doesn't work just because it is for Google map v2. I've updated infowindow size dynamically by hacking HTML using jQuery, But i guess it is like fixing the code. So better thing is stop concentrating on this and change the functionality(representation) if possible
      singulars
      1. POHow to size a Google Maps InfoWindow in Javascript (v3 API)
      1. USJaykishan
 

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