すべての投稿を1つのGoogleマップに表示する方法はありますか?


9

すべての投稿に「ジオタグ」を付けて、1つのGoogleマップに表示したい。


3
タグ付き投稿の地図を表示する最善の方法」への回答を読むことで、この質問を解決できると思います。その質問を読んでも解決できない場合は、質問を編集して、何を試し、何がうまくいかなかったかを明確にしてください。
Jan Fabry、

回答:


11

プラグインなしでこれ行うことができ、必要なのはGoogle Maps APIだけです。

1つのページに20以上のマーカーを配置する場合は、住所ではなく座標を使用して投稿を地理的に配置する必要があることに注意してください。

住所から座標を保存するには、次の方法があります。

  1. 手動でサービスを使用する(このようなもの
  2. 投稿を作成または更新するときに、WP管理者からGoogleマップのジオコーディングを呼び出します

2番目のオプションを実装する方法は質問に厳密に関連しているわけではないので、私の回答では考慮しませんが、このMaps APIの例を参照して、住所から座標を取得する方法を簡単に確認してください。

したがって、この回答では、投稿にカスタムフィールド「coords」があり、座標が2つのコンマ区切り値の文字列として格納されていると想定します'38.897683,-77.03649'

また、「page-google-map.php」ファイルに保存されたページテンプレートがあると想定しています。

次のコードを入れてください functions.php

add_action( 'wp_enqueue_scripts', 'enqueue_gmap' );

function enqueue_gmap() {
    // script goes only in the map page template
    if ( ! is_page_template('page-google-map.php') ) return;

    wp_register_script( 'google-maps-api', '//maps.google.com/maps/api/js?sensor=false', false, false );
    wp_register_script( 'posts_map', get_template_directory_uri().'/js/mygmap.js', false, false, true );
    wp_enqueue_script( 'google-maps-api' );
    wp_enqueue_script( 'posts_map' );

    // use a custom field on the map page to setup the zoom
    global $post;
    $zoom = (int) get_post_meta( $post->ID, 'map_zoom', true );
    if ( ! $zoom ) $zoom = 6;

    $map_data = array( 
        'markers' => array(), 
        'center'  => array( 41.890262, 12.492310 ), 
        'zoom'    => $zoom,
    );
    $lats  = array();
    $longs = array();

    // put here your query args
    $map_query = new WP_Query( array( 'posts_per_page' => -1, ) );

    // Loop
    if ( $map_query->have_posts() ) : 
        while( $map_query->have_posts() ) : $map_query->the_post();
            $meta_coords = get_post_meta( get_the_ID(), 'coords', true );
            if ( $meta_coords ) {
                $coords = array_map('floatval', array_map( 'trim', explode( ",", $meta_coords) ) );
                $title = get_the_title();
                $link  = sprintf('<a href="%s">%s</a>', get_permalink(), $title);
                $map_data['markers'][] = array(
                    'latlang' => $coords,
                    'title'   => $title,
                    'desc'    => '<h3 class="marker-title">'.$link.'</h3><div class="marker-desc">'.get_the_excerpt().'</div>',
                );
                $lats[]  = $coords[0];
                $longs[] = $coords[1];
            }
        endwhile;
        // auto calc map center
        if ( ! empty( $lats ) )
            $map_data['center'] = array( 
                ( max( $lats ) + min( $lats ) ) /2,
                ( max( $longs ) + min( $longs ) ) /2 
            );
    endif; // End Loop

    wp_reset_postdata;
    wp_localize_script( 'posts_map', 'map_data', $map_data );
}

ご覧のとおり、マップページテンプレートで、エンキューします

  • グーグルマップAPIスクリプト
  • mygmap.jsテーマの「js」サブフォルダにあると呼ばれるスクリプト

また、記事をループし、私は、配列を移入$map_dataして使用してwp_localize_script、私はページ内のjsに、この配列を渡します。

今、mygmap.js含まれます:

function map_initialize() {
    var map_div     = document.getElementById( 'map' );
        map_markers = map_data.markers,
        map_center  = new google.maps.LatLng( map_data.center[0], map_data.center[1] ),
        map_zoom    = Number( map_data.zoom ),
        map         = new google.maps.Map( document.getElementById( 'map' ), {
            zoom      : map_zoom,
            center    : map_center,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        } );

    if ( map_markers.length ) {
        var infowindow = new google.maps.InfoWindow(),
            marker, 
            i;
        for ( i = 0; i < map_markers.length; i++ ) {  
            marker = new google.maps.Marker( {
                position : new google.maps.LatLng(
                    map_markers[i]['latlang'][0], 
                    map_markers[i]['latlang'][1]
                ),
                title    : map_markers[i]['title'],
                map      : map
            } );
            google.maps.event.addListener( marker, 'click', ( function( marker, i ) {
                return function() {
                    infowindow.setContent( map_markers[i]['desc'] );
                    infowindow.open( map, marker );
                }
            } )( marker, i ) );
        }
    }
};
google.maps.event.addDomListener( window, 'load', map_initialize );

JavaScriptはWPに関連していないため、ここではmap_data変数の使用法を示すためにのみ示しています。私はjs開発者ではなく、コードはほぼ完全にここから取得されます

それで全部です。ページテンプレートを作成し、IDが「map」のdivを挿入するだけです。

<div id="map" style="width:100%; height:100%"></div>

もちろん、divはcssでスタイルを設定できます。マーカーの情報ウィンドウもスタイルを設定できることに注意してください。cssではh3.marker-title、情報ウィンドウのタイトルとdiv.marker-descコンテンツのスタイルを設定するために使用します。

マップの中心は自動的に計算され、デフォルトのズームを変更する場合は、マップページテンプレートに割り当てられたページにカスタムフィールド「map_zoom」を配置する必要があることに注意してください。

それが役に立てば幸い。


私はそれらの周りのブレイケットとの座標をカスタムフィールドに追加するジオコーダープラグインを持っています。例えば。(37.983917, 23.729359899999963)コードをどこで編集すれば、コードを編集して、周りのブレイケットとコードを使用できるようになります。私の試みは失敗しました。素晴らしいけれどもこの回答をありがとう!
steie

2
あなたが変更することができ@stemie $meta_coords = get_post_meta( get_the_ID(), 'coords', true );$meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');、そしてもちろん置き換えるcoordsストア座標に実際の現場にプラグインが使用します。
gmazzap

こんにちは。私はこれがかなり古いことを知っていますが、新しいWordPress 4.2と新しいGoogle Maps APIでそれを実装することができませんでした。もう一度レビューできる人はいますか?ありがとう。
cmsdeployed 2015年

中心位置で地図を表示することはできますが、自分の投稿の場所を引き出すことができません。コードビューを表示すると、生成されたJavaScriptで中心位置しか表示されません。これは新しいWordPress 4.2で動作しますか?
cmsdeployed 2015年

@ exedesign2正直、わかりません。私は...今、長い時間のため、このコードGoogleの手を触れないでください
gmazzap
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.