0

背景: 私のクライアントは、(購入した機能豊富なテーマを使用して) 独自の WordPress サイトを構築しており、クライアントが望むカスタマイズを実現するために、必要に応じて子テーマを変更しています。テーマには、上部に全幅の Google マップを含むページ テンプレートが付属しており、テーマ オプション内で設定された単一の住所からマーカーを取得します。これは、1 つのメインの「お問い合わせ」ページに使用するためのものです。

クライアントのビジネスには複数の場所があり、各場所のページにそのような地図を含めたいと考えています。(例は以下にリンクされています。) 理想的な解決策は、Post のショートコード内で住所を指定し、マップ マーカーを設定できるようにすることです。

テーマがマップを作成する方法は次のとおりです ($mapAddressはテーマ オプションのアドレスです)。

    <?php
$mapAddress = ot_get_option( 'map_address' );
$mapHeight = ot_get_option( 'map_height' );
$mapContent = ot_get_option( 'map_content' );
?>
<section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script>
        jQuery(document).ready(function(){

        // Map Options
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeControl: true,
            scaleControl: false,
            panControl: false,

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // The Map Object
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var address = "";
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "address" : "<?php echo $mapAddress; ?>" }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address = results[0].geometry.location;

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                position: address, 
                map: map,
                clickable: true,
                animation: google.maps.Animation.DROP
                });

                var infowindow = new google.maps.InfoWindow({ content: "<?php echo $mapContent; ?>" });
                google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker);
                });

            }
        });

        });
        </script>

        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->

これは、私が作成したカスタム ページ テンプレートを使用したテスト ページです。現在、上記と同じマップ コードを使用しています。（編集：以下の更新を参照してください。）

アドレス属性を取り、それを に設定するショートコードを作成しようとしましたが、うまくいき$mapAddressませんでした。ループが解析されるまでにマップが既に読み込まれているためだと思います。適切な住所を取得するために投稿に「戻ってくる」ようにマップに指示するにはどうすればよいですか?

私の専門は HTML と CSS ですが、Javascript はかなり簡単に混乱するので、実装を説明するときは明確にしてください。

ボーナス: さらなる目標は、場所の親ページにもそのようなマップを含めることですが、複数の場所を表す複数のマーカーを含めることです。複数の場所を取得する場合、Google マップは緯度/経度のみを受け入れます。クライアントに座標を気にしてほしくないので、ジオコーディング サービスで何かできることがあるとわかっているので、代わりにアドレスのリストを入力するだけで済みます (同じ、または同様の、クライアント用に開発されたショートコード ソリューションに)。私の主な質問）。しかし、私はそれを行う方法について非常に無知です。

アップデート

Brett の指摘に従って、テスト テンプレートを HTML のみに更新しました。

    <section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->

すべてのスクリプトをショートコードに追加しました。これは、投稿の冒頭で呼び出されます。テスト ページ (上記のリンク) で、Post に実際にスクリプトを記述している様子を確認できますが、マップは#mapdiv にレンダリングされていません。理由はありますか？

4

2 に答える 2

0

jQuery ブロックは、get element by id を使用してターゲット div を見つけるため、JavaScript がページのどこに配置されていてもかまいません。

于 2013-06-29T04:17:15.260 に答える
0

目的の住所が得られるまでマップのレンダリングを保留する必要があるため、スクリプト ブロック全体を取得して、代わりにショートコード マクロでレンダリングします。そうすれば、テーマ オプションからではなく、引数からショート コード マクロへの map_address と map_content を正しく入力できます。ここで意味のある唯一のテーマ オプションは map_height です。

于 2013-06-27T03:39:54.990 に答える