ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

Open Street MapはGoogle Mapの代替案となりえるのか

  • 2018.08.25
  • web
Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。

このことは、ウェブ制作者の立場からするといくつかの問題を含んでいるため、よく状況を把握しておく必要があります。

まず、googlemapで地図を表示した状態でメニューから「地図を共有または埋め込む」から埋め込みコードを取得して単にウェブページに貼り付けて地図を表示した場合(iframe埋め込み)には今までどおりAPIキーとお支払い情報の設定は不要で無料(いまのところ)である。

↓iframe埋め込み表示。

ただ、例えばマーカーを会社のロゴに変えて表示する、など埋め込みコードの一部を加工して地図を呼び出すような場合、または画像としてマップを呼び出すStatic MapsなどAPIを使用して表示するような場合にはAPIキーとお支払い情報の設定が必須となる。
※Static Mapsを使わず、単にgooglemapなどをキャプチャして画像化する等は著作権侵害です。これは仕様変更云々以前の問題です。

また、有料化という言われ方をしているが、APIを使って表示しているマップであっても$200分の無料表示の枠(使用するAPIによって表示回数に差がある)があり、当該無料表示枠を超過した分にだけ料金がかかる。
※大半のサイトは無料枠内に収まるといわれている。

このように仕様変更の内容を見ていくと、ウェブ制作代行者として気になるのは料金がどうこうよりも「APIキーとお支払い情報の設定」だ。

今後もカスタマイズしたgooglemapを使い続ける、あるいは新たに設置する場合には、無料枠超過分を御社に変わって負担しますというウェブ制作代行業者でもない限りはクライアントに対してAPIキーの取得とお支払い情報の設定をお願いするか、当該情報を取得するに当たって必要な情報(たとえばカード情報等)を伺った上で取得を代行するということになる…のかもしれない。

のかもしれないのですが、カスタマイズできる地図の選択肢は多いほうがいいのでOpen Street Mapを試してみました。

真夜中WEBではサイトの軽さを売りの一つとしているので、いっそのことマップを画像化してしまい(googlemapではgoogleおよびゼンリンの著作権があるためできない。)、Open Street Mapへのリンクを貼る方法をとってみた。

完成例は各ページのフッターに表示しているマップです。
※ここから先の画像作成にはillustratorやInkscapeなどのドロー系ソフトが必要です。インストールしておきましょう。

そもそもどうやって画像化するのか

単純にOpen Street Mapをカスタマイズしないで画像化するだけであればOpen Street Mapで画像化したい位置を表示し、右側のメニューの「共有」から「独自の寸法を設定」にチェックを入れて枠の大きさを調整しダウンロードボタンを押せば画像を取得できます。

今回は見た目(特にオブジェクトの色)をカスタマイズしたいので、まずまち歩きマップメーカーへアクセスします。

地図の位置と大きさを調整したら、左上の「以下の範囲でマップを作る」をクリックして、建物、道路などそれぞれのオブジェクトの色を変更します。
最終的にはillustratorで着色するので、ここでは各オブジェクトを区別できる様に色分けしておきます。

色を変更し終わったら右上の「SVG保存」ボタンを押して.svg形式で保存します。 ※.svgで保存したものをillustratorで読み込んだのが以下の画像です。各オブジェクトがパスでできていることがお分かり頂けるとおもいます。

最初はすべてのパスがグループ化されているので、まずはグループ化を解除しますし、色を変えたいパスを一つ選択します。
※下記画像

その状態でメニューの「選択」→「共通」→「カラー(塗り)」にすると同じ塗りのパスがすべて選択されるので、
※下記画像

カラーパレットで色を変更
※下記画像

この要領で各オブジェクトの色を変更していき、背景を設定し、スライスで切り出したら完成です。 ※道路オブジェクトのパスは塗りではなく線に色が設定してあるので、色だけでなく線の太さも変えることができます。
※注:Open Street Mapを使用してまち歩きマップメーカーで作成した画像を使用するときにも
「Map data © OpenStreetMap contributors」の表記が必要なようです。忘れずに表記しましょう。

webカテゴリの最新記事