We Keep Coding

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.

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>

Save google maps markers locally

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

Can't get relative URL's working in OpenLayers3

After three days of vainly looking everywhere (learning books OpenLayers3, Javascript and Internet) for a solution I put my question here.
The problem is that I can't get relative url's working in OpenLayers3. Here I give an example:
I have a OpenLayersscript in a map/directory called sandbox.
The relative url's in the HTML part of this script are working, including the relative url in javascript to ol.js.
The problem is that the relative url in the Javascript part of the script don't work. Only when the targetfile (nutsv9_lea.geojson) is in a map/directory underlying the map/directory containing the OpenLayersscript itself, it works, but only in Firefox and not in Google Chrome and InternetExplorer.
The map sandbox (containing this OpenLayersfile) is located in the maps/directories structure: C:/ol3_samples/sandbox
The targetfile (nutsv9_lea.geojson) is located in the maps/directories structure: C:/ol3_samples/assets/data/nutsv9_lea.geojson
The relative url I use is: url: '../assets/data/nutsv9_lea.geojson'
The only working solution (as mentioned above only in Firefox) is the relative url targeting to a underlying map/directory called 'data' containing the target file: url: 'data/nutsv9_lea.geojson' in the map/directory structure: C:/ol3_samples/sandbox/data/nutsv9_lea.geojson
What am I doing wrong or am I overlooking?
<script>
var vectorSource = new ol.source.GeoJSON({
projection: 'EPSG:3857',
//not working relative url:
// url: '../assets/data/nutsv9_lea.geojson'
//working url (with the targetfile in a directory below the directory containing this script) but only working in Firefox and not working in Chrome and InternetExplorer
url: 'data/nutsv9_lea.geojson'
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var center = ol.proj.transform([5.231819, 52.091852], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 5
});
var map = new ol.Map({
target: 'map',
layers: [vectorLayer],
view: view
});
</script>

I'm one of the authors of the book where this extract comes from. You need to run a local server (where files are served via http:// and not file://).
You just need to look at p 117.
It tells you can run (as long as you have Python)
python -m SimpleHTTPServer
or in case you got the samples from Packt website, run (if you have node)
node index.js
For both NodeJS and Python, you have install instructions (pages 417 & 418),
For Python and people who do not own the book, go to http://docs.python-guide.org/en/latest/starting/installation/

Custom Google Map Icon with Heroku

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
});

How to draw a line following the road in OpenLayers

On an OSM base layer, I have drawn a line following 3 points, with an array for the points and the object/method OpenLayers.Geometry.LineString
Now, I'd like this line to follow the road. Some hours spent on internet, and impossible to find a solution. Is there an object for this ? Do I have to catch some information from the tiles first ?
May I ask some help please ?
Here under is how I'm drawing the straight line
function init() {
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var map = new OpenLayers.Map('map');
var osmLayer = new OpenLayers.Layer.OSM("OSM");
map.addLayer(osmLayer);
var center = new OpenLayers.LonLat(-71.6, -33.7).transform(epsg4326,map.getProjectionObject());
map.setCenter(center,4);
var points = new Array(
new OpenLayers.Geometry.Point(-71.26,-32.47),
new OpenLayers.Geometry.Point(-71.30,-32.97),
new OpenLayers.Geometry.Point(-70.81,-32.89)
);
var myLine = new OpenLayers.Geometry.LineString(points).transform(epsg4326, map.getProjectionObject());
var myLineStyle = {strokeColor:"#0500bd", strokeWidth:3};
var myFeature = new OpenLayers.Feature.Vector(myLine, {}, myLineStyle);
var myVector = new OpenLayers.Layer.Vector("line test");
myVector.addFeatures([myFeature]);
map.addLayers([myVector]);
}

Usually OpenLayers just displays raster tiles but you can't extract road geometry information out of them. You need either raw or otherwise pre-processed data for this. Both OpenLayers and Leaflet are able to display GPX files. So once you got a GPX file everything else will become easy.
Unfortunately you didn't tell us whether you want to follow it a specific road (based on a name/address? or based on coordinates?) or whether you want to display a route along several roads or something completely different.
For retrieving raw geoinformation out of OpenStreetMap there is an official API, and there is the Overpass API which is usually a lot faster and allows to specify rather complex queries. But displaying such raw data requires a lot of preprocessing first.
If you want to display a route instead then you can choose one of the available online routers for OSM, for example OSRM. Many of them offer a GPX export of the calculated route which you can then use with OpenLayers.
There are a few more options but presenting them here without knowing what you are actually trying to do would be a waste of time.