店舗があるサイトでアクセスページは必ずと言っていいほど存在します。
その中で欠かせないのがGoogleMapです。
私は方向音痴なので、GoogleMapが無いと目的地にたどり着けるかどうか不安になります。。

なのでいざアクセスページにマップを埋め込むと、マップのデザインがサイトのデザインと合わない…ってことありませんか？
見慣れてしまえば違和感がなくなってしまうかもしれませんが、
このGoogleMapのデザインをひと手間加えてカスタマイズするだけで、サイト全体の質がワンランクアップすること間違いなしです。
備忘録としてカスタマイズ方法を書いていきます。

デモページを作成しましたのでこちらからご確認ください。東京駅を中心にしてみました。
DEMO

GoogleMapのカスタマイズ方法

GoogleMapを設置する

<div id="g_map"></div>

設置したい箇所に上記のソースを追記します。

GoogleMapの詳細情報を設定する

function initMap() {

	//基本的なオプション
	var mapOptions = {

	//地図の拡大縮小
	zoom: 17,

	//指定の緯度経度を中心に表示
	center: new google.maps.LatLng(緯度, 経度),

	//見た目の変更
	styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":20}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":10}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":60}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"color":"#ffffff"},{"weight":"4.00"}]},{"featureType":"poi.business","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#6f5a4d"}]},{"featureType":"poi.business","elementType":"labels.text.stroke","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"color":"#9fd978"},{"lightness":"35"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":40}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"},{"saturation":"0"},{"lightness":"0"},{"gamma":"1"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.airport","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.bus","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.bus","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-10},{"lightness":30}]}]
	};

	//#g_mapに地図を表示させる
	var mapElement = document.getElementById('g_map');

	var map = new google.maps.Map(mapElement, mapOptions);

	//アイコンの設定
	var iconBase = 'アイコン画像のディレクトリ';
  	var marker = new google.maps.Marker({
    position: new google.maps.LatLng(緯度, 経度),
    map: map,
    icon: iconBase + 'アイコンの画像名'
  	});

	/* マーカーの設定 */
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(緯度, 経度),
	map: map,
	title: 'マップの名前'
	});
}

スクリプトエリアにこちらのソースを追記します。
マーカーというのは住所を検索すると出てくるデフォルトの赤いマークです。
デモのようにマーカーを任意の画像に変更することもできます。
マーカーを会社やブランドのロゴにしたりするとより一層おしゃれに見えます。

緯度経度はこちらで調べることもできます。
Geocoding – 住所から緯度経度を検索

見た目の設定はこちらのページで簡単にタグを取得することが可能です。
Snazzy Maps – Free Styles for Google Maps

GoogleMapAPIを取得・記載する

<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>

APIキーを取得後、オプション設定の後に追記します。

GoogleMapのサイズを設定する

#g_map {
	width: 100%;
    height: 400px;
}

以上です。
ぜひお試しください。