KML-file loaded but background map not visible_问答_开发者

This is what I used to display a KML-file in Google Maps:

HTML

<div id="map_canvas" style="width: 600px; height: 400px"></div>

Javascript

function map_initialize() {
  var myLatlng = new google.maps.LatLng(52.200874,6.009521);
  var myOptions = {
    zoom: 7,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

  var nyLayer = new google.maps.KmlLayer(
      'http://maps.google.com/maps/ms?ms开发者_StackOverflowa=0&msid=114680467578999980893.00049426282c85822d40e&output=kml');
  nyLayer.setMap(map);
}

jQuery(function(){map_initialize()});

Here you can see the result: http://www.taizefriesland.nl/?page_id=7

The KML-file is loaded but the background map is not visible. How can I show the hibryd background map?

I've seen this problem before, when I first started using the Google Maps API V3. If you used any document type other than HTML 5 (using just the doctype element as they show in their "Hello World" map) this exact behavior would be exhibited. Google has improved the API since then, and you can actually use a doctype such as XHTML 1.0 Transitional, HTML 4.0.1 Strict, and suchlike. I see that you're using XHTML 1.0 Transitional, so that's what I used in this cut down example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map Test</title>
<style type="text/css">
#map_canvas {
    width: 600px;
    height: 400px;
}
</style>
<link rel='stylesheet' id='contact-form-7-css'  href='http://www.taizefriesland.nl/wp-content/plugins/contact-form-7/styles.css?ver=2.4.1' type='text/css' media='all' />
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/prototype.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/scriptaculous/effects.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://www.taizefriesland.nl/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type="text/javascript" src="http://www.taizefriesland.nl/wp-content/plugins/cryptx/js/cryptx.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.taizefriesland.nl/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.taizefriesland.nl/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Taizé Friesland' href='http://www.taizefriesland.nl' />
<link rel='prev' title='Inschrijven Franeker/ Harlingen' href='http://www.taizefriesland.nl/?page_id=6' />
<link rel='next' title='Franeker' href='http://www.taizefriesland.nl/?page_id=11' />
<link rel='canonical' href='http://www.taizefriesland.nl/?page_id=7' />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function map_initialize() {
    var myLatlng = new google.maps.LatLng(52.200874,6.009521);
    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

    var nyLayer = new google.maps.KmlLayer('http://maps.google.com/maps/ms?msa=0&msid=114680467578999980893.00049426282c85822d40e&output=kml');
    nyLayer.setMap(map);
}

jQuery(function(){map_initialize()});
</script>
</head>
<body>



<div class="post-headline"><h1>Taizé jongerengebeden</h1></div>
<div class="post-bodycopy clearfix">
<p>Uit het feit dat Taizé wekelijks duizenden jongeren ontvangt, blijkt dat het jongeren aanspreekt om bij een gebed in de sfeer van Taizé aanwezig te zijn.<br>
Verschillende groepen willen jongeren de gelegenheid bieden om dichter bij huis een gebed bij te wonen.<br>
Het Taizégebed is oecumenisch: het wordt meestal voorbereid door jonge mensen die afkomstig zijn uit verschillende kerken.</p>
<p><em>Er wordt niets van je verwacht,<br>
er wordt je niets gevraagd.<br>
Er ligt alleen een uitnodiging.</em></p>

<div id="map_canvas" style="width: 600px; height: 400px">
<p><a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=nl&amp;msa=0&amp;msid=114680467578999980893.00049426282c85822d40e&amp;t=h&amp;z=8" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','maps.google.com']);">De kaart openen in Google Maps.</a></p>
</div>
</body>
</html>

To help see if it made a difference, I've loaded all the JS libs and CSS that your page is using. As a first crack, try doing what I did and adding an explicit style definition (but leave your inline one) that specifies the dimensions of #map_canvas as 600px wide and 400px high. I know there are limitations when you're using WordPress, so that a lot of the HTML above is actually generated by it, not you manually editing. The only thing I can guess is that there's something modifying the z-index of the elemnts in your DIV. Taking the above HTML and putting it on a web server works 100%.