0

I have created a KML file with CSS formatting for the contents of the balloon. The CSS is read and displays fine in Google Earth, but not when using the Google Maps API. Can anyone tell me why and how to overcome this please?

Here's the relevant snippets from the KML file...

<Style id="Summit_Target">
    <IconStyle>
        <Icon><href>http://www.virtualmountains.co.uk/shared/Summit_Target.png</href></Icon>
    </IconStyle>
<BalloonStyle>
<text>$[description]</text>
<bgColor>white</bgColor>
<text><![CDATA[
        <font color="#674A32" face="arial" align="justify">$[description]</font>
]]></text>
  </BalloonStyle>
<LabelStyle>
      <color>FF14B450</color>
      <scale>0.8</scale>
</LabelStyle>
</Style>

<Placemark>
<name>High Street</name>
<description>        
<![CDATA[
<style>
H1{text-align:left; font-size:12pt; font-weight:bold;} P{font-size:10pt;}
img{width:96px; height:120px; float:left; border:0; margin-right:8px}
</style>
<H1>High Street</H1>
<P>
<IMG SRC="High_Street_Summit.jpg" title="High Street" alt="High Street">
At 828m, with a 373m drop, High Street appears in many a hill bagger's list includings a Nuttell, Marilyn, Simm, Hewitt, Wainwright, Birkett, and Trail 100.<BR><BR>Roman engineers built a road across the summit linking their forts at Brougham and Ambleside, thus giving the hill its name.<BR><BR>A second name <i>&#8217;Racecourse Hill&#8217;</i> is derived from the summer fairs and horseraces that were held here unp until 1835.<BR><BR>The mountain's summit is crowned by an Ordnance Survey triangulation pillar.
</P>
]]>
</description>
<styleUrl>#Summit_Target</styleUrl>  
<Point><coordinates>-2.864838,54.491697,0</coordinates></Point>
</Placemark>

Here's how the balloon appears in Google Earth, i.e. as I'm expecting it too...

enter image description here

But here is how it appears on the web when read by the Google Maps API...

enter image description here

  1. The title is centred, not left justified.
  2. The title is not in 12pt Arial bold .
  3. The main text starts near the bottom of the image, not to the right at the top.
  4. The line spacing (though not specified) looks great in Google Earth, but not in Google Maps.

If anyone can help me correct this, it will be much appreciated.

Derek
  • 53
  • 8
  • Related (but old) question: [How does CSS formatting in a Google Maps bubble work?](https://stackoverflow.com/questions/203477/how-does-css-formatting-in-a-google-maps-bubble-work) – geocodezip Dec 17 '20 at 19:01

1 Answers1

0

For the benefit of others I found solution to achieve the formatting I wanted.

There are two rules to consider.

a) The KML will use some of the CSS styling found in the webpage hosting the Google Map. So that the balloon contents is consistent across different webpages I removed the H1 and P tags.

b) CSS shorthand is not supported. For example you might have {font:Arial 10pt bold} in the style sheet or direct in the KML tag. This has to be written longhand as in the code snippet below.

<Placemark>
    <name>High Street</name>
     <description>        
        <![CDATA[
            <DIV style="max-width:400px; margin-right:10px; margin-bottom:10px; color:#674A32; font-family:Arial">
                <DIV style="font-size:11pt; font-weight:bold; text-align:left">High Street<BR></DIV>
                <DIV style="font-size:10pt; text-align:justify"><BR>
                    <IMG SRC="High_Street_Summit.jpg" title="High Street" alt="High Street" width="96px" height="120px" align="left" style="margin-right:10px; margin-bottom:10px">
                    At 828m, with a 373m drop, High Street appears in many a hill bagger's list includings a Nuttell, Marilyn, Simm, Hewitt, Wainwright, Birkett, and Trail 100.<BR><BR>Roman engineers built a road across the summit linking their forts at Brougham and Ambleside, thus giving the hill its name.<BR><BR>A second name <i>&#8217;Racecourse Hill&#8217;</i> is derived from the summer fairs and horseraces that were held here up until 1835.<BR><BR>The mountain's summit is crowned by an Ordnance Survey triangulation pillar.
                </DIV>
            </DIV>
        ]]>
    </description>
    <styleUrl>#Summit_Target</styleUrl>  
    <Point><coordinates>-2.864838,54.491697,0</coordinates></Point>
</Placemark>

Putting the visible contents of the balloon inside a DIV enabled the left justification of the title text.

The additional styling to the DIV prevents the balloon from becoming too wide, and the margin (the only formating I could get to work) moves the text away from the right hand side when displayed on an iPhone and being covered by a vertical scroll bar.

The float:left I replaced with align:left and then a margin-right in a style tag.

Derek
  • 53
  • 8