記事の詳細

Googleマップを白黒する方法が知りたくて色々調べたんですが、分かりにくい記事が多かったので、シンプルかつ、一番簡単に設置するために書くことにしました。

和風な店舗ホームページ制作の時にGoogleマップの表示はやっぱりモノクロがしっくりきます。

後はモダンなWebサイトデザインだったりとか。

普通のカラーは嫌だ!モノクロがいいわ!という方におすすめな方法です。

JSを用意する

インラインで書いてもいいですし、外部から読み込んでもどっちでもいいんですが、下記コードをコピーしてmap.jsとかでjsファイルを作ってください。

ここで変更するのは、座標マーカーの画像パス出力するID名3つです。
それ以外はそのままでOK。拡大したかったらzoomの数値いじってください。

座標の出し方
Google Map 座標取得へアクセスして
座標を求めたい住所を検索。
rgdtr

htmlの書き方と説明

箇所箇所の説明をコメントで書いてます。
これをコピーしてhtmlファイル作れば楽勝でしょう!(未検証!笑)

動作サンプル


このマップに特に意味はないです。
皇居に鮮やかな菊のマーカー!すばらしい。あ、そうそうheightとwidthを指定してあげないと表示されないのでご注意を

 

グリーンラベルおいしい

関連記事

    • あの
    • 2016年 11月 15日

    素晴らしい情報をありがとうございます!
    ローカルではいい感じで動くんですが、サーバーに上げるとジャバのエラーで表示されません。
    どのような要因が考えられますか?

      • AIMERS CREATE
      • 2016年 11月 15日

      そうですねぇ、あるとすればjsのパスかなぁとは思います。
      相対パスでダメそうなら絶対パスで書かれてみてはいかがでしょう?

AIMERS CREATEとは

AIMERS CREATEは、東京都と福岡県うきは市を中心にホームページ制作・Webデザインを行っております。 お見積もりや運営などご不明な点がありましたら、お気軽にお問い合わせメールフォームからお申込下さい。迅速に対応します。 お問い合わせをいただきましたら、電話かメールにてご連絡を致します。 AIMERS CREATEをもっと詳しく

おすすめ記事

登録されている記事はございません。

ページ上部へ戻る