Styling kml with css in google maps v3? - css

Question

I am using a google maps api v3 to load some data from a kml file. I wish to style the description data when it is shown in an info window to suit my web page.
Now I am trying to set the style:
style="margin-left:-20px;border:2px dotted #897823; et-a;"
...inside the description tag of a Kml Placemark but it is not rendering it properly.
I can see that firebug just shows up the positives values of margin and padding. It entirely ignores the negative margin values. So, I was wondering, are any limitation in using css style attributes for kml files?
<placemark>
<name><![CDATA[First Office Address]]></name>
<description>
<![CDATA[
First Line Information<br>
California addresss<br>
Peak valley<br>
<div class="cInfo">Telephone<br>
Office 9089YUHJT General: (2457TYGFR</div>
]]>
</description>
<Point>
<coordinates>-420.2300,137.5332200,0</coordinates>
</Point>
</placemark>

Answer 1

The issue you are having is due to Content scrubbing in the Api. Scrubbing the contents is a security measure to prevent malicious code from executing.
When a feature balloon's description contents are scrubbed, the following code is removed:
JavaScript
CSS
<iframe> tags
<embed> tags
<object> tags
If you take a look at the markup in a debugger you will see that you are actually getting something like the following:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
First Line Information<br>
California addresss<br>
Peak valley<br>
<div>Telephone<br>Office 9089YUHJT General: (2457TYGFR</div>
</div>
</div>
You don't say how you are opening the info windows, but something like the following should work for you. Basically you suppress the default info window and then build your own custom one.
function initialize() {
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions
);
var layer = new google.maps.KmlLayer(
'http://www.yourserver.com/some.kml', {
// prevent default behaviour
suppressInfoWindows: true,
map: map
}
);
// bind the event handler
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInfoWindow(kmlEvent.featureData.description);
});
// show a custom info window
function showInfoWindow(text) {
// build your window using whatever, styles, embeds or scripts
// you like. Anything included here will bypass content scrubbing
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
}
Obviously you can replace style='...' with class='whatever' which would then allow you to define the CSS style in an external file.