• web制作
  • api
  • googlemap
  • 画像

api不要!グーグルマップを簡単に画像化してサイトに埋め込む方法[カスタマイズ]

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

みなさんこんにちは。三浦です。

ゴールデンウィークはいかがでしたでしょうか?
11連休という素晴らしいお休みを頂いていた方もいるみたいで、
私はとても羨ましい気持ちを抑えつつ、パソコンに向かっておりました。

さてGoogleマップをカスタマイズして、サイトに埋め込むことが出来るのはいろんなところで目にするので、
よく知られているかと思いますが、
画像化してそのまま埋め込むことが出来るのを知っていましたでしょうか?

Googleマップのキャプチャーをそのまま載せてしまうと、著作権などの問題がございますので、
是非これから紹介する方法で画像化してみてください。

APIを使う事もありませんので、初心者の方でも簡単に出来ますよ!

画像化して埋め込み

下記のタグを埋め込んであげればそれだけでオーケーです!

<img src="http://maps.googleapis.com/maps/api/staticmap?center=38.259787,140.873724&zoom=15&format=png&sensor=false&size=640x480&maptype=roadmap&markers=38.259787,140.873724" />

「src」内部のパラメータを色々変える事で、様々な場所のgoogleマップを画像化することが出来ます。

埋め込み結果は下記の通り!

仙台の地下鉄がもうすぐ2本になるよ!

今回使用しているパラメータの紹介致します。

パラメータ 意味 値の例
center 地図の中心座標を設定します。
経度,緯度もしくは住所を指定します。
38.259 ,140.873
東京都千代田区丸の内1丁目
zoom 地図の拡大レベル(縮尺)を設定します。 13
format 地図のデータ形式(GIF、JPEG、PNG)を指定します。 gif
sensor ユーザーの位置情報を取得するのにセンサーを用いているかを指定します。 false
size 地図画像の縦幅、横幅を指定します。 400×400
maptype 地図のタイプ(航空写真や地形図等)を定義します。
(roadmap、satellite、hybrid、terrain)
roadmap
markers マーカーを表示させたいとき定義します。 38.259 ,140.873
東京都千代田区丸の内1丁目

お手軽にカスタマイズしたい

ちょっとパラメーターを弄るのがめんどくさいし、よくわからない!って方は
「Styled Maps Wizard」を使いますと簡単にカスタマイズ出来ますよ!

Styled Maps Wizard

Styled Maps Wizardは本当に素晴らしいサービスでたくさんのカスタマイズが出来ますが、
ここではよく使われると思われる、「色変更」と「白黒(色を抜く)」カスタマイズ方法をご紹介致します。

色を変更してみよう

画面左のSelectorsから、Hueから好きな色をクリックします。

赤くなったよ!

これだけで色が変更されました!
すごく簡単ですね!!

白黒(色を抜く)表示してみよう

画面左のSelectorsから、Saturationの値を-100にしましょう!

白黒になったよ!

こちらもこれだけ!
本当に簡単ですねー。便利ですねー。

最後に画像化してみよう

適当にいろいろカスタマイズしましたら、
右下の「Static Map」をクリックしましょう。

完成!

すると下記のようにURLが出てきますので、
sec=””の内部にコピペしてあげます。

urlコピペお願いします。

以上でカスタマイズも終了です!
※ピンを立てたいときは一番最後に「markers」パラメーターを追加してあげてくださいね!

まとめ

いかがでしたでしょうか?

グーグルマップのカスタマイズして埋め込みするにはAPIを使用したり、
パラメータが多かったりと意外と難しいイメージですが、画像書き出しは本当に簡単に出来てしまいますので、
是非ご活用して頂ければと思います。

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