シンタローさんフロントエンドエンジニア15shares聞いてくれ、カンマンからのお知らせだ。定型に出来そうな箇所を見つけてはせっせとカスタムフィールドで処理しています。フロントエンドの阿部です。Fields」がなければ仕事が出来ないといっても過言ではありません。APIと組み合わせてカンタンに地図を取得するコードをサンプルで公開してくれています。お店の情報を扱うサイトを作るときに、カスタム投稿と連動させてカンタンにブラウザで登録出来るようになるのでずいぶん助かるのですが、住所の入力から、Googleマップで開くリンクを取得するところまでイケてしまうので、作業のログとして共有します。mapに行って検索して、表示された地図を埋め込む方法です。これでいいなら、もう、これでいいと思います。APIや、APIをカンタンに描画出来るライブラリを使えば、埋め込み地図よりも表示を細かく調整できて、デザインにマッチさせたりすることも可能になります。Fields」連動で、もろもろ簡略化しちゃおう!という話しなので、カスタムフィールドでもろもろやっちゃいたい人は、導入だけいろいろコードをコピペしなければいけませんが、あとあと楽なのでオススメです。何も考えずに有効化して、投稿画面を開くと、、GUI付きで地図がどんと。試しに住所とか、固有名詞とか、そういうので検索してみると、ちゃんと地図上でどこが表示されるか確認出来てしまう。なんだこれ、もう既にカンタンに地図表示できそうじゃないか。Mapともあれ、使い方はオフィシャルのドキュメントをよく読んで、サンプルコードが載っているので、そのままコピペ。WordPressならwp_headの下か、bodyの直前で大丈夫かと。?&gt;なので、値がはいっているときに出力を事前に設定して、マップを描画するコードを書いておきます。サンプルに載っているCSSとjsが仕込まれていればclass=”marker”が当たっているdivで地図を描画出来ます。地図の描画まではサンプルをコピペすればカンタンなんですが、どうせなら地図とセットで「Googleマップで開く」リンクも欲しいのが、UXという名の病気。};↑この部分に2行追記します。};とりあえずこれで、描画された地図はドラッグスクロールを禁止出来ます。Mapアプリを起動する方法とりあえずMapで開くためにリンクを用意しておいてhref="http://maps.google.com/maps?q=クエリ"クエリの部分にカスタムフィールドの住所の値を放り込みます。お店の名前もカスタムフィールで登録しているならクエリに一緒に放り込みます。$location[‘address’]で、「住所」のみを出力します。$location[‘lng’]ここら辺で緯度経度も取得してmapで開くリンクに突っ込むことも出来ますね。Mapで開く」リンクまで作成出来ます。いちいちmapで開くリンクをGoogleマップで検索して、埋め込みリンクを取得しての手間が省けて、簡易でのお店紹介程度なら、さくっと登録出来るカスタム投稿が組めてしまいます。Fields」が用意してくれている機能を使っているので、コードをコピペして動作検証する手間よりも、ポストに紐付いたカスタムフィールドに住所放り込んでカスタムした地図とリンクを取得出来てしまう手軽さを得ることの方がよほど便利で楽です。難易度はあるかもしれませんが、投稿に紐付いて地図とリンクが取得出来る方法としてお試し下さい。自力「食べログ」を作るのが捗ります。この記事は「プラグイン」カテゴリーです。@comman_incこの記事を書いた人シンタローさんフロントエンドエンジニア子持ちでアラフォーのフロントエンダーは私です。02016.7.1愛情たっぷり!うさぎの写真を使ってLINE着せかえを作ったよ。人気記事ランキング!サラリーマンの税金と節税。Comman.inc。