システム開発的雑記

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/

キャプチャ

 

 

 

 

 

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

執筆者:

関連記事

【もっと早い方法があった】Windowsのローカル環境で、WordPressを動かす

こんにちは。大野です。 さて、先週と似たようなお題ですが 先週のより、さらに早くて簡単な方法があるとの情報が入ったので早速調査してみました。 前回は、xampp+Wordpressの組み合わせでしたが …

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

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

7月からHTTPSではないサイトで、「保護されていない通信」とブラウザで表示される

こんにちは、大野です。 6月も終盤ですね。 もうすぐに7月ですが、7月と言えば googleが以前からアナウンスしていましたが、非HTTPSのサイトを見ると「保護されていない通信」とブラウザに表示され …

ファーストサーバーのレンタルサーバー(Zenlogic)で、.htmlファイルをphpとして実行する。

ネットで調べ倒しても問題解決することができず、自力であれこれやって習得した方法を書いていきたいと思います。 第一回は、ファーストサーバー株式会社が提供している、Zenlogicで、php以外の拡張子( …

ヒートマップツールPtengineをためしてみる

こんにちは、大野です。 弊社でホームページを作成されたお客様で、スタンダード以上のプランを契約されている方には、今まで、クリックマップという、ホームページのどこがクリックされているのか、また、どこまで …