my code is:
var ctaLayer = new google.maps.KmlLayer(
'http://.../per1.kml',
{suppressInfoWindows: true});
ctaLayer.setMap(map);
var info_percurso = new google.maps.InfoWindow({
content: 'hi'
});
google.maps.event.addListener(ctaLayer, 'click', function() {
info_percurso.open(map,ctaLayer);
alert("dd");
});
this is possible?
this code doesn't work...but the operation is possible?
I need to create my own infoWindow for database queries
make sure the kml is being served. You may need to add the kml MIME type to the server.
application/vnd.google-earth.kml+xml
Related
I've been trying to solve this question for a week, and haven't found any solution yet.
All I found is marker that is placed by one's own can be changed.
My situation is I import a KML file with some marker,and I want to change the icon on click event.
The code below works fine
var ctaLayer = new google.maps.KmlLayer({
//KMZ KML
url: url,
map: map,
suppressInfoWindows: true,
});
ctaLayer.addListener('click', function (kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text); }
My Current Result
Most People use the below function to set different icon
marker.seticon(ICON)
But in my case I can't get the marker I click
Hope someone can help me!!
With KmlLayer you can't change the style after load (with the API as currently documented). One option would be to use a third party KML parser (like geoxml3 or geoxml_v3) which converts KML into native google maps api objects, which you can change.
geoxml3:
https://github.com/geocodezip/geoxml3
geoxml_v3:
http://code.google.com/p/geoxml-v3/
According to geocodezip's advice
I came out with this solution
var marker;
google.maps.event.addListener(ctaLayer, 'click', function (event) {
var eLatLng = event.latLng;
if (marker != null) //this will remove the previous marker
{
marker.setMap(null);
}
marker = new google.maps.Marker({
position: eLatLng,
map: map,
});
marker.setPosition((eLatLng));
marker.setIcon(ICON);
});
While clicking the kmlLayer marker,I overlay a new bigger marker on it.
I know it's not the best solution, but at least it tells users which marker they are now clicking.
I am using kmllayers from the standard Google Dev site:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
How do you do error checking? In my example I have url with a get parameter to get a filtered response from a database whose return is a kml.
If I get a null response or a kml with no data, I want to redirect the page. How do I perform the check?
Per the documentation on KmlLayer, the KmlLayerStatus can be retrieved from the KmlLayer:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
google.maps.event.addListener(ctaLayer,'status_changed', function() {
if (ctaLayer.getStatus() != OK) {
alert("error loading KML, status="+ctaLayer.getStatus());
}
}
ctaLayer.setMap(map);
I have converted multiple shapefiles to KML using the Shp2kml2 software from Zonums Solutions. I have made a map with the KML layers (of which I have imported to google docs to get the url). My map is found at: http://userpages.flemingc.on.ca/~catam/collab2.html
I have:
6 polygon KML layers,
1 point KML layer,
1 Google Fusion Table point layer
But when I try to click on a specific point, the pop-up information is that of the polygon which rests in the same place as the specific point.
My code is:
var map, layer2;
function initialize() {
var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
var mapOptions = {
zoom: 5,
center: ontario
}
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download'
];
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'col9',
from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
}
});
layer2.setMap(map);
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setMap(map);
KmlLayer.setZIndex(999);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
It looks like the polygon layers are getting plotted over the points. Due to this even though you think you're clicking on the point the actual click event is generated on the polygon.
One solution would be to plot the polygons first followed by the points.
If that's not possible then you should set the z-index of the layer depending on whether it is a polygon or point.
kmlLayer.setZIndex(999);
The higher the z-index the higher the layer will be. I would suggest using a high z-index for the points while using a low z-index for the polygons. That should solve your problem.
The first option would be to move the url for points after the polygon urls. This should work without the need for z-index and will work without changing any of the code.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
];
The second option is to remove the points url from the array and add that separately. First plot the polygons as shown below.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
];
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
After this add the points layer
var pointsUrl = 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download'; // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/
I'm new to the Google Maps API and I'm working on localhost.
I want to add the ability for a user to upload their .gpx file and visualize it on the Google Map.
I've found this AJAX function wich works fine when I hardcode the .gpx file, but when I try to import the file from my computer, I got a grey screen for short second which then disappears.
Any idea or solution for this problem is more than welcome.
Thanks in advance.
function get_file() {
var fileInput = document.getElementById("file_upload");
var filename = fileInput.value;
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
loadGPXFileIntoGoogleMap(map, filename);
}
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
There is no way to access filesystem from JavaScript.
This is a security issue. To resolve your issue I can see only one option: You should have server-side functionality that will temporary store user uploaded data. And then you can load user defined .gpx files from server.