Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to use 84MB KML file to show KML layer on google map but Google map not support more than 10MB KML file.
Google Map Developer Link about Size and complexity restrictions for KML rendering
https://developers.google.com/maps/documentation/javascript/kmllayer
Please check below code which is I am using to show KML layer in google map. Its working fine with small KML file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layer</title>
<style>
#map {
height: 80%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
Red Fibre<br>
Green Fibre<br>
Blue Fibre<br>
</div><br>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWsZy8xWxT9yNBvYcO1dpxBzDttr7DqLA&sensor=false">
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function() {
var defaultu = 'cta.kml';
initMapp(defaultu);
jQuery(document).on("click", ".button", function(e) {
e.preventDefault();
var url = jQuery(this).attr("data-latLng");
initMapp(url);
});
function initMapp(url) {
var myLatLng = {lat: 41.876, lng: -87.624}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello David!'
});
var kmlurl = url;
var ctaLayer = new google.maps.KmlLayer({
url: kmlurl,
map: map
});
}
});
</script>
</body>
</html>
One option would be to use a third party KML parser like geoxml3 or geoxml-v3. Note that due to the size and complexity of the KML file there may be performance issues and it will take a long time to load.
var geoXml = null;
var map = null;
var myLatLng = null;
function initialize() {
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var myOptions = {
zoom: 18,
center: new google.maps.LatLng(37.422104808,-122.0838851),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
});
geoXml.parse('cta.xml');
};
live example (with a small KML file)
Related
Hi good afternoon someone do you know why can not displayed my kml is storage in Dropbox?
I know that kml cant be storage in localhost and is needing in place public to acces and putted kml in my map
The question is why dont show my kml in my map? Im new trying with this. I made sure that the folder is public where I have my kml
<body>
<div id="map"></div>
<script>
var map;
var src = 'https://www.dropbox.com/s/e3t3u4y3ytxgkj1/Distrito_4.kml?dl=0';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.5962502, -100.3962371),
zoom: 11,
mapTypeId: 'terrain'
});
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=MyKeyhidden&callback=initMap">
</script>
</body>
To use a direct link to a KML file on dropbox, use dl=1 (rather than dl=0)
var src = 'https://www.dropbox.com/s/e3t3u4y3ytxgkj1/Distrito_4.kml?dl=1';
var kmlLayer = new google.maps.KmlLayer(src, {map: map});
reference: Re: Don't kill Public folders (on the Dropbox forum)
you can turn shared links into direct links by changing "dl=0" to "dl=1"
in the URL. It would be nice if there were an account setting to make that default.
working code snippet:
(with your KML)
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<html>
<body>
<div id="map"></div>
<script>
var map;
var src = 'https://www.dropbox.com/s/e3t3u4y3ytxgkj1/Distrito_4.kml?dl=1';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.5962502, -100.3962371),
zoom: 11,
mapTypeId: 'terrain'
});
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi I am working on a small web application that is using the Google maps java script API to display a map. I am passing in the html5 object of latitude and longitude to place a marker onto the map that displays the current location of the user. I have a kml layer that I am passing in as well. I am trying to display the current user location in relation to my kml layer. Well really I would just like the kml layer and the current user location both displayed. I have been trying to follow the google maps api to get this up and running. I was able to get the kml layer displayed in one test application and then I got the current user location displayed in another. When I attempted to combine the two the kml layer stopped displaying. This is a node js app using express js. I understand the kml layer element will not work on local host and I am deploying to a test location on heroku. Below I have included my relevant code:
<section id="wrapper">
Click the allow button to let the browser find your location.
<script src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEMAPDEVKEY&sensor=true"> </script>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var centerLL = new google.maps.LatLng(33.439346,-86.88312500000001);
var options = {
zoom: 15,
center: centerLL,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE'
});
georssLayer.setMap(map);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
Thank you for your time in advance.
Sincerely,
Fredk
EDIT: I changed the src script tags to remove error I was getting on console about having too many google api src's
You are using the wrong URL.
This is a map: https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE
If I download the KML (and choose the option "Keep up to date with network link KML (only useable online); the link in there is:
http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
google.maps.event.addListener(georssLayer, 'status_changed', function(){
document.getElementById('info').innerHTML = georssLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
Include that as the URL for the KmlLayer and it works for me
working code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
google.maps.event.addListener(georssLayer, 'status_changed', function(){
document.getElementById('info').innerHTML = georssLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="info"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
This is really driving me crazy. Why does my array lose scope moving it into a for loop? Please have a look at this code, the var 'marker' is losing scope near the beginning of this script. ANY thoughts welcome.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
//var cell={};
var cellcenter = new Array();
var lat = ''; var lng='';
$(document).ready(function(){
i=0;
$.getJSON('http://www.perivision.net/testing/containment/containment.php', function(data) {
var marker = new Array();
marker[0]=9;
$('#output').html('this works '+marker[0]);
for (index in data) {
i++;
$('#output').html(' this does not '+marker[0]);
for (element in data[index]) {
//console.log(element);
//console.log(data[index][element]);
if (element=="attribute8"){
lat=data[index][element];
}
if (element=="attribute9"){
//cell[i]=data[index][element];
lng=data[index][element];
cellcenter[i]=new google.maps.LatLng(lat,lng);
var myLatlng = new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map= new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
marker[i] = new google.maps.Marker({
position: cellcenter[i],
title:"Hello World!"+i
});
// To add the marker to the map, call setMap();
marker.setMap(map);
//marker[0].setMap(map);
marker[i].setMap(map);
//$('#output').html('re '+marker[0]);
//console.log('ping '+i+' '+cellcenter[i]);
}
}
}
});
});
function donothing(){
}
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<button id="requestDataBtn">Get Data</button><br />
<div id='output'></div>
</body>
</html>
var marker = new google.maps.Marker
This is your problem. You are giving the same name marker to some other object. Now, Javascript interpreter scans the entire JS code and looks for any var definitions before executing. Thats why eventhough you have defined marker mch below it still get reset.
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.
I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.