CODEWITHSUNDEEP
javascriptapimapskml
matrix8369
matrix8369

Reputation: 71

Google Maps API not loading KML files

The background Information

I am trying to build a google map using the JS API. My map can be found at http://matthewjohnwilson.com/Maps/Maps.html

I wanted to add paths to my map so to get started I used the KML example found at https://developers.google.com/maps/documentation/javascript/examples/layer-kml

And I have made a map using MyMaps that can be seen here. https://www.google.com/maps/d/viewer?mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY&hl=en&usp=sharing so that I could try and download the kml file from the MyMaps then upload it to my site to use in my js api map.

Now for the issue.

My paths from my KML file doesn't want to load in my map. When I would go to the KML file directly I was getting a 404 error so I looked into that and it turns out that KML files hosted on godaddy were not supported by default. So I edited my website's Web.config and added 

<staticContent> 
 <mimeMap fileExtension=".kmz" mimeType="application/vnd.google-earth.kmz" /> 
 <mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml" /> 
</staticContent>

Now when I go to the KML file directly it trys to download the file. I think that is a good thing, at least I hope I am in the right direction. But the paths still dont load in my JS Api map.

Any one have any thing else I can try? I am stuck at the moment. First time using KML files.

Upvotes: 1

Views: 2781

Answers (2)

geocodezip
geocodezip

Reputation: 161334

The simplest way to use output from MyMaps is to link to it directly:

var kmlLayer = new google.maps.KmlLayer({
  url: "http://www.google.com/maps/d/kml?forcekml=1&mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY",
  map: map
});

Then the map updates when you change the MyMap and you don't need to configure your server to serve the KML.

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  var mapOptions = {
    center: {
      lat: 45,
      lng: -100
    },
    zoom: 2,
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var kmlLayer = new google.maps.KmlLayer({
    url: "https://www.google.com/maps/d/kml?forcekml=1&mid=1D3USEeIbdVN3zV4B0S8jgODVIS0NHGvY",
    map: map
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id='map_canvas'></div>

Upvotes: 1

matrix8369
matrix8369

Reputation: 71

YURIKA! I got it to work. So in godaddy I had to go into my MORE/IIS Management and make a KML folder. While running IIS 7. Then in my file manager I now had a KML folder at the webroot of my site. I placed the KML file in there and updated the new KML location in http://matthewjohnwilson.com/Maps/Maps.html and it worked. So now I just need to house all of my KML files in the KML folder on the root of my site.

Upvotes: 1

Related Questions