回答編集履歴
1
fix
answer
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
Google がいくつか Web API を提供しており、iframeタグのみでマップを埋め込みできる Google Maps Embed API
|
|
1
|
-
|
|
2
|
+
や、画像を生成できる Google Static Maps API であれば、CSS や JavaScript の必要がなく、Google API キーの発行のみで表示ができます。
|
|
2
3
|
|
|
4
|
+
### [Google Static Maps API](https://developers.google.com/maps/documentation/static-maps/intro?hl=ja)
|
|
5
|
+
|
|
6
|
+
Google Static Maps APIであれば、下記のコードだけでマップ表示が可能です。
|
|
7
|
+
|
|
3
8
|
```html
|
|
4
9
|
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
|
|
5
10
|
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
|
|
@@ -10,8 +15,10 @@
|
|
|
10
15
|
パラメータを変更することで、任意の緯度経度、ズームレベル、サイズでマップ画像が表示でき、マーカーも表示できます。
|
|
11
16
|
詳しくは[こちらのドキュメント](https://developers.google.com/maps/documentation/static-maps/intro?hl=ja)を見てみてください。
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### [Google Maps Embed API](https://developers.google.com/maps/documentation/embed/guide?hl=ja)
|
|
14
19
|
|
|
20
|
+
画像としてではなく、iframe でマップを埋め込みたいのであればGoogle Maps Embed APIが利用できます。
|
|
21
|
+
|
|
15
22
|
```
|
|
16
23
|
<iframe
|
|
17
24
|
width="600"
|
|
@@ -22,4 +29,6 @@
|
|
|
22
29
|
</iframe>
|
|
23
30
|
```
|
|
24
31
|
|
|
25
|
-
|
|
32
|
+
コードは[こちら](https://developers.google.com/maps/documentation/embed/start?hl=ja)で作成もできますので、よく分からない方でも簡単に埋め込みができるかと思います。
|
|
33
|
+
|
|
34
|
+
少しでもお力になれば幸いです。
|