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

このトピックには7件の返信が含まれ、3人の参加者がいます。6 年、 7 ヶ月前 nfukao さんが最後の更新を行いました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #652

    Siam
    参加者

    はじめまして。
    先週から初ワードプレスに挑戦中の初心者です。
    さっそくBizVektorテンプレートをお借りして練習しているのですが、
    プラグインのSimple Mapを使用してGoogleMapを表示させた所、ズームアイコンが表示されません。
    カーソルを持って行くと指の形になり操作する事は可能です。
    また、iPadで確認して見たところきちんと表示されました。
    表示させたくても原因が分からないのでご教示おねがいします。

    #668

    nfukao
    参加者

    お世話になっております。 私も同様の症状で困っています。
    調べたところ対策法として、

    google maps api で表示した地図はレスポンシブデザインだと崩れがち。


    (私の場合も、これと同じコントロールの形になります)
    http://ot-o.net/2012/10/27/google-maps-api-v3%E3%81%A7%E3%80%81%E8%A1%A8%E7%A4%BA%E3%81%8C%E3%81%8A%E3%81%8B%E3%81%97%E3%81%84%E3%81%A8%E3%81%8D/
    を見つけたのですが、私の場合、この対策では効果がありませんでした。
    (Siamさんは如何でしょう?)
    どなたかご教示いただけませんでしょうか。よろしくお願いします。

    #669

    Siam
    参加者

    nfukaoさん

    教えていただいたサイトを参考にしてやってみましたが自分もダメでした。。。

    で、色々と調べた所、多分これだろうと思う所を見つけました!
    /wp-content/themes/biz-vektor/bizvektor_themes/002/002.css

    このcss内の365行目
    #content img { margin: 0; max-width:100% !important;height:auto; }/* height:auto;がimportantでなくてはならない理由があるかも */

    この「max-width:100%」を「max-width:none」に変更した所表示されるようになりました。
    これを変更して他に影響が無いかは不明ですが、とりあえず表示崩れもないので大丈夫かと(;)

    #670

    Siam
    参加者

    追記

    上記の表記「max-width:none」だとサイズが大きいimgは途切れていました。
    ですのでメインの幅を指定してあげることで回避しています。
    自分の場合はテーマを「Calmly Brace & Flat」を使用していますので
    「max-width:678px」としています。
    他にも良いやり方があればと思いますが、参考に。。。

    #674

    nfukao
    参加者

    すばらしい! Slamさんありがとう!!
    私も上記の方法でいけました。

    ただし、副作用としてレスポンシブ性が損なわれ、小さい画面にすると図が途切れる見たいですね。
    運用でどのようにするか少し考えてみます。
    お礼まで..

    #675

    hachiya
    参加者

    Simple Map の範囲に限定すれば良いと思いますので、

    #content .simplemap img {
    max-width: none !important;
    }

    でいかがでしょうか。.simplemapは私の環境でのdivのクラスです。

    #676

    Siam
    参加者

    hachiyaさん、すごい!
    無事に出来ました!
    また一つ勉強になりました、有難うございます!

    #677

    nfukao
    参加者

    私もできました。 hachiyaさん 本当に有り難うです!!
    私は、MapPress を使っているので、
    #content .mapp-canvas img {
    max-width: none !important;
    }
    でした。

    なお、気になったのは、子テーマ( http://bizvektor.com/setting/customize/ )を設定し、子テーマの style.css に設定を行った場合、
    MapPress はうまくいくのですが、SimpleMap はうまくいきませんでした。
    ( 002.css に書いた場合は、どちらもうまくいきました。)
    まあ私の場合 MapPress を使おうと思うので、問題ないですが..

    どちらにしても、hachiyaさん Siamさん ありがとございます。おかげで懸案が解決しました!

8件の投稿を表示中 - 1 - 8件目 (全8件中)

このトピックに返信するにはログインが必要です。