I would like to show multiple points on google map with KML file. I try below sample but only the first point show on map.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<Point>
<coordinates>-122.0822035425683,37.42228990140251 -122.08223,37.42228</coordinates>
</Point>
</Placemark>
</kml>
I expect above sample:
1. Show 2 points on map
2. Show each point with a dot (currently it's a icon and too big).
A Point can only have one set of coordinates. Multiple points in the <coordinates> element are used for LineString (lines) and Polygon paths. You need multiple <Point> elements if you want multiple markers.
Updated KML:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<Point>
<coordinates>-122.0822035425683,37.42228990140251</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>-122.08223,37.42228</coordinates>
</Point>
</Placemark>
</kml>
code snippet (using geoxml3 to parse the KML):
var kmlString = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Placemark><Point><coordinates>-122.0822035425683,37.42228990140251</coordinates></Point></Placemark><Placemark><Point><coordinates>-122.08223,37.42228</coordinates></Point></Placemark></kml>';
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: {
lat: 42,
lng: -70
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true
});
geoXml.parseKmlString(kmlString);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/polys/geoxml3.js"></script>
<div id="map_canvas">
I have a kml file:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Ab Kettleby</name>
<Icon>
<href>https://wcsb.nz/wellringers/dove6.bmp</href>
</Icon>
<Point>
<coordinates>-0.92747,52.79858</coordinates>
</Point>
</Placemark>
</kml>
I reference this from an html file with a piece of javascript:
let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);
The file is read because a map is produced with the default bubble marker in the right place. Why is the referenced marker not used?
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
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>
I am trying to make a KMZ file with a bunch of placemarks, it wasn't working with multiple place marks so I thought I would test it with just one and try to figure that out first, simple file, this is all it is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="My_Style">
<IconStyle> <Icon> <href>square.png</href> </Icon></IconStyle>
</Style>
<Placemark>
<name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
<styleUrl> #My_Style</styleUrl>
<Point>
<coordinates>-76.21347,40.82783,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
I then throw this kml file in a folder with this 64x64 pixel red square png file and zip the folder up, name it test.kmz, and import it into google earth. For some reason, it is showing the red x's, and I haven't been able to find an answer online as to some common mistakes for this.
Per the documentation, put the embedded images for icons in a directory in the KML, then reference them including that directory name:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="My_Style">
<IconStyle> <Icon> <href>files/square.png</href> </Icon></IconStyle>
</Style>
<Placemark>
<name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
<styleUrl>#My_Style</styleUrl>
<Point>
<coordinates>-76.21347,40.82783,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
The zip file structure looks like this:
live example
code snippet:
"use strict";
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/kmz/SO_20200902_embeddedImage_filesB.kmz",
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>
related questions:
KMZ do not show of my icons
KMZ File with Icon
How can I reference local custom icons in a kml?
I have a KML-file which uses a polygon to draw a filled area in Google Earth. In this case it is a circle. Unfortunately the altitude is ignored when displaying the file with Google Earth 7.1.7.2606 (which is the latest version to date). The KML-file itself should correspond to KML standard 2.2.
The following code reprents the full file (just the xml namespace (<kml xmlns="http://www.opengis.net/kml/2.2">) is hidden below), and when opening with GE you should see the "problem" that the altitude of 500km (=500000.00m), which is the altitude the user should see the polygon, is ignored:
<?xml version="1.0" encoding="UTF-8"?>
<Document>
<name>orbits</name>
<open>1</open>
<Snippet>orbits</Snippet>
<Style>
<ListStyle>
<ItemIcon><href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href></ItemIcon>
</ListStyle>
</Style>
<!-- begin: Group 1, Graph 1 -->
<Folder>
<name>Group: Orbit 1</name>
<visibility>1</visibility>
<open>1</open>
<Style>
<ListStyle>
<ItemIcon><href>http://maps.google.com/mapfiles/kml/shapes/arrow-reverse.png</href></ItemIcon>
</ListStyle>
</Style>
<!-- begin: TrimLinesAndPatches -->
<Folder>
<name>TrimLinesAndPatches</name>
<open>0</open>
<Style>
<ListStyle>
<ItemIcon><href>http://maps.google.com/mapfiles/kml/shapes/target.png</href></ItemIcon>
</ListStyle>
</Style>
<Folder>
<name>Relative Patches</name>
<Style id="check-hide-children">
<ListStyle>
<listItemType>checkHideChildren</listItemType>
</ListStyle>
</Style>
<styleUrl>#check-hide-children</styleUrl>
<open>0</open>
<Style>
<ListStyle>
<ItemIcon><href>http://maps.google.com/mapfiles/kml/shapes/target.png</href></ItemIcon>
</ListStyle>
</Style>
<Placemark id="polygon">
<name>Relative Patches</name>
<TimeSpan><begin>2017-04-12T13:16:44.123Z</begin><end>2017-04-12T13:21:44.123Z</end></TimeSpan>
<visibility>1</visibility>
<Style>
<LineStyle>
<color>64FFCCFF</color>
<width>0</width>
</LineStyle>
<PolyStyle>
<color>64FFCCFF</color>
</PolyStyle>
</Style>
<MultiGeometry>
<extrude>0</extrude>
<altitudeMode>absolute</altitudeMode>
<tessellate>1</tessellate>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-12.1159516,-26.3651097,500000.00
-13.0844128,-26.4374313,500000.00
-14.0272910,-26.6524670,500000.00
-14.9194371,-27.0044676,500000.00
-15.7365727,-27.4839749,500000.00
-16.4557337,-28.0780054,500000.00
-17.0557319,-28.7703022,500000.00
-17.5176459,-29.5416541,500000.00
-17.8253587,-30.3702824,500000.00
-17.9661527,-31.2323009,500000.00
-17.9313683,-32.1022573,500000.00
-17.7171071,-32.9537663,500000.00
-17.3249379,-33.7602445,500000.00
-16.7625260,-34.4957477,500000.00
-16.0440739,-35.1359009,500000.00
-15.1904382,-35.6588849,500000.00
-14.2287935,-36.0464258,500000.00
-13.1917549,-36.2847064,500000.00
-12.1159516,-36.3651097,500000.00
-11.0401483,-36.2847064,500000.00
-10.0031097,-36.0464258,500000.00
-9.0414649,-35.6588849,500000.00
-8.1878292,-35.1359009,500000.00
-7.4693772,-34.4957477,500000.00
-6.9069653,-33.7602445,500000.00
-6.5147960,-32.9537663,500000.00
-6.3005348,-32.1022573,500000.00
-6.2657504,-31.2323009,500000.00
-6.4065445,-30.3702824,500000.00
-6.7142572,-29.5416541,500000.00
-7.1761713,-28.7703022,500000.00
-7.7761695,-28.0780054,500000.00
-8.4953305,-27.4839749,500000.00
-9.3124660,-27.0044676,500000.00
-10.2046122,-26.6524670,500000.00
-11.1474904,-26.4374313,500000.00
-12.1159516,-26.3651097,500000.00
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
</Folder>
</Folder>
<!-- end: TrimLinesAndPatches -->
</Folder>
</Document>
I tried also to "extrude" it, but also there no effect.
Is there something wrong with my file or is there a bug in GE?
The altitudeMode must be associated with the Polygon not the MultiGeometry.
Extrude and tessellate must also be child elements under the Polygon element.
The corrected KML would be this:
<MultiGeometry>
<Polygon>
<extrude>0</extrude>
<tessellate>1</tessellate>
<altitudeMode>absolute</altitudeMode> ***
<outerBoundaryIs>
<LinearRing>...</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
Also, if you only have a single geometry in the multiGeometry then you should discard the multiGeometry entirely and just use the Polygon.
Does anyone know of a way to adjust the height of the description in a KML folder.
I have a structure that I (visually) want to look like this:
|[] kml_name |
| [] test/folder_name |
| created: 2014-09-08 01:01:01.111111 |
| description: foo...bar |
| [] Placemark_1 |
| [] Placemark_2 |
| ... |
The KML, for example, looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>kml_name.kml</name>
<Folder>
<name>test_name</name>
<description>created 2014-09-08 01:01:01.111111<br/>desc: foo...bar</description>
<Placemark>
<Style>
<IconStyle>
<Icon><href>http://maps.google.com/mapfiles/kml/shapes/arrow.png</href></Icon>
<heading>111.1111</heading>
<color>ff008523</color>
<scale>.6</scale>
</IconStyle>
<LabelStyle>
<scale>0</scale>
</LabelStyle>
</Style>
<name>Placemark_1</name>
<scale>0</scale>
<color>ff008523</color>
<description><b>duration:</b> 0.0408148765564<br/><b>time:</b> 2014-09-08 01:01:01.111112<br/><b>CNR:</b> 31.9<br/><b>BER:</b> 344</description>
<Point><coordinates>-65.136866233,27.395845826,20.316</coordinates></Point>
</Placemark>
<Placemark>
<Style>
<LineStyle>
<color>ffff0000</color>
<width>2</width>
</LineStyle>
</Style>
<name></name>
<LineString>
<coordinates>-65.136866233,27.395845826,20.316,-65.136877726,27.395847788,20.077</coordinates>
</LineString>
</Placemark>
...
</Folder></Document>
</kml>
Is there a way to simply expand the <description> div (under <Folder>) in order to accommodate the desc: (because that is entirely cut off)?