I want to load a KML file with the API provided by GoogleMaps, but can't make it work.
I have a KML file that works correctly and displays all the points when loaded manually from my computer to GoogleMaps. However, when I try to do it with the API, it doesn't work. I uploaded my file to Google drive and I am using the example provided by Google (I only change coordinates, file and API key).
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.45, lng: -3.8}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
georssLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
});
georssLayer.setMap(map);
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
The link to Google Drive you are using does not provide the raw KML.
If I check the status of the KmlLayer after it loads, I get INVALID_DOCUMENT (fiddle, check the javascript console)
Per the article: Direct linking to your files on Dropbox, Google Drive and OneDrive:
Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:
https://drive.google.com/file/d/FILE_ID/edit?usp=sharing
Becomes:
https://drive.google.com/uc?export=download&id=FILE_ID
In your case:
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
becomes:
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
google.maps.event.addListener(georssLayer, 'status_changed', function() {
console.log(georssLayer.getStatus());
})
georssLayer.setMap(map);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<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>
Related
Using web browser Chrome on my laptop, I opened a local html web page to get the current location. The returned location (1.3238272, 103.8606336) is no where close to my actual location. Similarity, websites like [1] (1.3238272
103.8606336) [2] (1.32383, 103.86063) all return not accurate results.
However, using google map, it returned (1.287264, 103.831497) a much accurate location. Do google map use a different approach/technology to obtain a location?
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var g_lat = 0;
var g_lng = 0;
var map, infoWindow;
function initMap() {
navigator.geolocation.getCurrentPosition(updatePosition);
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: g_lat, lng: g_lng},
zoom: 8
});
infoWindow = new google.maps.InfoWindow;
}
function updatePosition(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
The mistake is using Google Map when user logged in, this will produce a better location result. Without logging in, resulting location is the same as geolocation.
I am having similar problem like this post refers to:
KML layer problems in Google Maps Javascript API v3
My kml file is not loading when hosted on my ec2 instance.
Its working when it is hosted for example on my google drive.
My ec2 port 80 is open for all and I do not block anything with iptables.
This is my html:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
var src = "http://{my host}/locations/test.kml";
var map;
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY-API-KEY&callback=initMap">
</script>
</body>
</html>
Any solutions?
This issue was finally resolved with changing the file extension from .kml to .xml as #geocodezip suggested
I am trying to learn how to use the Google Maps API, and I've found a lot of good tutorials. Problem is, whenever I try to implement their code into my local HTML file, I don't see any polyline drawn on my Google Map.
Here's my code (note: I do have my API key in the script at the bottom):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.500, lng: 9.000},
zoom: 10
});
}
var encoded_data = "kpgiI}{wt#{xeDfxv#ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se#vdgAhdPya_BoabDipHoabDngiAsen#jz}#htcAzqt#itcAnha#|~eBdzh#qqnBf~w#zrlCjkx#fppAy{u#zflA{zRpeuC`zWh`]bmx#}byAlwn#ny{DncNn}nDsxd#uqG";
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
var line = new google.maps.Polyline({
path: decode,
strokeColor: '#00008B',
strokeOpacity: 1.0,
strokeWeight: 4,
zIndex: 3
});
line.setMat(map);
lineArray.push(line);
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=MY_KEY&callback=initMap">
</script>
</body>
</html>
You are loading Google Maps API using:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
where
The async attribute lets the browser render the rest of your website
while the Maps API loads. When the API is ready, it will call the
function specified using the callback parameter
In the provided example you are trying to utilize google.maps.geometry.encoding.decodePath function but geometry library could not be loaded at this moment.
There is a typo at line:
line.setMat(map); -> line.setMap(map);
Fixed example
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 55.500, lng: 9.000 },
zoom: 7
});
var encoded_data = "kpgiI}{wt#{xeDfxv#ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se#vdgAhdPya_BoabDipHoabDngiAsen#jz}#htcAzqt#itcAnha#|~eBdzh#qqnBf~w#zrlCjkx#fppAy{u#zflA{zRpeuC`zWh`]bmx#}byAlwn#ny{DncNn}nDsxd#uqG";
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
var line = new google.maps.Polyline({
path: decode,
strokeColor: '#00008B',
strokeOpacity: 1.0,
strokeWeight: 4,
zIndex: 3
});
line.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>
I need do embed a kml google earth map in my webpage.
I followed this instructions, but the link to get the code to embed doesn't seem to be activated here.
I also tryed the followning code, but it shows a simple map without the informatons in the kml file
<head>
<title></title>
<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 }
#google-map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'poligono1.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="google-map" class="google-map"></div>
</body>
i put the kml file in the same folder of the webpage.
Thanks in advance for helping me!!!
i tried the scaisEdge code, and it works fine.
but in iis were missing the mime type, then i added the mime type, and now it works fine... thanks geocodezip!!!
I think this sample from google developer could be useful
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
/**
* #fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* #param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
I want to make a web application that will get 2 location and their postalcode and show the result on google map. For example, I select 2 cities or a country and show the road map with a colored line according to my points.
Best place to look is the Google Maps API V3 Documentation - I recommend V3 as they don't support V2 anymore
Main documentation: http://code.google.com/apis/maps/documentation/javascript/
Samples: http://code.google.com/apis/maps/documentation/javascript/examples/index.html
Simple directions sample: http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html
Basically you need to have the two co-ordinates, although you can use street addresses, and pass that to the API and it goes off to google gets the results and then plots it. Easy as pie!
Save this code as location.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="map.css" rel="stylesheet" type="text/css">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var siberia = new google.maps.LatLng(37.625364,-122.423905);
function initialize() {
var myOptions = {
zoom:19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
map: map,
position: siberia,
content: 'Location found using HTML5.'
});
var marker = new google.maps.Marker({
position: siberia,
map: map,
title: "omt"
});
map.setCenter(siberia);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Save this code as map.css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}