I'm trying to render some simple kml layers on a Gmaps API project, but I'm finding that, despite anything I try, polygons doesn't fill.
I load a KML layer with this code:
var kmlLayerCenter = new google.maps.KmlLayer('<kmlFileRoute>', {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
And this is the KML code:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Folder>
<name>Distrito_Centro_KML</name>
<Placemark>
<Style>
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>ff0000ff</color>
<outline>1</outline>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-5.67256283331951,43.5397440536399
----- LOTS OF POINTS ------
-5.67256283331951,43.5397440536399
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</kml>
The polygon renders ok with red border, but there isn't any fill color. I tried to touch values here and there inside the KML, but to no success.
Any help will be appreciated.
Ok, Incredible but true... it seems that points on KML layers should be ordered counter-clockwise to allow Gmaps API to render fill colors.
I don't understand completely why is this, but it seems to work fine.
I found info about the solution here, although geocodezip answer was more or less on the same direction it wasn't until I reverse every point in the coordinates string that fill color appeared.
Looks like the Google Maps KML renderer is now sensitive to winding direction (which you didn't provide in your question).
This works:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.9439,45.254695
-5.408402,45.284535
-5.67256283331951,44.5397440536399
</coordinates>
This doesn't:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.408402,45.284535
-5.9439,45.254695
-5.67256283331951,44.5397440536399
</coordinates>
The only difference is winding direction (the order of the middle two points)
I want to rotate the kml layer in my map but it is not rotating however kml file contains the rotation tag. Here is KML file.
KML File
I am using this code to include the kml file.
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: myLatLng
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/zk01w7hhv4_o.kml',
map: map
});
<rotation/> is not supported in KmlLayer, see https://developers.google.com/kml/documentation/kmlelementsinmaps for supported elements
One option would be the third party KML parser geoxml3 which now supports the <GroundOverlay> <rotation> tag (with a change to the helper ProjectedOverlay library). (Disclaimer: I am currently the maintainer).
example with your KML
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: {
lat: 0,
lng: 0
},
zoom: 0
});
infowindow = new google.maps.InfoWindow({});
var geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
});
geoXml.parseKmlString(kmlData);
}
google.maps.event.addDomListener(window, 'load', initMap);
var kmlData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>course_3.kml</name><Style id="sh_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>3</width></LineStyle></Style><Style id="sn_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>2.5</width></LineStyle></Style><StyleMap id="msn_ylw-pushpin"><Pair><key>normal</key><styleUrl>#sn_ylw-pushpin</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#sh_ylw-pushpin</styleUrl></Pair></StyleMap><Folder><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><open>1</open><Placemark><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><styleUrl>#msn_ylw-pushpin</styleUrl><LineString><tessellate>1</tessellate><coordinates>-62.86033284828354,17.8845504927191,0 -62.84458650469701,17.87473959704673,0 -62.83547659050955,17.86945167794833,0 -62.83388304026133,17.86867910723514,0 -62.83321075835203,17.86842764302893,0 -62.83244614152226,17.86829326710066,0 -62.83095108255348,17.86812958593426,0 -62.8252089501432,17.86760084008422,0 -62.81367914534573,17.86719796434468,0 -62.8028525753019,17.86714467828739,0 -62.79756667270858,17.86751051155173,0 -62.79509376490336,17.86786570346247,0 -62.79412412763578,17.86809155768074,0 -62.79338147339845,17.86834753898355,0 -62.79292197702473,17.86872845424952,0 -62.79236941605821,17.86972789718922,0 -62.79196728876664,17.87057855391474,0 -62.79095434506525,17.87302053688485,0 -62.78769902736699,17.88296771449728,0 -62.78520601621152,17.8921161942094,0 -62.78298714148205,17.90141446335292,0 -62.78215426430953,17.90588128332446,0 -62.78180288654804,17.9081463412259,0 -62.78171537826803,17.90959573053742,0 -62.78176111029458,17.91085157814362,0 -62.78209906045792,17.91195531708489,0 -62.78278820483929,17.91396330057004,0 -62.78453903421586,17.91810287947595,0 -62.78752730575776,17.92390658974894,0 -62.78875333123023,17.9259212696348,0 -62.78986544653639,17.92755568861479,0 -62.79078421150102,17.92859792870751,0 -62.79831145019485,17.93443063643228,0 -62.80584033616613,17.94020945772508,0 -62.81258307095833,17.94514006132481,0 -62.81448933178827,17.94638884742845,0 -62.81601070417865,17.94716110662928,0 -62.81775976509371,17.94767575361211,0 -62.81986862853103,17.94779702318609,0 -62.82149546368095,17.94779229499462,0 -62.82371517654716,17.94766157324279,0 -62.82621465923376,17.94746630950224,0 -62.83049328518798,17.94705904912,0 -62.83919972063341,17.9459216448811,0 -62.84628848778544,17.94477832659337,0 -62.85888853921235,17.94250489675832,0 -62.87239257119431,17.93981825881495,0 -62.8811980398479,17.9377795947891,0 -62.88775645578315,17.93609294178501,0 -62.89173988675277,17.93489414228672,0 -62.89412558290244,17.93395197835972,0 -62.89552567301983,17.93307595570021,0 -62.89648507743102,17.93172350534812,0 -62.89669004691491,17.93099109405102,0 -62.89675976559775,17.93021394953048,0 -62.89663735225985,17.92926394813965,0 -62.89634128071585,17.92835412072944,0 -62.89557221863525,17.9270680837545,0 -62.89388090053903,17.92485240345483,0 -62.87826523882355,17.9063455885609,0 -62.86096890036382,17.88703596862992,0 </coordinates></LineString></Placemark><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88892896821306</north><south>17.88720675592857</south><east>-62.86037690770465</east><west>-62.86354378113808</west><rotation>307.820971098897</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88462189853965</north><south>17.88289968625519</south><east>-62.85754360921412</east><west>-62.86071048264756</west><rotation>323.6259195552798</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.86797860237289</north><south>17.86625639008843</south><east>-62.80737139571207</east><west>-62.8105382691455</west><rotation>357.5851829764764</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.90390563534902</north><south>17.90218342306457</south><east>-62.78104451432495</east><west>-62.78421138775838</west><rotation>77.74273626527004</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94462710084591</north><south>17.94290488856144</south><east>-62.80891396332905</east><west>-62.81208083676248</west><rotation>142.8275337342407</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94188422571256</north><south>17.94016201342811</south><east>-62.86522147937472</east><west>-62.86838835280815</west><rotation>191.2539027987112</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.92371079228007</north><south>17.92198857999562</south><east>-62.89070522661952</east><west>-62.89387210005297</west><rotation>307.3348255545322</rotation></LatLonBox></GroundOverlay></Folder></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/ProjectedOverlay.js"></script>
<div id="map_canvas"></div>
i'm using geoxml3 to parse my kml file.
this works so far.
now i'm trying to cluster these files so the map is not full of markers at low zoom levels
my kml file looks something like this (of course more markers(up to 200))
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Placemark id="1">
<name>test1</name>
<Point>
<coordinates>10.5267012, 49.6812452</coordinates>
</Point>
</Placemark>
<Placemark id="2">
<name>test2</name>
<Point>
<coordinates>30.5267012, 24.6812452</coordinates>
</Point>
</Placemark>
</Document>
</kml>
here is my code in my index.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test123</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="lib/geoxml3.js"></script>
<script>
function clickMarker(i) {
google.maps.event.trigger(markers[i], "click");
}
function initialize() {
var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
var mapOptions = {
zoom: 3, //set default zoom level
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
var mcOptions = {gridSize: 50, maxZoom: 15};
markers = [];
markerclusterer = new MarkerClusterer(map, [], mcOptions);
var infoWindow = new google.maps.InfoWindow({maxWidth: 800});
var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
map: map, singleInfoWindow: true,
createMarker: function(placemark) {
//Constructing marker for each Placemark node, and then add it to the markclustere
var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
var marker = new google.maps.Marker({position: point});
markerclusterer.addMarker(marker);
google.maps.event.addListener(marker, "click", function() {
var marker_lat = marker.getPosition().lat();
var marker_lng = marker.getPosition().lng();
infoWindow.close();
infoWindow.setOptions({maxWidth: 800});
content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markerclusterer.addMarker(marker);
}
});
myParser.parse('./kml/point-load.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
so my question: why are the markers not clustered and not displayed even without clusters???
I get this error with your code:
Uncaught ReferenceError: MarkerClusterer is not defined
Because you aren't including the MarkerClusterer external library that defines that.
working example from your code (but not your KML as that wasn't provided)
I'm trying to emulate this functionality
https://maps.google.com/maps?q=http://en.wikipedia.org/w/index.php%3Ftitle%3DTemplate:Attached_KML/N_postcode_area%26action%3Draw
I want to be able to add and remove a postcode region from an external link / checkbox. I have the KML file loading correctly using this code but I have no idea how to attach the external event listener / handler.
function initialize() {
var london = new google.maps.LatLng(51.522416,-0.11673);
var mapOptions = {
zoom: 11,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'path/to/kml',
suppressInfoWindows: true
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I've tried looking in the ctaLayer object to get the individual nodes from the KML file but they dont seem to be there.
I am using geoxml inn order to parse kml file containing number of points. Each marker has an info window with some information. Now what I would like is to add a button to each info window and onclick I would be able to display the information in that particular infowindow in a textbox.
Now my question is how am I able to add such button that on click I will get the info of the infowindow?
The following is an image of an infowindow:
And this is the code i have done so far:
function initialize() {
var mapOptions = {
center: new google
.maps.LatLng(35.898737028438, 14.5133403246687),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
infowindow = new google.maps.InfoWindow({});
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
zoom: true,
markerOptions: { optimized: false }
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
The kml file
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>188</name>
<description>museum</description>
<Point>
<coordinates>14.5104009086433,35.8994513796904</coordinates>
</Point>
</Placemark>
<Placemark>
<name>196</name>
<description>museum</description>
<Point>
<coordinates>14.5105859971021,35.8991906966932</coordinates>
</Point>
</Placemark>
<Placemark>
<name>349</name>
<description>museum</description>
<Point>
<coordinates>14.5126379237713,35.8969782492105</coordinates>
</Point>
</Placemark>
</Document>
</kml>
One way: Override the createMarker function:
function displayKml() {
geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parse(document.getElementById('kmlFile').value);
}
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
// doc.markers.push(marker);
}
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>'+
'<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
Add a function to display the data in an external div:
function displayInfo(name,description){
document.getElementById('info').innerHTML = name+"<br>"+description;
}
working example