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.
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.
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>
Related
building a map (using html and JS) with several markers, different labels and colors, it takes time to use google function
http://maps.google.com/mapfiles/ms/icons/color.png
Is that possible to store and use local png images, or, better to save image code (eg base64) into vars ?
Thanks a lot
Sure it is, in the main loop where you are defining markers, use something like this and that will work:
marker[ i ] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng( lat, lng ),
title: krexmap[ i ].title,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUh...",
});
Icon, can be a url path but for sure you can also use datauri.
Note: I took that code from my project
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 37.06, lng: -95.68}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
suppressInfoWindows: true,
map: map
});
}
A simple example of loading a KML file, which will display the placemarks on the map, taken from: https://developers.google.com/maps/documentation/javascript/examples/layer-kml-features
My question is, how can I toggle the placemarks? I want to have all of them disabled at first, but as I run tests, searches, or whatever, I can have certain ones displayed. How can I do this?
You can't modify the displayed placemarks in a KmlLayer dynamically.
Options:
use a third party KML parser like geoxml3 or geoxml-v3, they display the KML as native Google Maps Javascript API v3 objects, which can be hidden/shown dynamically.
example
import your KML into FusionTables and use a FusionTablesLayer, you can toggle the displayed objects by changing the layer query.
create dynamic KML on your server and display that using KmlLayer
I have tried to follow the following example at, https://gist.github.com/webapprentice/8427539, which when ever I try to display their KML from an external link I am able to display the polygon correctly, however if I copy and past the KML into a file and place this file on my server I am not able to display the results for the KML file. This is true of any third party KML file. Interestingly, I've noted that the coordinate values are inverse, but whenever I switch these values using http://kmltools.appspot.com/geoconv the KML file still does not function properly. I assume that the KML information is valid, because when I enter the contents into the text box at http://display-kml.appspot.com/ the map to left displays my polygons correctly.
In order to find a solution, I have added geoxmlv3.js to my server and am trying to parse the KML file into a format that my maps can understand as I assume that my server is not able to render the KML file properly. You can view the results of the KML file below under the HTML & JavaScript. GeoXML gives me two errorrs: Missing catch or finally after try and geoXML3 is not defined. These errors do not make much sense to me as I have already decleared the file above in my code which you can see below.
In addition, I have had a mime type added to IIS where file extention is kml and type is application/vnd.google-earth.kml+xml. I believe that this mime type works because when the page is directed to the file, the file is downloaded as does any other third party KML file.
========= HTML & JavaScript ==========
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 90%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAjC_rKyBOaIBHtTu39GjC8h4SFWxry-s4"></script>
<script src="/js/geoxmlv3.js"></script>
<script>
var map;
var mylocation = {
'latitude': 47.66,
'longitude': -122.355
}
function initialize() {
var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var myParser = new geoXML3.parser({map: map});
myParser.parse('/zoneManagers.kml');
// This needs to be the Full URL - not a relative URL
// var kmlPath = "zoneManagers.kml";
// // Add unique number to this url - as with images - to avoid caching issues during development
// var urlSuffix = (new Date).getTime().toString();
// var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix );
//layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
===== KML File =====
https://www.dropbox.com/s/q4v8eru0o3zp8xq/zoneManagers.kml?dl=0
About not being able to display the results of the KML file when you host it on your server. What server are you talking about ? Are you talking about a dev server running for example on localhost, a server in your local LAN or a public server accessible by anyone?
Are you using a fully-qualified URL for the KML like in the gist http://web-apprentice-demo.craic.com/assets/maps/fremont.kml ? Can the URL you're specifying be copy/pasted in any browser to access the file without any restrictions?
Google need to be able to access the KML file to process it and it's using the URL you're specifying to access it. If you're running on localhost, a private server or not specifying a public fully-qualified URL, Google can't access it.
If you're not doing that, you need to place the KML file on a public available domain and specify a fully-qualified public URL.
This option is not always possible if you're dealing with sensitive information, so your idea to use geoxml3 is the best option.
I have no problem running the code you provided and to successfully display the map & the KML file.
Since geoXML3 is not defined, I think it's possible you're not importing the file correctly.
Is your geoxmlv3.js in a js folder ?
Are you importing the correct file ? (source)
Did you rename the official file named geoxml3.js to geoxmlv3.js since you're trying to import /js/geoxmlv3.js and not /js/geoxml3.js ?
Is the js folder at the root of your server ? You may need to use js/geoxml3.js instead without the first /.
You can also check in your browser inspector (Network tab) that geoxmlv3.js is correctly loaded.
The 200 status code indicates that the geoxmlv3.js is correctly loaded.
I created my google map. Imported markers from google spreadsheet. Shared this map publicly. Export like KMZ. With choosing option "Keep data updated". Then In my JS Application trying to load KML Layer. I am using link that was placed inside downloaded kmz/kml file.
http://www.google.com/maps/d/u/0/kml?forcekml=1&mid=zmJT0iVx3pVs.kmPWwDLpv90w&lid=zmJT0iVx3pVs.kenD66KR2z4o
screenshot http://screencloud.net/v/lRjb
My JS code.
var myOptions = {
center: new google.maps.LatLng(49.988997, 36.225374),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var kmzLayer = new google.maps.KmlLayer('http://www.google.com/maps/d/u/0/kml?forcekml=1&mid=zmJT0iVx3pVs.kmPWwDLpv90w&lid=zmJT0iVx3pVs.kenD66KR2z4o');
kmzLayer.setMap(map);
I have no seen any diagnostic in console.
So My Question is:
1) How to load this data? I need user of "My Map" able to add new places using this spreadsheet/map.
2) I see in these exported kml a lot options(columns) that exist in spreadsheet, but not chosen for description. It is not secure to use this columns. In the reason i want to see just address and title on the map
I am deploying a rails site that includes an embedded google map. I have a couple images I wanted to use as custom google map icons, but I cannot get them to display when deployed to heroku (404 error).
I know that for background images to show I use a scss file with image-url, but I can't figure out how to format the JS file for heroku to find the image.
var map = new google.maps.Map(mapCanvas, mapOptions);
var wedding = 'assets/glyph-ring.png';
var weddingPosition = new google.maps.LatLng(44.192309, -82.243499);
var marker = new google.maps.Marker({
position: weddingPosition,
map: map,
icon: wedding
});