サイトのトップページにグーグルマップを表示しました。Googlemapはそのまま使うと味も素気もない表示になってしまいますが、Javascriptの設定を変えると様々なデザインに変えることができます。モノクロームで地名表示のない、駅名と交差点だけのシンプルなデザインにしてみました。

 

iPhoneでの表示。鉄道路線と駅名、国道表示のみという超シンプル。

阿佐ヶ谷カフェ「ザグリ」のGooglemap

 

1段階拡大すると、交差点表示のみ。

阿佐ヶ谷カフェ「ザグリ」のGooglemap

 

JSのソースコードは次の通りです。コピペして使ってくださいね。

[ { “featureType”: “all”, “elementType”: “labels”, “stylers”: [ { “visibility”: “off” } ] }, { “featureType”: “all”, “elementType”: “labels.text”, “stylers”: [ { “visibility”: “on” } ] }, { “featureType”: “all”, “elementType”: “labels.text.fill”, “stylers”: [ { “color”: “#000000” } ] }, { “featureType”: “all”, “elementType”: “labels.text.stroke”, “stylers”: [ { “color”: “#ffffff” } ] }, { “featureType”: “all”, “elementType”: “labels.icon”, “stylers”: [ { “visibility”: “on” } ] }, { “featureType”: “administrative”, “elementType”: “all”, “stylers”: [ { “visibility”: “off” } ] }, { “featureType”: “landscape”, “elementType”: “all”, “stylers”: [ { “color”: “#ffffff” }, { “visibility”: “on” } ] }, { “featureType”: “landscape”, “elementType”: “labels”, “stylers”: [ { “visibility”: “off” } ] }, { “featureType”: “poi”, “elementType”: “all”, “stylers”: [ { “visibility”: “off” } ] }, { “featureType”: “road”, “elementType”: “all”, “stylers”: [ { “weight”: “3” } ] }, { “featureType”: “road”, “elementType”: “geometry.fill”, “stylers”: [ { “color”: “#000000” }, { “weight”: 1 } ] }, { “featureType”: “road”, “elementType”: “geometry.stroke”, “stylers”: [ { “color”: “#000000” }, { “weight”: “1” } ] }, { “featureType”: “road”, “elementType”: “labels”, “stylers”: [ { “visibility”: “on” } ] }, { “featureType”: “transit”, “elementType”: “all”, “stylers”: [ { “visibility”: “off” } ] }, { featureType: “transit.line”, elementType: “all”, stylers: [ { visibility: “on” } ] }, { featureType: “transit.station.rail”, elementType: “all”, stylers: [ { visibility: “on” } ] }, { “featureType”: “water”, “elementType”: “all”, “stylers”: [ { “visibility”: “off” } ] } ]

 

ザグリのサイトではWordpressを使っているため、プラグインなどを利用するとグーグルマップなどは簡単に設置可能。以下が指定画面です。ズームや、地図天地、幅を画面いっぱいにetc..など設定。

阿佐ヶ谷カフェ「ザグリ」のGooglemap

JSもこんな具合に設定するだけ。

阿佐ヶ谷カフェ「ザグリ」のGooglemap

阿佐ヶ谷カフェ「ザグリ」ではウェブサイトの製作も行なっております。ホームページのデザインやウェブサイトの構築などについてはお気軽にご相談ください。こちらで用意した基本デザインパックでお任せであれば大変リーズナブルに提供可能ですが注文や要望によってはそれなりのご予算が必要となります。WEBデザイン歴20年という経験で実績豊富です。主にCMSをベースにした簡易型超高機能ホームページを得意としております。数万〜数十万人単位の会員化サイトなど運営構築事例も豊富です。実績などはこちらのページをご覧ください。

↓↓↓
WEBデザイン