LoginSignup
1
2

More than 5 years have passed since last update.

GoogleMap を画像としてWebpage に埋め込む方法のあれ

Posted at

Google Maps Static Maps APIを使用すると便利っぽい

Google Developer ConsoleからAPIキーを取得

Google Developer Console からプロジェクトを作成して、APIキーを作成する。

URLを組み立てる

APIキーが取得できればあとは、URLを組み立てるだけで画像が取得できる。

基本となるURLはhttps://maps.googleapis.com/maps/api/staticmapで後ろにクエリを続けてURLを構築する。幾つか必須のパラメータがあり、最後に指定するkeyも必須

公式で提供されているURLを利用すると以下の様なURL形式となる。

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284
&key={API_KEY}

公式のMapサンプル

場所に関するパラメータ

ともにマーカーを設定しない場合必須

center マップの中央を定める。地名または、緯度経度が利用可能

zoom マップのズームレベルを定める。0(世界地図) から 21まで

地図に関するパラメータ

size 必須 画像の縦横比を指定する。フリー利用でのサイズは640x640が限界

scale 画像の縮尺を指定する。scale=1がデフォルトで、sizeで指定したとおりの画像が帰ってくるが、scale=2 では単純に縦横2倍に拡大された画像が返ってくる。無料のアカウントで選択可能なのは2のみ

format 画像のフォーマット。デフォルトはpng

maptype マップのタイプ。roadmap, satellite, hybrid, terrainなどが選択可能。

マーカーをセットする

マーカーはmarkersという名前で何度でも指定できる。

マーカーにはcolorやlabelに加え位置情報を設定できる。

markers=color:0x555555|label:A|osaka

感想 

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2