KML fichier chargé, mais la carte de fond non visible

C'est ce que j'utilisé pour afficher un fichier KML dans Google Maps:KML fichier chargé, mais la carte de fond non visible

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

Ici vous pouvez voir le résultat: http://www.taizefriesland.nl/?page_id=7

Le fichier KML est chargé mais la carte d'arrière-plan n'est pas visible. Comment puis-je montrer la carte de fond hibryd?

Source

2010-11-04 Josjojo

il n'a pas à faire avec votre code de carte actuel, fonctionne très bien pour moi. – Galen

J'ai déjà rencontré ce problème lorsque j'ai commencé à utiliser l'API Google Maps V3 pour la première fois. Si vous utilisiez un type de document autre que HTML 5 (using just the doctype element as they show in their "Hello World" map), ce comportement exact serait exposé. Google a amélioré l'API depuis, et vous pouvez réellement utiliser un doctype tel que XHTML 1.0 Transitional, HTML 4.0.1 Strict, et autres. Je vois que vous utilisez XHTML 1.0 Transitional, de sorte que ce que j'utilisé dans ce coupé exemple:

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

Pour vous aider à voir si elle a fait une différence, j'ai chargé tous les JS libs et CSS que votre la page utilise. En tant que première fissure, essayez de faire ce que j'ai fait et d'ajouter une définition de style explicite (mais laissez votre en ligne) qui spécifie les dimensions de #map_canvas comme 600px de large et 400px de haut. Je sais qu'il y a des limites quand vous utilisez WordPress, de sorte qu'une grande partie du HTML ci-dessus est générée par lui, et non pas manuellement. La seule chose que je peux deviner est qu'il y a quelque chose qui modifie l'index z des elemnts dans votre DIV. Prendre le HTML ci-dessus et le mettre sur un serveur web fonctionne à 100%.

Source

2010-11-06 17:33:04

Je ne sais toujours pas comment rendre la carte visible. Tony, j'ai aussi essayé ta suggestion et maintenant je peux voir la carte. Maintenant, je ne peux plus voir ma navigation. – Josjojo

KML fichier chargé, mais la carte de fond non visible

Répondre

Questions connexes