サポート » プラグイン » Location Fieldで固定ページにGoogle Mapsを表示させるには?

  • 解決済 ゆきんこ

    (@kitaguni_ht)


    Advanced Custom Fields – Location Fieldを使用して、アクセスマップと拠点毎の地図を表示させたいと思っていますが、いまいち使い方がわかりません。
    検索しても、表示させるためのコードまで説明されている方を見つけられませんでした。

    最初は、Documentation(http://www.advancedcustomfields.com/resources/field-types/google-map/)を参考に設置してみました。
    いつもなら大体Documentationを参照すれば上手くいのですが、表示できません。
    住所を入力しても、海のど真ん中が表示されてしまいます。
    $をjQueryに置き換えたりもしましたが結果は同じでした。

    GitHubからreadme.txt(下記)を参照し試してみましたが、こちらは真っ白な画面が表示されるだけです。
    そもそも下記のコードではbxsliderが使われている理由もよくわかりません。

    Retrieving the value(s) on the front-end differs according to the Map address options.

    * Coordinates & address
    $location = get_field('location'); echo $location['address']; echo $location['coordinates'];
    * Coordinates
    the_field('location');
    *Google maps V3

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        var myLatLang = new google.maps.LatLng( <?php  $location = get_field('location'); echo $location['coordinates']; ?>);
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: myLatLang,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            var marker = new google.maps.Marker({
                position: myLatLang,
                map: map,
                title:"Hello World!"
            });
        };
        google.maps.event.addDomListener(window, 'load', initialize);
        $('.bxslider').bxSlider({
            minSlides: 5,
            maxSlides: 5,
            slideWidth: 192,
            slideMargin: 0,
            adaptiveHeight: true
        });
    </script>
    <div id="map-canvas"></div>

    それから、下記のコードが簡単だよーという書き込みも見つけ、試しましたらうまく表示できました。
    が、これだとLocation Fieldを使用しなくてもいいのでは?というのと、Location Fieldの機能が使えないので意味がないなと思いました。

    <?php if(get_field('cf_access_map')) { ?>
    <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?php echo the_field('cf_access_map'); ?>;t=m&z=12&iwloc=A&output=embed&iwloc=near"></iframe>
    <?php } ?>

    便利なプラグインなのでぜひ使用したいのですが…どなたかご教授お願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Advanced Custom Fields – Location Field はどこからインストールしたものでしょうか?

    公式ディレクトリにホストされているもの (http://wordpress.org/plugins/advanced-custom-fields-location-field-add-on/)はACF4以上では動きません。

    また、最近リリースされたACF4.3.2から Google Mapというフィールドが追加されました。が、、、これはLocation Field Addonが追加するものとは一切関係ありません!!!!!

    Location Field Addonが追加するのは、Location Mapというフィールド名です。
    APIも微妙に異なっていて、get_fieldの戻り値は

    Location Map

    Array ( [coordinates] => 35.660064,138.58916399999998 [address] => 善光寺 )

    Google Map

    Array ( [address] => 善光寺 [lat] => 35.660064 [lng] => 138.58916399999998 )

    のような感じになっています。
    なのでまず、何をお使いかを確認してみてください。その上で値の取り方を変更すればちゃんと動作すると思います。

    ちなみにLocation Field Addonを有効にすると、Google Mapのほうがちゃんと動作しなくなります。

    返信ありがとうございます。

    Advanced Custom Fields: Location Fieldは、ACF公式サイトからDLしたものをインストールしており、公式ディレクトリのホストされているものとは微妙に名前が違いましたが、バージョンは同じく1.0.0でした。

    ご指摘の通り、Location Fieldを停止。Google Mapを利用し、Documentationの方法の通りに記載しましたら正常に動作いたしました!

    フィールドタイプにLocation FieldとGoogle Mapの選択肢が表示されていることはずっと気になってはいたのですが、どうやら関係性がないこと、またACF4以上で動作しないことも英語を理解しきれていなかったようです。
    ACF4.3.2からGoogle Map機能が追加されたので、Add-onを利用しなくてもいいよということでしょうか?
    あとzoomの値に関しても勘違いしていたようです。それぞれのマップでzoomの値を選べて便利なんだと思っていましたが、表示する時には全マップzoomの値は固定されてしまうのですね。

    非常に助かりました。本当にありがとうございます。
    解決済みとさせていただきます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Location Fieldで固定ページにGoogle Mapsを表示させるには?」には新たに返信することはできません。