ソースを見ながら、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」で設定を行う際に、プラグインブロックの幅や高さを超えて設定してしまうと表示内容が途中で消えるなど、正しく表示されないので注意が必要です。

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