I'm trying to resolve an issue with uploading a live kml file to the google maps api. I have a live website that I uploaded the kml file to, but when I use the url within the call function it doesn't show up in the google maps api. It's a public kml file....the website that I'm trying to use the google maps api is not live, just run off my desktop at the moment.
any thoughts on what I'm doing wrong? The website kml link is: http://www.gsphotoalchemy.com/170113.kml
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.gsphotoalchemy.com/170113.kml'
});
ctaLayer.setMap(map);
}
I can post the full html code if needed, thanks in advance!
your KML file is too big, see the KML reference for size and complexity limitations:
feedvalidator
If you do something like this in your code to check the status of the KmlLayer:
google.maps.event.addListener(kmlLayer, "status_changed", function() {
document.getElementById('kmlstatus').innerHTML = "Kml Status:"+kmlLayer.getStatus();
});
you will get:
Kml Status:DOCUMENT_TOO_LARGE
example
Related
Following the official guide:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
I did exactly the same thing. I jave that specific kml file on my site, and I create a page with that exact html+javascript code (copy-paste, no errors). The path for the kml file is correct too.
Of course, I inserted the right API KEY obtained by google.
Running the page, the maps shows up, in the correct start position and with the correct zoom, but I can't see any path.
How is possible?
I have only one hint: in Netbeans, I get this warning on the var map:
The global variable "google" is not declared.
I can't figure it out.
Thank you for any help!
EDIT: That's my javascript as asked (it's just copy-paste from that site):
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'MYURL/cta.kml',
map: map
});
}
'MYURL' is the url of the file, that is correct (already tested). The cta.kml file is the one from that site, saved and uploaded on mine. The complete file URL is working, and the file itself has attribute 644 (publicly available) on my FTP.
Have you added this code in order to include Google's library?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Try to check for network status of this library file, in your browser devtools.
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.
I have the Google Earth plugin installed and it seems to work fine.
What I would like to do is open a KML file (exported from MyTracks on Android) in it.
But, I can find no option to open the KML file, or launch the GE plugin.
Is this possible ?
To launch the plugin take a look at the 'Using the Google Earth Api' section in the developer's guide.
For loading KML files, take a look at the following documentation https://developers.google.com/earth/documentation/kml
It give examples of how to fetchKml and parseKml as well as linking to a working example.
var href = 'http://code.google.com/'
+ 'apis/earth/documentation/samples/kml_example.kml';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject) {
ge.getFeatures().appendChild(kmlObject);
}
});
You can also use a KmlNetworkLink to load the data again the document links to a working example of this.
var link = ge.createLink('');
var href = 'http://code.google.com/'
+ 'apis/earth/documentation/samples/kml_example.kml'
link.setHref(href);
var networkLink = ge.createNetworkLink('');
networkLink.set(link, true, true); // Sets the link, refreshVisibility, and flyToView
ge.getFeatures().appendChild(networkLink);
Hi I am facing problem with Google map in sencha touch 2. Following is the code ..
new Ext.application({
name:'Touch Start',
launch:function(){
var map = new Ext.Panel({
fulscreen:true,
items:[
{
xtype:'map',
useCurrentLocation:true,
}
]
});
this.viewport = map;
}
});
Please Help is anyone know about this
First of all, and before your question gets closed, you're not exactly telling us what the problem is with your code. So, I guess you can be facing two different problems
Google Maps API is required
Be sure to add the script tag that load the Google Maps API. You can find infos here
No Layout
Your main panel doesn't contain any layout, so it doesn't know how to display its items
Try to add this to the config :
layout: 'fit'
Here's a working example where the Google Maps API is loaded asynchronously :
http://www.senchafiddle.com/#MhAME
Hope this helped
I've run into a small problem with the semi-new KML Overlay functionality with Google Maps API v3, wherein while I am able to use "suppressInfoWindows: true;", the cursor still appears as though the overlay(s) are clickable.
Is there a way at this time to change the css on the overlay(s) so that the cursor is the default cursor, so that they are purely visual, and don't confuse the user?
You can do this through javascript (not sure about a purely CSS solution) using something along the lines of...
var ctaLayer = new google.maps.KmlLayer({
url: 'myKmlFile.kml',
suppressInfoWindows: true
});
if (ctaLayer.suppressInfoWindows) ctaLayer.setOptions({clickable:false});
ctaLayer.setMap(map);
This sounds like a bug. You should file it at the Google Maps API's issue tracker.