APIは沢山のサイトでも利用されていて、今更説明の必要もないくらいメジャーなものですが、物凄くシンプルに書くと「Googleマップを活用できるAPI」となります。APIの詳細は(これも)色んなところで書かれていますから、参考サイトを最後に紹介するにとどめてここでは実際に運用しているソースコードを中心に紹介していきます。APIの参考サイト準備編トップページも個別ページも共通になっているのが、ヘッダーへの記述になります。APIを使う準備が整います。APIをトップページに設置するに時に注意するポイントは次の2つです。1、マップ上に表示したくない記事の排除2、記事が増えた時にも対応できるようにする記事には純粋な紹介ページだけではなく、レビューやレポート、場合によっては参考情報のようなものがでてくるかもしれませんが、そういった記事はお店の情報が不要でマップ上に表示したくないと思います。それらを上手く排除しないとマップがおかしくなってしまいます。GoogleマップはJavaScript内に「表示する情報のすべて」を記述しなくてはならないため、記事が増えていった時には自動的に追加される対応が必要になります。それぞれについてのやり方は次のようにしています。マップ上に表示したくない記事の排除この方法はいくつもありますが、シンプルに使えるのがカテゴリー分けによる排除です。WordPressにはカテゴリーの機能がありますから、それを使って記事の公開を分けておいてトップページに表示していいカテゴリだけを取得すればOKです。具体的にはこのような書き方ですね。?>こうすると、カテゴリーIDが9と10のものは取得しないようになります。カテゴリーIDは投稿のカテゴリーに行き、カテゴリー名の上にマウスを乗せるとブラウザの下側(ステータスバー)にIDが表示されます。※東池袋カレーマップではお店の記事以外は書かないように設計しているため、上記の方法は使用していません。記事が増えた時の対応なんとなく難しそうな感じですが、(ソースコードは別として)考え方としてはとてもシンプルでWordPressのループ機能を使って記事の情報を読み込むだけ、、、要はトップページにすべての記事を表示させるつもりで作ればいいだけです。マーカーに必要な緯度経度はすでにカスタムフィールドで埋め込んでありますからそれを使うとして、もう一つ重要なことがあって、それは「マーカー用のID」が必要になること。表示使われているソースコードのこの部分ですね。これが、1記事ずつユニークになっているので、それを追記してあげる必要があります。方法論はいくつかあるみたいですが、今回は最初に各ID(全部で4つ)の「スタート=0」を作っておいて、数字を足してく記述を入れています。?>]この記述でループする度に「1」を加算していき、結果的に0から始まる連番で生成されます。<参考>この他に記事のIDを使う方法もありますが、最後に説明するMarkerClustererを使うためにはIDが「0」から始まっている必要があるため、この方法にしています。記事が増えた時の対応(追記)WordPressでは初期設定で1ページ表示する数が「10」と決まっているため、記事が10ページ以上になる場合は以下のいずれかの方法で1ページに表示できる記事数を増やす必要があります。[方法1]ダッシュボード→表示設定で、「1ページに表示する最大投稿数」の数字を編集ただしここの数字を変更するとカテゴリページ、月別アーカイブの最大投稿数も変更になってしまいますので、トップページだけ変更したい場合は次の方法を使ってください。[方法2]WordPressの記事のループの前にこれを記述します。?>&showpostsの後に続く数字が最大投稿数になりますので、サイトのページ数に合わせて調整してください。?>とカテゴリ制限につなげて記述する必要があります(他にも書き方はありますが、基本的な考え方は同じです)。APIのソースはこのようになっています。});</script>WordPressのループ部分は以下のところで、その中にカスタムフィールドが引っ張ってきた緯度経度などの情報を入れています。あとIDも前に書いたように、連番になるようにしてあります。?>緯度経度の呼び出しはここになっています。),ソースとしてはイマイチ綺麗にはまっていない感じはありますが、これを使ってトップページに必要な記事から緯度経度情報と、リンク先の情報を取得してマッピングしています。地図の中心になる緯度経度トップページへの表示で少し悩むのが、地図の中心になる緯度経度の求め方です。個別ページの場合は、各店舗を中心にすればいいのですが、トップページはどこかを基準にするわけにいかないため、自分で探さないといけません。駅やビルなどランドマークがあればそれを使うのもいいですが、微調整したいこともあると思うのでそういったときには以下のサイトを活用して緯度経度を算出してみるのもいいと思います。地図の大きさソースを見れば一目瞭然ですが、地図の大きさを決めているのはこの部分なので、サイトに合わせて変更してください。目次へMarkerClustererを使ってマーカーをまとめる上記の設定でGoogleマップの設置は完了していますが、このままだとマーカーが重なってしまいあまり見栄えのいいものではなくなってしまいます。狭い範囲で作っている東池袋カレーマップは数が増えるともう、ごちゃごちゃして汚く感じてしまいます。いうものです(正確にはJavaScriptファイル)。?>/markerclusterer_compiled.js"></script>これで、元々は離れていたGoogleマップのピンがひとつにまとまって、まとめた数が数字として表示されるようになります。<参考>もし初期設定ではまとまる範囲が広い(狭い)という場合は、アップロードしているmarkerclusterer_compiled.jsの中にある「gridSize||60」という部分の数字を変更することで調整することができます。個別ページのマップはその記事の情報だけを使用するため、トップページほど複雑にはならず、表示させたいところにこれを書いておけばOKです。</script>トップページと違うところは、記事をループさせていないことと、地図の中心が任意の地点ではなく、実際に店舗がある緯度経度を使っているという点ですね。マーカーを表示させるための緯度経度も同じ物を使用しています。post_custom("Map_lng")?>),単体で表示させるほうが楽なのがよくわかります。Pesosこちらの書籍も参考になります。AMこんにちは、はじめまして。このサイトを拝見して、「世界カフェブログ」というサイトを作りました。プラグインやAPIの解説がわかりやすくて、とても助かりました。ありがとうございます。ひとつ質問させてください。・バルーンを消す「×」が表示されないという感じです。こちらのサイトと、東池袋カレーマップを参考に同じように作ったつもりなのですがなぜか上手く表示されません。何かわかるようでしたら、教えていただけますと幸いです。PM自己レス失礼します。