web-dev-qa-db-fra.com

Google Maps et Yandex Maps ne fonctionnent pas correctement

Lorsque j'essaie d'insérer une carte dans ma page WordPress, je ne reçois qu'un champ de couleur grise avec certaines commandes, comme indiqué sur l'image: enter image description here

Peu importe la façon dont j'ai inséré dans la page: en utilisant un plugin spécial ou avec mon propre code Java. J'utilise WordPress 3.2.1 et j'ai essayé Google Maps pour WordPress version 1.0.3 et Yandex Maps pour Wordpress version 1.3.1 ainsi que mon propre code (je l'insère dans le corps de la page en HTML) mode):

    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AMJ1a04BAAAAOmnzVwIABchZJOPWw6JctS7eImmgemUoTmoAAAAAAAAAAABWck3wMFJCrzXTLH0AiuIpVEzpZA=="
    type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var mapHybrid = new YMaps.Map(document.getElementById("YMapsHybridTypeId"));
            var mlHybrid = new YMaps.YMapsML("http://maps.yandex.ru/export/usermaps/jR_c2iaexA-htEui33mTTEmko4oPpRS-/");
            mapHybrid.addOverlay(mlHybrid);
            mapHybrid.setCenter(new YMaps.GeoPoint(-1,-1));
        }
    </script>
    <div id="YMapsHybridTypeId" style="width:640px; height:480px; float: left; margin: 10px 0 0 0"></div>

J'ai testé le problème sous différents navigateurs: Opera 10.51, Google Chrome, IE8.

pluginsjavascriptgoogle-maps
2
Alexey Shatygin

Ces erreurs proviennent des règles CSS de votre thème WordPress qui s'appliquent également aux éléments de la carte. Par exemple, sur votre page, j'ai pu corriger le message en désactivant les règles #content table et #content tr th qui ajoutaient des marges supplémentaires. Dans une configuration de test, il y avait même des espaces gris entre les tuiles à cause de .entry-content img { max-width: 97.5% } dans Twenty Eleven.

Map with gaps between the tiles

La solution la plus simple serait probablement d’incorporer la carte dans un iframe afin que les principales règles CSS ne soient pas appliquées là-bas (je ne sais pas si vous pouvez le faire avec l’API?). Si cela ne convient pas à votre situation, vous pouvez ajouter des règles supplémentaires qui annulent les règles WordPress pour les cartes (par exemple, .entry-content .map-canvas img {max-width: none}), ou demandez aux fournisseurs de carte Ajoutez des règles plus explicites (avec !important) aux feuilles de style qu'elles fournissent.

3
Jan Fabry

À partir de l'extrait de test rapide que vous avez fourni, la carte est-elle correctement intégrée? Il n'y a rien sur cette carte, car les repères pointant au milieu de nulle part, vous pouvez voir une route si vous traînez.

Est-ce que vous insérez ceci dans le corps de la page? En mode HTML?

Il est recommandé d’utiliser wp_enqueue_script() lorsqu’il s’agit de scripts dans WordPress. Toutefois, votre exemple semble fonctionner tel quel, il est donc possible que votre problème ne soit pas résolu.

Mettre à jour

Réduit pour être spécifique au thème Twenty Eleven.

2
Rarst