I’m currently testing google maps via the V3 API right now on our development server, and what I’m trying to do is import a KML layer that is from one of the usual “my maps” from maps.google.com. The point of this is I want some functionality that’s in the API, but want people to be able to easily add or remove points from the map when needed.
Anyway, just displaying the map via the API does fine. Getting the KML does fine – I can’t see anything wrong with it. However, when I add the KML to the map in the API, the points from the KML show up, but the entire map goes white so the ONLY thing that is displaying are the markers.
I’ve tried changing the map type (eg Roadmap vs. Terrain) to no avail. Again, I can’t see anything wrong with the KML and I’ve verified that it appears to work elsewhere. This is happening in every browser I try, which suggests I messed something up in the coding but I can’t figure out what.
Due to our CMS mucking up the maps code, I’m just importing it as an external .js file. This is what it looks like:
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(37.668046, -79.749756),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var participantsLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?msa=0&msid=204048902337864904598.0004cc332e8034251c1db&ie=UTF8&ll=37.668046,-80.289717&spn=1.959603,5.642338&output=kml');
participantsLayer.setMap(map);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=abc.def&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Thank you.
Works fine for me in its own page. I suspect something in your css (probably your CMS that is mucking up the maps code), doubt it has anything to do with any of the tags you have put on your question.