GoogleMapの埋め込みと、デザインをカスタマイズする方法


Google Maps API無償版のポリシー変更の発表が2016/6/22にありました。

APIキーを設定しないと、地図が表示されなくなるようです。

map1

 

Google Maps の APIキーを取得する方法

APIキーを取得するにはGoogleアカウントが必要です。

 

①「Google Maps APIs for Web」 へアクセスして、「キーを取得」を押します。

 

1

 

②「続ける」を押します。

2

 

③「プロジェクトを作成」を選んで「続行」を押します。

3

 

④APIキーの作成画面に「キーの名前」「キーの制限」を設定し、「作成」ボタンを押します。

webページにGoogleMapを埋め込む場合は、「HTTPリファラー」を選択し、

URLを登録します。

「キーの制限」では、ワイルドカード(*)を含めることが出来ます。

例:stpost.net/*     stpost.net と 下層URL

4

 

⑤APIキーを「コピー」して、「閉じる」を押します。

5

 

⑥APIキーが作成出来ました。APIキーを確認したり、リファラーの設定内容を確認する場合は、作成したAPIの名前をクリックしてください。

6

 


デザインをカスタマイズする方法

EZ Map」というサイトで簡単にカスタマイズすることができます。

画面右側に生成するGoogleMapのプレビューが表示され、左側が埋め込みようのコードを作成するための設定画面です。

 

①「EZ Map」にアクセスする。

11

 

②画面左側に登録する設定内容は以下の通りです。

API Key

「Google Maps の APIキーを取得する方法」の手順で作成した「APIキー」を設定してください。

Map Container ID

生成される埋め込みタグに設定されるID名です。任意の名前を設定してください。

Dimensions

埋め込むマップのサイズを指定します。「Responsive Width」をオンにしておくことで、

画面幅に応じてMapの幅が自動で変わります。

Latitude

地図の中心点の緯度を指定してください。

※地図の緯度、経度確認方法はこちら

Longitude

地図の中心点の経度を指定してください。

※地図の緯度、経度確認方法はこちら

Map Type Control

地図の左上に表示されるマップタイプ(地図/地形/航空写真)選択ボタンの種類を選ぶことができます。

Map Type

マップタイプを選ぶことができます。(地図/地形/航空写真など)

Zoom Level

地図の拡大/縮小レベルを設定できます。15くらいがちょうどいいです。

 


マーカー(ピン)の追加と設定

Markers

マーカー(ピン)を追加します。

14

DROP A MAKER

地図上をクリックして直接ピンの位置を設定できます。

※Marker Infoの入力は任意です。

ADD A MARKER BY ADDRESS

住所からマーカーの位置を設定できます。

※Marker Infoの入力は任意です。

Marker Title

マーカーに表示するタイトルを設定できます。

Change Icon

マーカーの種類を設定できます。

Center Here

マーカーがある場所を地図の中心にすることができます。

Delete Marker

マーカーを削除できます。

 


その他のオプション

日本語翻訳すると分かりやすいです。

オフにしたい機能があればオフにしてください。

動きは画面右のプレビューで確認することができます。

15

16

 


レイアウトの適用

既存レイアウトを選択して色合い等を変更することができます。

17

 

埋め込みタグの生成

①「COPY YOUR CODE」を押下します。

18

 

②「Success」が表示されれば、埋め込みタグ生成が成功です。クリップボード上に保存されているので、メモ帳などに張り付けて確認してみてください。

19

 

③生成されたタグをHTML内に埋め込めば完成!

↓↓完成例

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL