久々に時間ができたので、今回は地図をブログに挿入するやり方を試してみます。なんか段々、ブログそのものではなくて、自作精神に火がついた感じです。仕事ではまだエンジニアしてるからしょうがないかな～～～(笑)
調べてみると地図利用は色々制約がありそうです。特にブログなどで公開するときは、用途によっては使えないことが多いです。以下、一般的な地図ですが
１）googleマップ
２）yahoo地図
３）OpenStreetMap
地図の著作権はgoogleマップを例に取ると地図DB自体はグーグルではないとか意外と複雑です。一般的には個人で使う分には問題ないのですが、ネットなどで公開するときはちゃんと著作権を明記しないといけないのは基本のようです。
一番問題になるのは商用に使っていいかどうかで、無料でAdSenseなどのアフリエイトに使って問題ないかと言うことです。結論から言うと１）、２）は無理。３）だけは条件さえ守れば商用使用でも問題ないと明記されているので、「著作権の明記」をすることで使えると考えています。「CivicWave」などを参考になります。そのうち地図を挿入してアフリエイトを申請してみます。
OSM(OpenStreetMap）はボランティアで地図DBを作ってるため、精度がいまいちのところもありますが、条件さえ守れば自由に使えるのが嬉しい。今回はこのデータをブログに挿入します。
地図にはランドマークなどを加えて貼り付けます。地図画像に後から追加して書き込んでもいいのですが、今回はリンクでオンライン地図としてランドマークを追加します。
uMapにまずアクセスしてログインします。ログインはすでにもっているSNSのIDなどでもログインはできます。
１）「MAPを作成」をクリック
２）追加する位置の地図を表示
（なぜか、ドラッグでしか選択しかできませんでした）
３）画面右上のボタンでランドマークなどを挿入
４）画面左側にある「マップ埋め込みと共有」をクリック
５）「iframeエクスポートオプション」をクリック
６）「デフォルトのマップ表示から現在の表示に切り替え」ON
７）「マップ埋め込み」に表示されたHTMLデータをコピー
８）ブロガー入力で「HTML」入力表示に切り替えて貼り付け
これで終わりです。以下はログインしないときに上記手順を試した結果です。データが反映されてないようで初期画面ですが、オンライン地図は表示できています。
フルスクリーン表示
HTMLデータの以下のデータを変更することでサイズが設定ができます。この例では横幅が自動で横幅と同じになり、高さは300ピクセルになっているので簡単に変更が可能です。
<iframe width="100%" height="300px" frameBorder="0"
関連記事
