4

WordPressのページの1つに、Google Maps APIを使用してGoogleマップを追加するだけです。「Hello, World」の Google マップ コードをどこかにコピー アンド ペーストして、マップをページに表示する簡単な方法はありますか?

ありがとう

4

1 に答える 1

10

はい、このようなプラグインは必要ありません。まず、header.phpにGoogleマップスクリプトを含めるか、キューに入れます。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

次に、通常、header.phpに以下を追加します。これにより、マップのみを含むページ（この場合は374ページ）のタグに条件付きコードが追加されます。

<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>

次に、連絡先ページのカスタムテンプレートを作成し（マップが通常表示されているページであるため）、そのページのテンプレートに次のようなものを含めます。はい、コードサンプルにはおそらく少し長いですが、クリックしてクライアントのアドレスを表示できるアニメーションマーカーを含む実際の例を示しています。デザインに合わせてインラインの寸法を変更できます。また、マップをオフセットして、マーカーがマップの真ん中に正しく収まらないようにすることもできます。

    <div id="contact-content">

            <script type="text/javascript">
            function initialize() {

                var leeds = new google.maps.LatLng(53.80583, -1.548903);

                var firstLatlng = new google.maps.LatLng(53.80583, -1.548903);              

                var firstOptions = {
                    zoom: 16,
                    center: firstLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP 
                };

                var map = new google.maps.Map(document.getElementById("map_leeds"), firstOptions);

                firstmarker = new google.maps.Marker({
                    map:map,
                    draggable:false,
                    animation: google.maps.Animation.DROP,
                    title: 'Your Client',
                    position: leeds
                });

                var contentString1 = '<p>The Address<br />Of your client<br />in<br />here</p>';


                var infowindow1 = new google.maps.InfoWindow({
                    content: contentString1
                });

                google.maps.event.addListener(firstmarker, 'click', function() {
                    infowindow1.open(map,firstmarker);
                });

            }
            </script>

            <div class="map">

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

            </div>

        </div>

他の誰かがそれを別の、より良い方法で行うなら、私はそれを見たいと思っていますが、私はこれをたくさんのサイトで使用していて、それは本当にうまくいきます。

于 2012-07-24T19:34:48.267 に答える