Remove non-KML item from KMZ archive displayed on Google Map - google-maps

I am loading a KMZ on a Google Map using google.maps.KmlLayer. The KMZ contains a KML layer and some image files. I would like to display only the KML file on my map, but the image files are added as well.
Is there any way to remove non-KML elements (like a PNG file) from a KMZ archive displayed using google.maps.KmlLayer? I can't seem to find the PNGs as elements in the DOM, otherwise I'd just hide or remove them that way.
One possible solution might be to download the KMZ to the server, extract only the KML file, and add that to the map. But I'd like to try to keep this on the client-side if possible.
Here is an example of a KMZ archive that includes two PNG files (in this case, I'd only want to remove one of them, legend.png):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map" style="min-width: 800px; min-height: 660px"></div>

Per the documentation there is a KmlOptions property that disables the display of ScreenOverlays:
screenOverlays
Type: boolean
Whether to render the screen overlays. Default true.
Setting it to true removes that legend.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map,
screenOverlays: false
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Related

KML layer not loading

I'm trying to load a simple KML layer on a Google Map. I cannot make it work for a specific layer, while, at the same time, other similar KML layers load fine. Here is the minimal version of the code: https://jsfiddle.net/eundas/0fhqmocv/4/ Why does this not work? Is it something with my code or with the structure of the KML? I would appreciated any light on this.
var map;
var options = {
zoom: 5,
center: new google.maps.LatLng(-33.5, -70),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);
var Coquimbo4204Layer = new google.maps.KmlLayer({
url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
});
google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
console.log(Coquimbo4204Layer.getStatus());
})
Coquimbo4204Layer.setMap(map);
With the posted code, I get FETCH_ERROR, which according to the documentation means: The document could not be fetched.
It works if the url is http: rather than https: (that seems to be an issue with Google Drive).
Related questions:
The KML file included in google drive that does not recognize
KML not shown when loaded with javascript API to google maps
proof of concept fiddle
code snippet:
var map;
var options = {
zoom: 5,
center: new google.maps.LatLng(-33.5, -70),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);
var Coquimbo4204Layer = new google.maps.KmlLayer({
// url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
url: 'http://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
});
google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
console.log(Coquimbo4204Layer.getStatus());
})
Coquimbo4204Layer.setMap(map);
#mapcanvas {
height: 500px;
width: 500px;
background: blue;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapcanvas">CANVAS</div>

Google Maps API not popping up

So I have a website: terpconnect.umd.edu/~ybencheq and I basically wanted to feature a Google Maps at the bottom of my page. I generated an API key and I have it passed in the key parameter. The URL's in my credentials are: https://terpconnect.umd.edu/~ybencheq/, https://www.terpconnect.umd.edu/~ybencheq/, .terpconnect.umd.edu/ and none of these will work. I get the RefererNotAllowedMapError and sometimes I don't even get an error in my console; it just turns up blank on that part of the page).
Here's what I have:
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(38.9869, 76.9426);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
And:
<script src="https://maps.googleapis.com/maps/api/js?key=[insertkeyhere]"
type="text/javascript"></script>
You need to call the myMap function somewhere. Either call it onload:
google.maps.event.addDomListener(window,'load',myMap);
Or in the call back of the API load:
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=[insertkeyhere]" type="text/javascript"></script>
(but not both)
proof of concept fiddle
code snippet:
function myMap() {
myCenter = new google.maps.LatLng(38.9869, 76.9426);
var mapOptions = {
center: myCenter,
zoom: 12,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

Center map to my location

I have the following code:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: new google.maps.LatLng(53.529773,-113.509387),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
How can I replace:
center: new google.maps.LatLng(53.529773,-113.509387)
with my current location, programatically
Your code looks correct, I suspect that your issue is that your device does not have location services enabled, if it does you may not have accept the security prompt when it runs the first time.
This following demo I modified from the google maps API reference
https://developers.google.com/maps/documentation/javascript/
HTML Demo
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
CSS
/* 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;
}
JS
function initMap() {
// Pick a start point, I live in Australia, so just picked the middle of OZ
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
// Mark it on the map, this is the original center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
// If location services is enabled, the following should center the map on your location.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(location);
});
}
}

How to erase a layer

I have ...
var ctaLayer = new google.maps.KmlLayer({
url: var_url,
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
where var_url is a webservice where a date is passed so that what is returned changes based on a date selection. The issue i am having is that the all the markers displayed stack as if the previous eyars markers are not removed. Since i created the layer ctaLayer I was hoping it was going to be destroyed the next time I call this code but no..
Is there a way to check if ctaLayer exists and remove it before i call it again? I thought the local var ctaLayer = new google.maps.KmlLayer would do that.
Thanks
ctaLayer.setMap(null); removes the layer from the map.
Don't create a new KMLLayer each time, instead use a single KMLLayer and set a new url for the existing layer in subsequent calls:
ctaLayer.setUrl(var_url);
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 33.7489954, lng: -84.3879824},
noClear:true
}),
select=map.getDiv().querySelector('select'),
ctaLayer = new google.maps.KmlLayer({preserveViewport:true,map:map});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(select);
google.maps.event.addDomListener(document.getElementsByTagName('select')[0],'change',function(){
ctaLayer.setUrl('https://Services.oci.ga.gov/Geo_kml_Dust/default.aspx?Y='+this.value+'&t='+new Date().getTime());
});
google.maps.event.trigger(document.getElementsByTagName('select')[0],'change')
}
html, body ,#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map">
<select>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
</select>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

Unable to rotate kml layer

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>