スタイルの例
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ここでは、複雑な要素のスタイル設定の例を示します。
緑色の枠線付きの黄色い道路
すべての道路をカスタマイズして、薄い黄色の塗りつぶしと濃い緑色の枠線が基本スタイルとして表示されるようにします。
[地図上の対象物] で、[道路網] を選択します。
[道路網] ペインの [ポリライン] で、[塗りつぶしの色] の下にあるボックスを選択します。
薄い黄色(16 進数コード #eeeec8 など)を選択します。
[ストロークの色] の下にあるボックスを選択し、濃い緑色(16 進数コード #155304 など)を選択します。
[ストロークの幅] で、値を 3 ピクセルに設定します。
ズームインやズームアウトを行うとさまざまな道路が現れたり消えたりしますが、道路が現れた際にはこのスタイルで表示されます。道路が小さくなりすぎて枠線を表示できなくなった場合は、黄色だけが表示されます。
ズームレベルに応じて水域の色を変える
要素のスタイル設定の中には、特定のズームレベルでしか表示されないものがあります(建物やスポット(POI)の 3D 表示など)。ここでは、そうした種類のスタイルを水域に追加します。最大限にズームアウト(z0)すると水域が濃い青色で、州や都道府県のレベル(ノートパソコンではズームレベル 6)にズームインすると水域が中程度の青色で、最大限にズームイン(z19)すると水域が淡い青色で濃い青色の枠線を伴って表示されるスタイルを追加します。

[地図上の対象物] で、[水域] を選択します。
[水域] ペインの [ポリライン] で、[塗りつぶしの色] の下にあるボックスを選択し、濃い青色を選びます。
[塗りつぶしの色] の右側にあるズームのひし形アイコンを選択し、ズームレベル スタイル設定ペインを開きます。
ズームレベル 6 を選択し、中程度の青色を選びます。
ズームレベル 19 を選択し、水域の色を明るい青色に変更します。
なお、ストロークの色を設定している場合でも、小川や細い水路などでは最大限にズームインしても水域本体の色しか表示されません。大きな池や湖などの水域では、ストロークと塗りつぶしの色を見分けることができます。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-27 UTC。
[null,null,["最終更新日 2025-08-27 UTC。"],[],[],null,["Select platform: [Android](/maps/documentation/android-sdk/cloud-customization/style-examples \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/style-examples \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/style-examples \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/style-examples \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\nHere are some examples of complex element styling.\n\nYellow roads with green outlines\n\nCustomize all roads to have a pale yellow fill and a dark green outline as the\nbase style.\n\n1. Under **Map Features** , select **Road Network**.\n\n2. On the **Road Network** pane, under **Polyline** , select the box\n under **Fill color**.\n\n3. Select a light yellow color, such as hex code #eeeec8.\n\n4. Select the box under **Stroke color** and select a dark green color, such\n as hex code #155304.\n\n5. Under **Stroke width**, set it to 3px.\n\nAs you zoom in and out, different roads show this style as they appear and\ndisappear. Once roads get too small to show the outline, they display only the\nyellow color.\n\nDifferent colors of water by zoom level\n\nSome types of element styling might only be visible at certain zoom levels, like\n3D buildings or points of interest (POIs). Add a style such that the\nwater appears dark blue zoomed out to maximum (z0),\nmedium blue when zoomed in to the level of a state or province (zoom level 6\non a laptop), and pale blue with a dark blue border when zoomed in tightly\n(z19).\n\n1. Under **Map Features** , select **Water**.\n\n2. On the **Water** pane, under **Polyline** , select the box\n under **Fill color**, and select a dark blue color.\n\n3. Select the zoom diamond to the right of **Fill color** to open the\n zoom-level styling pane.\n\n4. Select zoom level 6, and select a medium blue color.\n\n5. Select zoom level 19, and change the water to light blue.\n\nNote, if you set a stroke color, creeks and streams and many smaller rivers\nonly show the body color, even zoomed all the way in. The difference between\nstroke and fill is visible on large ponds, lakes, and larger bodies of water."]]