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

Enable/Disable placemarks from kml files in the Maps API?

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

WMS Layer provide by Map Server rendering incorrectly in ol3

I have created a map using OpenLayers3 which contains two layers. First layer is Open Street Map Layer and the second one is WMS layer provided by the Map Server.
Problem- When i'm rendering first layer it is rendering properly no issue. but when i'm rendering the second layer(provide by map server) it renders incorrectly means it does not fit to its container and it is out of sync with the first layer in terms of location. See this snapshot of the maps for more clarification. In the snapshot top layer is wms layer provide by map server.
Also when i'm zooming or moving the map then both layers work correctly but after a delay of few seconds the second layer(wms layer from map server) again switches back to its initial position(Position that is shown in above attached snapshot).
This is the code that i'm using to consume wms service.
var layer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:19090/rasters/world/wms',
params: {
'LAYERS': 'world',
'mode': 'map',
},
serverType: 'mapserver'
})
});
This is my map file.
MAP
NAME "world"
CONFIG "MS_ERRORFILE" "/home/neelesh/Projects/georbis/data/logs/mapservice_errors.log"
CONFIG "PROJ_LIB" "/home/neelesh/Projects/georbis/deps/proj.4-master/share/proj"
CONFIG "ON_MISSING_DATA" "LOG"
DEBUG 5
EXTENT -180.000 -90.000 180.000 90.000
SHAPEPATH "/home/neelesh/Projects/georbis/data/service_data/data/wms"
IMAGECOLOR 255 255 255
SIZE 1350 675
WEB
METADATA
"wms_title" "Georbis WMS Server"
"wms_author" "VizExperts"
"wms_onlineresource" "http://192.168.1.36:19090/rasters/world/wms?"
"wms_enable_request" "*"
"wms_srs" "EPSG:4326 EPSG:3857"
"wms_feature_info_mime_type" "text/html"
"wms_format" "image/jpg"
END
END
PROJECTION
"init=epsg:4326"
END
LAYER
NAME world
TYPE RASTER
DATA "world.tif"
METADATA
"wms_title" "BlueWorld Map"
"wms_srs" "epsg:4326"
"wms_server_version" "1.1.1"
END
PROJECTION
"init=epsg:4326"
END
END
END
I tried ol.view.fit method to fit the layer to its container but the value of layer.getExtent() for the layer is undefined.
Pleas help me to find out what is wrong. is there any problem with wms request format or the map file?

It's because you configured your MapServer to support only EPSG 4326. It should support EPSG 3857 (the OSM tiles). You should change "wms_srs" "epsg:4326" to "wms_srs" "EPSG:4326 EPSG:3857" (see the official WMS server doc). You can confirm it works doing a GetCapabilities request.
When you use GeoServer, by default, it supports all projections for WMS (so it works because your WMS images are requested with EPSG 3857)
You should be aware that now you can also do raster reprojection on client in OpenLayers. For some demos, go to http://openlayers.org/en/v3.11.0/examples/ and search with keyword "reprojection"

cannot import more than 18 KML files on google map using JavaScript?

I am trying to import a bunch of KML files from the server and then adding them to the Map. I have an overall count of 23 KML files on the server which i plan to import on the map.
However what i experience is that it would only allow me to import 18 kml layer on the map not more than that. The moment i add an extra one in the list it would just not show anything but than a plan Google map.
Is there a limitation on the number of KML files i can import on a map ? If yes is there a way to work around because i have 23 files in all.
var ctaLayer1 = new google.maps.KmlLayer({
url:'http://www.xyz.com/cfv/maps/1ALL.kml'
});
var ctaLayer2 = new google.maps.KmlLayer({
url:'http://www.xyz.com/cfv/maps/2ALL.kml'
});
ctaLayer1.setMap(map);
ctaLayer2.setMap(map);
ctaLayer3.setMap(map);
ctaLayer4.setMap(map);
ctaLayer5.setMap(map);
ctaLayer6.setMap(map);
ctaLayer7.setMap(map);
ctaLayer8.setMap(map);
ctaLayer9.setMap(map);
ctaLayer10.setMap(map);
ctaLayer11.setMap(map);
ctaLayer12.setMap(map);
ctaLayer13.setMap(map);
ctaLayer14.setMap(map);
ctaLayer15.setMap(map);
ctaLayer16.setMap(map);
//ctaLayer17.setMap(map);
//ctaLayer18.setMap(map);
ctaLayer19.setMap(map);
ctaLayer20.setMap(map);
// ctaLayer21.setMap(map);
// ctaLayer22.setMap(map);
//ctaLayer23.setMap(map);

There is a limit. Check google docs:
There is a limit on the number of KML Layers that can be displayed on a single Google Map. If you exceed this limit, none of your layers will display. The limit is based on the total length of all URLs passed to the KMLLayer class, and consequently will vary by application; on average, you should be able to load between 10 and 20 layers without hitting the limit.