８月１９日のブログ記事で、GoogleMaps APIを用いて作成した地図がWordPressに組み込むと表示されないという話をしました。

その後、一応解決しまして、地図は表示できるようになりました。

原因は、JavaScript側ではなく、HTML側にありました。

地図表示する部分のHTMLコード（厳密にはCSS部分）が、

<div id="map_canvas" style="width: 60%; height: 60%;"></div>

だと地図が表示されず、

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

だとちゃんと表示されるのです。

あら不思議。

違いは「height:」の要素を「%」で指定するか「px」で指定するかってこと。

「width:」の要素は「%」でも「px」でもどちらでも関係なく表示されました。

こんなことかよ・・・、と。

ま、とりあえず表示されて一安心・・・。

と、、、思いきや、もう１つ新たな問題にぶち当たりました。

表示すると、上図のような感じ。

どこが変なの？と思われることでしょうが・・・

次の図と見比べてみてください。

おわかりでしょうか。

地図の左側にズームスライダとペグマンが表示されているかどうか！なのです。

当然、表示されている方が正常です。

いろいろと情報を探して、対処法を試してみたのですが、どうしても表示されない・・・と困り果てました。

テーマはBizVektorを使っています。

もしや？と思って、他のテーマに変えてみたところ、なんと正常に表示されました。

それが下図なのです。

正常表示される方のテーマはTwenty Thirteen。

他にも標準で入っているTwenty Fourteen、Twenty Twelveでも正常に表示されます。

問題は、BizVectorというテーマにあったんですね・・・。

今、生徒さんが一生懸命作っているホームページはBizVectorを使っているんですよね。

困りました。

「Simple Mapプラグインを使用した場合マップのズームアイコンが表示されない」

（http://bizvektor.com/forum/forums/topic/simple-mapプラグインを使用した場合マップのズームアイ/）

に書いてある対処法も試しましたが、解消されませんでした。

もうちょっと情報を探してみますが、こればっかりはちょっとお手上げっぽい感じがしています。

↓応援クリックしていただけると、はげみになります！！

人気ブログランキングへ

にほんブログ村