システム開発的雑記

GoogleMap(グーグルマップ)の背景色を変更する。

投稿日:2018年5月13日 更新日:

こんにちは、大野です。

とある案件で、GoogleMapの背景色を変更しましたので、そのようなことがしたい方の参考になればと思い投稿させていただきました。

これもネットを探すと情報は出てくるのですが、情報が古かったり、やり方が複雑だったりしたので

とにかく簡単に背景色だけ変更したいって方向けの内容になっています。

 

まずは、GoogleMapのAPIが使えるように、以下のようにスクリプトを読み込む必要があります。

XXXの部分は、GoogleMapのAPIキーを記述します。以前は不要でしたが、現在は、必須となってますので、以下のサイトで取得してください。

ウェブ向け Google Maps API

次に、地図を埋め込む場所に以下のタグを記述します。

IDは何でも良いのですが、次にやる、cssやスクリプトと合わせてください。

cssは、以下のようにします。

幅を100%にしてるので、画面いっぱいに広がります。幅を固定したい場合は、widthの値を固定値にしてください。

javascriptは、以下のようにします。

簡単に説明します。

まず、表示したい場所の緯度、経度を2行目で指定します。

4行目の「zoom」で、縮尺を指定します。この値を大きくすると詳細に表示されます。

14行目の「hue」に背景にしたい色を指定します。

17行目の「saturation」色の濃さをパーセントで指定します。

hue、saturationの値は、以下のサイトで確認しながら取得することが可能です。

Google Maps API Styled Map Wizard

ちなみに、上記スクリプトでは、背景色がピンクっぽく表示されます。

ブラウザで実際に見てみると...

こんな感じです。

以下、いくつか例を、上記スクリプトからsaturationのみ変更しています。

黄色(#ffff00)

赤色(#ff0000)

青色(#000aff)

 

簡単でしたね。

それでは、また。

 


ホームページ、ちらし、看板など、お店のPRはアミテスにお任せください!

お問合せTEL:042-539-1233

お問合せメール:support@amites.co.jp

ホームページ:https://amites.co.jp

FB:https://www.facebook.com/amites.co.jp/

キャプチャ

 

 

 

 

 

-システム開発的雑記
-, ,

執筆者:

関連記事

動画(Vimeo)を、ホームページの背景に設定する。

Vimeo(https://vimeo.com/jp/)は、ホームページのメインビジュアルの背景として埋め込んであるサイトをよく見かけますね。 ただVimeoは、そのまま埋め込んでしまうと、再生ボタン …

【SEO対策】titleタグって必要?

こんにちは、大野です。 前回、前々回で、「keywords」、「description」ときましたので 今日は、タイトル(title)タグについてです。 このタイトルについても、弊社お問合せというか質 …

Google マイビジネスの登録のおすすめ

こんにちは。大野です。 いやぁ梅雨シーズン真っ只中って感じですね。 以前は、この時期は本当に大嫌いだったのですが 最近は、引き篭もりで作業しているので、あまり気にならないという(汗 さて、本題ですが …

さくらインターネットのスタンダードプランで既存wordpressをSSL対応する。

こんにちは大野です。 今回も悩めるWEB系のお仕事をされている方にお送りさせていただいております。 googleが常時SSL推奨するようになってから久しいですが、まだ対応に追われている方もけっこういる …

おすすめのクラウドサーバー、VPS(Virtual Private Server)

大野です。こんばんは。 またまたマニアックな内容になり、すみません。 (私の記事は、普通の方はスルーしてください) 今日は、おすすめのクラウドサーバー、VPSってことで、私の独断と偏見で書いていきたい …