Databases
StackOverflow2013
Postsdbo
POKML balloon height style in Google Maps
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKML balloon height style in Google Maps
    text
    copied!<p>I'm trying to limit the description balloon height in the following KML for use with Google Maps. In Google Earth, this is achieved by using the style element of a div wrapper, so the following KML works fine. However, when referenced via Google Maps, the height attribute is stripped out resulting in a large balloon when the maker is clicked.</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;kml xmlns="http://www.opengis.net/kml/2.2"&gt; &lt;Placemark&gt; &lt;name&gt;Test Mark&lt;/name&gt; &lt;description&gt; &lt;![CDATA[ &lt;div style="height:150px;overflow:auto"&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 5&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 6&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 7&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 8&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 9&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 10&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 11&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 12&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 13&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 14&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 15&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 16&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 17&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 18&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 19&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 20&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 21&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 22&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 23&lt;/td&gt;&lt;td&gt;some data&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; ]]&gt; &lt;/description&gt; &lt;Point&gt; &lt;coordinates&gt;1,23&lt;/coordinates&gt; &lt;/Point&gt; &lt;/Placemark&gt; &lt;/kml&gt; </code></pre> <p>​<a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;geocode=&amp;q=https%3a%2F%2Fdocs.google.com%2Fuc%3Fid%3D0ByaeSpZvpEFeYmNlYTZmZTYtYzkwYy00MWM2LThmOTEtMzBiYjM4NDAyM2Iy&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=35.821085,67.324219&amp;ie=UTF8&amp;ll=23.030451,0.994263&amp;spn=0.114851,0.154324&amp;z=13" rel="nofollow">Here</a> is how the KML looks in Google Maps</p> <p>In my project, it is feasible that the tables I'm creating in the balloon description's could be quite long, so I need to make the balloon contents scrollable.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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