KML-файл загружен, но фоновая карта не видна

Это то, что я использовал для отображения KML-файла в 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?msa=0&msid=114680467578999980893.00049426282c85822d40e&output=kml');
  nyLayer.setMap(map);
}

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

Здесь вы можете увидеть результат: http://www.taizefriesland.nl/?page_id=7

KML-файл загружен, но фоновая карта не видна. Как показать гибридную фоновую карту?


google-maps javascript kml
person Josjojo    schedule 04.11.2010    source источник
comment
это не имеет отношения к вашему реальному коду карты, у меня отлично работает.   -  person Galen    schedule 04.11.2010

Ответы (1)


arrow_upward
0
arrow_downward

Я уже сталкивался с этой проблемой, когда впервые начал использовать Google Maps API V3. Если вы использовали любой тип документа, кроме HTML 5 (только тип документа элемент, как они показывают на своей карте «Hello World»), будет продемонстрировано точно такое же поведение. С тех пор Google улучшил API, и вы можете использовать такие типы документов, как XHTML 1.0 Transitional, HTML 4.0.1 Strict и тому подобное. Я вижу, что вы используете XHTML 1.0 Transitional, поэтому я использовал его в этом урезанном примере:

<!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>

Чтобы увидеть, имеет ли это значение, я загрузил все библиотеки JS и CSS, которые использует ваша страница. В качестве первого шага попробуйте сделать то же, что и я, и добавить явное определение стиля (но оставьте свое встроенное), которое определяет размеры #map_canvas как 600 пикселей в ширину и 400 пикселей в высоту. Я знаю, что существуют ограничения при использовании WordPress, так что большая часть приведенного выше HTML фактически генерируется им, а не редактируется вручную. Единственное, что я могу предположить, это то, что что-то изменяет z-индекс элементов в вашем DIV. Взятие приведенного выше HTML и размещение его на веб-сервере работает на 100%.

person Tony Miller    schedule 06.11.2010
comment
Я до сих пор не знаю, как сделать карту видимой. Тони, я тоже попробовал твое предложение и теперь вижу карту. Теперь я больше не вижу свою навигацию. - person Josjojo; 03.12.2010