Google Maps API 〜オリジナルマップを作る〜

イントロダクション

ライブハウス照会サイトを作る事にしました。 札幌を拠点にして活動しているので札幌を中心にマップを作成します。

GoogleMapを使う

ひと昔前は、申請の類なしで使えたのですが、今は違うようです。 GoogleMapsAPIの申請が必要で、ちょっと手間でした。 しかし、そんな小さな事よりも、やりたい事をやる方が大切なので、やりました。

準備完了後

作成するアプリの設計を行います。 前回設計をやらないで失敗したので今回はちゃんとやります。

設計を行う

まずはやりたい事を整理します。

やりたい事

1. 札幌にあるライブハウス(音楽できる場所)を地図に表示する。
2. 対象の連絡先や、そこがどんな感じかわかる様にする
3. ログインユーザのみマップに情報を追加できる

実装イメージ

1. HTMLからJSでGoogleMapを生成(HTML内に実装)
2. 主要部分は、JSファイルに実装
3. 初期表示時に登録したライブハウス情報を取得、表示する吹き出しをhiddenタグ内に作成
4. hiddenタグ情報をMapにオーバーレイに登録
5. 画面下部にある、ボタンからログインができる
6. ログイン後にタップでオーバーレイを追加、編集できる。
7. 編集できるのは、自分で追加したオーバーレイのみ

実装計画

単純に作成したサンプルをベースにして上の実装イメージの通り作成 結果的に、実装イメージ=実装計画=仕様になりました(笑)

まとめ

今回の実装は、データの作成が必須ですのでデータを登録する為の機能が無いとデータ登録出来ない…という問題がありました。それを解決するために実装イメージの6があります。

実際には、自分の使用しているレンタルサーバーで使っているワードプレスとの連携を行います。 具体的には、ワードプレスのログインユーザにタップでの情報追加、編集の権限を付与する想定です。 ログインユーザは記事を書いてそれをマップから閲覧者がみる事が可能な様にします。ちょっと工夫が入りそうです。