web-dev-qa-db-ja.com

GoogleマップとYandexマップは正しい機能しません

私のWordPressページに地図を挿入しようとすると、写真のようにいくつかのコントロールがある灰色のフィールドしか表示されません。 enter image description here

関係ありません、私がどのようにページに入れるか：特別なプラグインを使うことによって、または私自身のJavaコードによって。私はWordPress 3.2.1を使用しています。WordPressバージョン1.0.3用のGoogle MapsとWordpressバージョン1.3.1用のYandex Maps、そして自分自身のコードを試してみました（HTMLのページの本文に挿入しています）。モード）：

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

私はさまざまなブラウザの下で問題をテストしました：オペラ10.51、グーグルクロム、IE8

pluginsjavascriptgoogle-maps
2
Alexey Shatygin

これらのエラーは、マップ上の要素にも適用されているWordPressテーマのCSSルールに由来します。たとえば、あなたのページでは、余白を増やす#content tableと#content tr thのルールを無効にすることでポップアップを修正できました。テストのセットアップでは、Twenty Elevenの.entry-content img { max-width: 97.5% }のせいでタイル間に灰色の隙間ができました。

Map with gaps between the tiles

おそらく最も簡単な解決策は、メインのCSSルールがそこに適用されないようにiframeにマップを埋め込むことでしょう（私はあなたがそれをAPIでできるかどうかわかりませんか？）それがあなたの状況に受け入れられない場合、あなたは 地図のためのWordPress規則 を元に戻す追加の規則を追加するか（例えば.entry-content .map-canvas img {max-width: none}）、もっと明示的な規則を（!importantで）追加するように地図プロバ​​イダーに依頼できますそれらが提供するスタイルシートに。

3
Jan Fabry

あなたが提供した簡単なテストスニペットから、地図を正しく埋め込んでいるように見えます。その地図には何もありません。マーカーはどこの中央をも指していないので、ドラッグすると道路が見えます。

これをページの本文に挿入していますか？ HTMLモードでは？

WordPressでスクリプトを扱うときは、 wp_enqueue_script() を使用することをお勧めします。しかし、あなたの例はそのままでうまくいくように見えるので、それはあなたの問題を解決しないかもしれません。

更新

Twenty Elevenテーマに固有のものに絞り込みました。

2
Rarst