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>
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>
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);
});
}
}
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>
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>