I am trying to understand a KML Ground Overlay Tutorial, which has the following code as an example:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Folder>
<name>Ground Overlays</name>
<description>Examples of ground overlays</description>
<GroundOverlay>
<name>Large-scale overlay on terrain</name>
<description>Overlay shows Mount Etna erupting
on July 13th, 2001.</description>
<Icon>
<href>https://developers.google.com/kml/documentation/images/etna.jpg</href>
</Icon>
<LatLonBox>
<north>37.91904192681665</north>
<south>37.46543388598137</south>
<east>15.35832653742206</east>
<west>14.60128369746704</west>
<rotation>-0.1556640799496235</rotation>
</LatLonBox>
</GroundOverlay>
</Folder>
</kml>
There is no API key number, so I assume this KML is intended to be combined with a map of some sort.
I saved the kml to a publicly accessable file:
https://drive.google.com/file/d/0Bx17tEcqrzavTlc4ZHVmNFgyM1k/view?usp=sharing
Surely I must make an embedded map with some reference to this kml file.
https://developers.google.com/maps/documentation/embed/guide
The first example here uses iframe, it uses Place Mode, which I don't want.
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
View mode seems most appropriate of the above link options.
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
Oviously this needs to be recentered to Mt Etna,and my API key:
ttps://www.google.com/maps/embed/v1/view
?key=AIzaSyCrzeJMzJcHGCZj26Y9tHhmkSQ1zzJi8o0
¢er=37.91904192681665,15.35832653742206
&zoom=14
&maptype=satellite
Does it need to be put in iframe?
How can I combine these two chunks of code to create a kml map overlay embedded in my website?
Is there a way of doing this without using Java?
A KML file will not render directly on the web... it needs to be rendered on some map. The easiest way to view a KML file yourself is to open it with Google Earth. If you want to put it on the web, one easy way is to use the Google Maps JavaScript API to embed a map on your site, and then use the KmlLayer function to add the KML file to the map. Details and sample code are in the documentation here:
https://developers.google.com/maps/documentation/javascript/kml
Note that the copy of the KML file which you have on Google Drive will not open directly in Earth or anywhere else with the URL you provided, since it takes you to the Google Drive page for that file. Instead, you want to generate the direct download URL for that file on Drive, or put it online somewhere else.
Related
I'm using the Embed webpart in Sharepoint Online on the communication site and have problems with using the right url or storing the data on the right place. I use the next iframe:
<iframe src="https://******.sharepoint.com/SiteAssets/Webmap/index.aspx#11/52.1/5.62" width="100%" height="470"></iframe>
I have uploaded the map Webmap with its content on SiteAssets. Webmap consists, besides index.aspx, of the following subdirectories: css, data, images, js, legend, markers, webfonts.
The error message is "File not found"
(The message is translated by me in English so maybe it is slightly different ie Cannot find file)
Where should I put the Webmap map so I can use a working URL in the Webpart or what else could be wrong? Please help.
Background
I am using the Google Maps Javascript API to create a map for a website. I want to be able to edit it with a GUI, and have changes automatically update the public map.
I can accomplish this via Google's MyMaps. I've created a map using it, and then exported a NetworkLink KML file. I read that KML file into my JS API map as a KML layer.
Problem
I'm not sure how to interact with the data once it is in the JS API map. I need to style polygons as different colors, and use functions such as containsLocation().
Current Code
KML File
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>Lighting</name>
<description><![CDATA[A map showing all lighting reps.]]></description>
<NetworkLink>
<name>Lighting</name>
<Link>
<href>http://www.google.com/maps/d/kml?forcekml=1&mid=zUHNjsLRU3p0.k_6G1fwoLGr4</href>
</Link>
</NetworkLink>
</Document>
</kml>
JS API Code
var gMap = new google.maps.Map(element, opts);
var kmlLayer = new google.maps.KmlLayer({
url: 'data.kml',
map: gMap
});
Working Example (Plunker)
Question
Can I edit these polygons, changing colors, etc? How would I do that?
The only way (currently) to modify the colors of objects defined in a KmlLayer is to change the KML.
Other options:
use a third party KML parser (like geoxml3 or geoxml-v3) that render the KML using native Google Maps Javascript API v3 objects. Note that these third party parsers are subject to the same domain restriction for XmlHttpRequest, so the KML must be on the same domain as the web page or served through a proxy.
example using geoxml3
import the KML into a FusionTablesLayer, which can be styled dynamically.
We have been using KML to allow clients to upload Layers to a Google Maps based App. We are trying to replace KML with geoJSON, and all is fine with the exception of styles.
The style definitions in the KML files do not get included in the conveted geoJSON file (we have used a number of converters, but the one we are working with mainly is http://converter.mygeodata.eu/)
As you can see in the KML below, there is a style block there (purple box), but this just gets excluded from any generated geoJSON.
Does anyone know of a converter, or way of converting KML to geoJSON, that retains the style?
Thanks
Jason
In the end, I found that toGeoJson (http://mapbox.github.io/togeojson/) actually does convert the KML <style> node contents into the resulting geoJSON.
All the online tools seem to use ogr2ogr on the server side, which ignores the <style> as it isn't semantic, but toGeoJson has a go at it and so far does a good job.
I could then just access those properties, after the geoJSON was loaded, to apply the styles.
I have created a Google Maps map that I included on a webpage, by following these steps:
click "Customize and preview embedded map"
adjust the preview
copy paste the URL under "Paste HTML to embed in website"
paste the copied code into our webpage (<iframe>)
Now when clicking an area that I have created within the map (draw a shape) the user is able to click a link that points to another page within our website. But, the problem is that the page opens in the same <iframe>, whilst it should open outside the <iframe>.
When adding attributes like target="_blank" or target="_top" the attribute is stripped away by Google when saving the maps. Hence my embedded Google Maps map is useless for my website visitors.
Does anybody know how to make sure the window is opened outside the <iframe>?
Have you tried using the base tag within the <iframe>?
<base target="_parent" />
See How to force link from iframe to be opened in the parent window.
Alternatively you could create a intermediary page that the Google Maps page can call with a URL in the querystring that then runs some JavaScript to redirect the parent page to the URL.
I am trying to make a map that shows several information of a project. I have like 1000 points in Arcgis, each point have a html code that shows specific info of the points (names, location, 1 picture etc..). I export these points to a kml file, so I have the 1000 in a one kml file with all the info.
What I want to do is format all the markers of the kml file with api Google maps, (size, color etc...), so when I load the map in the web page I can play with size or color of the markers of the kml file. I haven’t found the procedure yet. I don’t know if I the issue well explained.
I mean which is the code to change the size and color of all markers of a kml file with API Google maps. Thanks.
You can't do that with the native Google Maps API v3 KmlLayer class. You could import your KML into FusionTables, overlay a FusionTablesLayer and style that dynamically or use a third party KML parser like geoxml3 or geoxml-v3 which parse the KML and render it using native Google Maps API v3 objects.