オープンデータの住所からポインタ入り地図を作って自分のサイトに貼り付ける

Image

先日書いた「GoogleMapにGoogleスプレッドシートのデータからポインタを複数表示する」で、とても簡単に複数のポインタを表示することができる!ということが分かりました。自分的になんだかこれが楽しくて、「色んなマップを作りたい!」という気持ちが高まってきたのですが、さて一体どんなマップを作ればいいのかな?と思ったときに、「そうだ!オープンデータがあるじゃないか」と思いつきました。

ということで、今回はオープンデータを使って地図上にポインタを表示してさらに自分のWebサイトに地図を埋め込むということをやってみようと思います。

オープンデータって、何?

最近話題のオープンデータ。オープンデータって何?ってことですが、オープンソースなどと同じような感じで 自由に利用できるデータ です。総務省など官公庁でもオープンデータの推進が進められていて、様々なデータが利用可能な形で公開されています。

総務省-オープンデータ戦略の推進

八王子市などの自治体でもオープンデータを公開し始めています。「(自治体名) オープンソース」でググると色々な自治体が公開しているオープンデータを探すことができます。

八王子市のオープンデータから地図に使えそうなデータを見つける

八王子市 オープンデータ でググるとこのページが見つかりました。

オープンデータ|八王子市

Image

この中のリンクをたどって、

子育て関連オープンデータ一覧

Image

というところに、学童保育所一覧 というデータを見つけました。今回はこのデータを地図にしてみたいと思います。

データをダウンロードして保存する

Image

学童保育所一覧を右クリックして、名前を付けてリンク先を保存 をクリックします。

gakudou_ichiran.csv

という名前のファイルが保存されます。

データをインポートする。。。ちょっと修正するところがありました

GoogleMapにGoogleスプレッドシートのデータからポインタを複数表示する」に書いてある手順で新しいマップを作ります。

Image

インポート をクリックして、

Image

先ほどPCに保存したgakudou_ichiran.csvを選択します。

Image

するとこのようにエラーが出てしまいました。見出し行に使われている ダブルコーテーション がダメっぽいのでそれを全部削除して保存、再度ファイルを選択してみました。

Image

すると今度は 行または列の数が多すぎます というエラーがでてしまいました。Pro版を使わないときは100行までのようです。

gakudou_ichiran.csvをテキストエディタで開いてみると、

Image

このように実際のデータは79行目までで、残りは空行のようでしたので空行を削除して保存します。再度ファイルを選択します。

Image

データが読み込まれたようです!しかし、同じ列名が入っているというエラーが出ています。とりあえず同じ名前にならないために名前の後に数字を付けて保存しました。

Image

再度ファイルを選択します。

Image

やった~(^^)/。これで先に進めそうです。

Image

ポインタの場所を指定するための列として 住所 にチェックを入れて、続行をクリックします。

Image

ポインタに表示する項目として 名称 を指定して、完了をクリックします。

Image

やった(^^)/。全部で78カ所のポインタが一気に表示されました♪

Image

ポインタをクリックすると、列にあった項目がすべて表示されます。これは使えそうです!

タイトルを入れる、オープンデータを使っているよ!という説明を書く

地図のタイトルと説明を入力します。

子育て関連オープンデータ一覧

ここに ライセンス表示について という説明があります。

オープンデータカタログページ(以下、「カタログページ」と言います。)で提供するデータのライセンスは、クリエイティブ・コモンズ・ライセンスにおける「CC BY(表示)」としています。

二次著作物を作成する場合は、以下のとおり、利用するデータの出典を表示してください。

(1)提供されているデータを改変せず、そのまま複製して利用する場合

[データのタイトル]、八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1(http://creativecommons.org/licenses/by/2.1/jp/)

(2)提供されている著作物を改変して利用する場合

この[作品・アプリ・データベース等]は以下の著作物を改変して利用しています。

[データのタイトル]、八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1

(http://creativecommons.org/licenses/by/2.1/jp/)

なお、ライセンスのURLは文字で記載するのではなく、「クリエイティブ・コモンズ・ライセンス 表示 2.1」の文字部分などにハイパーリンクを貼っても構いません。

クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 2.1 日本 ライセンスの下に提供されています。(外部リンク)

ということになっているので、これに留意して説明も書いていこうと思います。

Image

無題の地図 をダブルクリックします。

Image

タイトル説明を入力する画面がポップアップします。

タイトルは出典がわかるように 八王子市 子育て関連オープンデータ とします。

説明部分はちょっと修正しましたので、

(2)提供されている著作物を改変して利用する場合

を見て、

この地図は以下の著作物を改変して利用しています。

学童保育所一覧、八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1 http://creativecommons.org/licenses/by/2.1/jp/

このように入力して、

Image

保存をクリックします。

作った地図を一般公開して、誰でも見られるようにしてみる

Image

画面右上にある 共有 をクリックします。

Image

ポップアップした画面の、アクセスできるユーザーがデフォルトでは 非公開 になっているので 変更 をクリックします。

Image

ウェブ上で一般公開 をチェックして 保存 をクリックします。

Image

元の画面に戻るので 完了 をクリックします。

これでどの人でもこの地図が見えるようになります。

Image

画面右上の 共有 をクリックしたときの、共有するリンクにあるurlで

Image

見ることが出来ます。実際の地図はこちら

Image

ソーシャルボタンも付いているので簡単にSNSにも投稿してもらえそうです!

作った地図をサイトに貼り付けてみる

作った地図をWebページに貼り付けることも簡単にできます。

Image

フォルダアイコンをクリックして 自分のサイトに埋め込む をクリック

Image

埋め込むためのコードが表示されるので、コピーしてWordPressの投稿通常のhtmlなどに貼り付けます。

試しにここに貼り付けました↓クリックしたり、地図を動かしたりしてみて下さい(^^)

自分のサイトに簡単に地図を貼り付けられるこの機能はとても便利に使えそうですね(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る