Styling Kml with CSS in Google Maps V3

Styling kml with css in google maps v3?

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.

How does CSS formatting in a Google Maps bubble work?

As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:

  1. It's stripping out all class attributes from my HTML.
  2. It's throwing all kinds of hard-coded styles around.

Here's my HTML along with the first couple of wrappers inserted by Google:

<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>

As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.

Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.

Style a KML polygon overlay on Google Maps?

KML includes the ability to style the Polygon. If you want to style it dymnamically (not in the KML), you need to use a third party parser like geoxml3 or FusionTableLayers (which will import KML).

Changing opacity of KML overlay in Google maps V3

There is no implemented method that returns a pointer to the DOMNode that contains the elements of the layer.

But in this case, where all the GroundOverlays will be loaded from the same address, you may use a CSS-attribute-selector to apply a custom styling for the images, e.g.:

img[src^="http://gisatnrel.nrel.gov/"]{
opacity:.5;
}

How do I change the style of the infobox for a KML layer on google maps?

Try this, this might help you.

https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-georss

https://developers.google.com/maps/documentation/javascript/layers#KMLLayers

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html

Setting marker style from kml file in Here maps api

Your KML is not valid, see the KML Reference.

<Placemark id="ID">
<StyleSelector>...</StyleSelector>
</Placemark>

<StyleSelector> is abstract, extended By <Style>

<Style id="ID">
<!-- extends StyleSelector -->
<!-- specific to Style -->
<IconStyle>...</IconStyle>
</Style>
<IconStyle id="ID">
<!-- specific to IconStyle -->
<Icon>
<href>...</href>
</Icon>
</IconStyle>

This works:

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Ab Kettleby</name>
<Style id="ID">
<!-- specific to Style -->
<IconStyle>
<Icon>
<href>https://wcsb.nz/wellringers/dove6.bmp</href>
</Icon>
</IconStyle>
</Style>
<Point>
<coordinates>-0.92747,52.79858</coordinates>
</Point>
</Placemark>
</kml>

live example

screenshot of Google JavaScript API v3 map

code snippet:

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
},
});
const ctaLayer = new google.maps.KmlLayer({
url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20210121_Icon1.kml",
map: map,
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */

#map {
height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>

<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>

<body>
<div id="map"></div>
</body>

</html>

How to override KML colors in Google Map?

KML colors are based on Styleapi-doc tags that are defined either directly in the KML or using a reference to an external KML style file (similar to CSS). We use an external style file, so that the styles may be applied to multiple KML files.

This means that within our KML data files, you will find entries such as this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Country Borders</name>
<open>1</open>
<Placemark>
<name>Russian Federation</name>
<styleUrl>kml-styles.kml#red</styleUrl>
--- etc. ---

The styleUrl tag above essentially says: go look in the file: kml-styles.kml and find the style named: red.

And within the our KML style file, you will find entries such as this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>KML Styles</name>
<open>1</open>
<Style id="red">
<LineStyle>
<color>7da00000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7f0000ff</color>
</PolyStyle>
</Style>
<Style id="green">
<LineStyle>
<color>FFFF00</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7f00aa00</color>
</PolyStyle>
</Style>
--- etc. ---

It's important to note that KML colorapi-doc definitions include eight hex digits within their definition; two more digits than what is customary for other color definitions, because the first two hex digits define the color opacity (alpha).

The example at the KML Styleapi-doc (same as the link at the top), also shows how styles may be defined directly within the KML file that contains the data.



Related Topics



Leave a reply



Submit