ブログ合宿で褒められた!ちえなびのデート場所などの地図

ちえなびマップ

ブログ合宿でうれしかったことがありました。ちえなびの地図をほめていただきました!ありがとーございます。

あの有名ブロガー@isloopさんに褒められた!ということでiPhoneアプリのするぷろ for iOS(ブログエディタ)買っちゃったよ。買う買わないで迷って2年、背中を後押しするのはあなたの言葉ね

地図の一覧だけならgooglemapのマイマップでつくれるのですが、記事とリンクさせてカテゴリ分けしてということも考えるとマイマップでは面倒だったので、WordPressなら一度コードを書けばあとは自動で割り振ってくれます、WordPressでブログを書きつづける理由がこの地図を使いたいからなので、作り方をご紹介します。

ちえなびマップ

素人がつくるWordPressでつくるgoogle maps apiを利用したプラグインの作り方

google maps apiについて学ぶ!

ここからです。自分のやりたいことを実現できるWordPressのプラグインを探していたところ、英語で書いてあるのがめんどくさくて、書いた方が速いんじゃないのかと思い、書きました。

AjaxTowerのGoogle Maps入門(Google Maps JavaScript API V3)

こちらでjavascriptについて基本的なことを学びました。ちなみ私のプログラミング経験は大学時代の教養のpascalと物理で学んだFortranです。

PHPについて、学ぶ!

WordPressはPHPというプラグラミング言語で作られています。改造しようとするなら知識はあった方がいいです。PHPについては本で学びました。これは入門書としておすすめです。ただ、オブジェクト指向についてはあまり触れていないので、別の本を買わないといけません。いまだにそういう本には会えておらず知識がほわっとした状態です。

プラグインを作るためにWordPressの関数について学ぶ。

テーマを変えたり、プラグインをカスタマイズしたいと思うと、ぶつかるのがWordPress関数。分からない単語は調べるという英語のように作業していくと知識が増えます。

地図の入力はカスタムフィールドに緯度経度を入力して表示させているため、カスタムフィールドの取り出しかたについて調べました。住所から検索させないのはジオコーディングの知識があまりないのと、それから住所を入力しても番地の異なるところにピンが置かれて困ったので、あえて緯度経度で表示させています。カスタムフィールド上に地図を表示させて、ピンを置くという設定をしたかったのですが、うまくいかなかったために緯度経度を地道に調べてます。

その他、入力の際にはカスタムフィールドで住所やショップ名の入力をしていますが、ブログ上には全く活かされていません。食べログAPIを使って営業時間や定休日を取り込みたいなとおもってますが、それをすると、観光地の営業時間も書かないといけなくなるのでやってません。

作っていて困ったこととして、WordPressはPHPでgoogle mapはJavascriptでこの2つをどうやって同じファイルに書くのかが分からずに苦労しました。結局今あるgooglemapのプラグインの中身をみて、こういう風に書くんだと理解しました。テキストについて、シングルクオーテーションの使い方がいまいち分からず、エラーがたくさんでて困りました。あと->の使い方も分からず、google調べても記号としてしか認識されず、でてこずに困りました。

分からないことはgoogleさんに聞く。これ1番重要。

google maps api  マーカー 複数 表示 や WordPress プラグイン 作り方 などで検索すると方法がじゃらじゃらでてきます。そのなかでできてきたのが近くのマーカーを1つにまとめて表示をするというMarkerClustererというもの。MarkerClustererの使用例

 Google maps APIでWordPressでマーカーを複数表示するための要約

さて、以上のことを長たらしく書いてきましたが、今、検索したらとっても分かりやすい説明がありましたので、上記の分を要約すると、@jim0912さんのsimple colorsにMarkerClustererをフォトログに導入してみたのソースを利用すればよい。です。ちょー便利!自分が作った時はぜんぜん検索に引っかからずにあーだこーだ試行錯誤した時間が…

それでも1つ自分でプラグインやカスタマイズができたということは自信につながり、プラグインをインストールした後も中身をさらっと見て、こんな風に書いているんだと調べる習慣は身に付きました。プラグインを作ったことがないという人はGoogle maps apiを利用したプラグインを作ってみると基本も学べて応用もできるのでおすすめです。

 

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。