ソースを見ながら、Googleマップのデザイン設定を行います。

この例ではGoogleマップに青の枠線を設定してみます。

スタイル設定例

■ ソース

IDの内容はブロックごとに変化しますのでご注意ください。

例えば、ひな型を使用してページを作成した場合、GoogleMapプラグイン（V3）は表示されますが、IDは別物になるため、設定してあるCSSは適用されません。

また、上図記載の「 id=“map_4036” 」は公開処理を行うとidが再設定され、別の内容になってしまうため、デザインが正しく反映されません。このためCSSの設定には使用できません。

■ CSS

登録方法は以下のような方法があります。

1.【GoogleMapプラグイン（V3）】プラグインのIDを使用する方法

この場合は【プラグインブロック設定】で設定した【幅】と【高さ】の値をCSSにも記述する必要があります。

「margin」や「padding」を使用して設置位置の設定を行うこともできますが、この場合「padding」を使用するとGoogleマップと枠の間に隙間ができてしまうので注意が必要です。

2.【GoogleMapプラグイン（V3）】プラグインのIDとクラス名を使用する方法

プラグインブロックのIDとGoogleMapプラグイン（V3）が作成したクラス名を使用する場合は、そのままデザイン（この場合は枠）を設定します。

この方法でCSSを設定する場合に、「margin」や「padding」で設定を行う際に、プラグインブロックの幅や高さを超えて設定してしまうと表示内容が途中で消えるなど、正しく表示されないので注意が必要です。

以上の設定を行うと、下図のような表示になります。