GMaps via KML: change color of placemark pins

hurikhan77 picture hurikhan77 · Jan 27, 2011 · Viewed 17k times · Source

We are using GMaps with a KML feed to display locations on a map. Here's an example:

http://jugendinfo.de/themen.php/873/geo.html

The pins on this map should be red, so I used the following PHP4 code in the KML generator to set the color:

$snode = $dom->create_element('Style');
$styleNode = $docNode->append_child($snode);
$styleNode->set_attribute('id', 'normalPlacemark');

$lnode = $dom->create_element('LabelStyle');
$labelNode = $styleNode->append_child($lnode);

$cnode = $dom->create_element('color');
$colorNode = $labelNode->append_child($cnode);

$colorText = $dom->create_text_node('ffcc0000');
$colorNode->append_child($colorText);

This results in the following KML code:

<Style id="normalPlacemark">
  <LabelStyle>
    <color>ffcc0000</color>
  </LabelStyle>
</Style>

The full KML source can be loaded from this location:

http://jugendinfo.de/feeds/geo.php/873.kml

However, the color style seems not to be respected. Without any style element in the KML document, the pins are even not displayed. How do I change the color? The API docs seem to be very limited about this issue and example PHP code snippets are even pretty buggy, I couldn't get any hints how to get it working. Most examples seem to apply to Google Earth instead of Google Maps.

Answer

Michal picture Michal · Jan 31, 2011
  • LabelStyle actually refers to the color of the label that is drawn in google earth not the color of the pushpin image.
  • Color in KML is specified in the following format aabbggrr where a if alpha, b is blue, r is red in hex so it is different to rrggbb that is used on the web

If you would like to change the image use IconStyle. I don't think that the color spec works in google maps but you can specify a custom icon image url for your placemark.

<Style id="normalPlacemark">
    <IconStyle>
             <color>ff00ff00</color>
                         <Icon>
                <href>http://maps.google.com/mapfiles/kml/pal3/icon21.png</href>
             </Icon>
          </IconStyle>
</Style>

Reference : http://code.google.com/apis/kml/documentation/kmlreference.html#iconstyle