CODEWITHSUNDEEP
csskmlgoogle-earthgoogle-earth-plugin
Keith
Keith

Reputation: 1185

CSS in Google Earth plugin

Just wondering if it is possible to style a pop-up balloon via an external/linked .css file, rather than inline styles ?

Upvotes: 3

Views: 3471

Answers (2)

Roman Nurik
Roman Nurik

Reputation: 29745

What I generally do is create a BalloonStyle for my placemark balloons that contains a wrapper div with a CSS class like earth-balloon, which can then be styled directly from within the containing page.

For example, the KML would look like:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Style id="foo">
      <BalloonStyle>
        <text><![CDATA[
        <div class="earth-balloon">
          $[description]
        </div>
        ]]></text>
      </BalloonStyle>
    </Style>
    <Placemark>
      <styleUrl>#foo</styleUrl>
      <name>Bar</name>
      <description><![CDATA[
        Some <em>HTML</em> here.
      ]]></description>
      <Point>
        <coordinates>-122,37</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

the containing page itself could look like:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <!-- Earth API stuff goes here -->
</head>
<body>
  <div id="map3d"></div>
</body>
</html>

and your styles.css could then style the balloon for Placemarks with styleUrl = #foo via rules like:

.earth-balloon {
  font-family: Georgia, serif;
}

.earth-balloon em {
  color: red;
}

Hope that helps!

Upvotes: 3

Natalie Downe
Natalie Downe

Reputation: 3056

Yes I have done this in the past, it can be quite tricky. You need to use firebug to figure out the selectors you need to get and in your CSS you will have to be quite specific to override them, on occaision you might even have to use !important on the rule.

Natalie

Upvotes: 0

Related Questions