Google Mapのカスタマイズ

投稿者: Mai SuzukiMemorandum

 

<body onload="initialize();">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_custmomize" style="width:100%;height:400px;"></div>

ここでカスタマイズしてデザインの部分だけ下記 /*スタイルのカスタマイズ*/にペースト。
https://snazzymaps.com/

function initialize() {
  var latlng = new google.maps.LatLng(35.527866, 139.697227);/*表示したい場所の経度、緯度*/
  var myOptions = {
    zoom: 18, /*拡大比率*/
　　scrollwheel: false,/*スクロール禁止*/
    draggable: false, /*ドラッグ禁止*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*マップのID取得*/
 
  /*スタイルのカスタマイズ*/
  var styleOptions =
[
  {
    "stylers": [
      { "visibility": "on" },
      { "color": "#NaN490d" }
    ]
  },{
    "stylers": [
      { "visibility": "on" },
      { "hue": "#ff00f6" },
      { "saturation": -100 }
    ]
  }
];
 
 var styledMapOptions = { name: 'CLUB CHITTA' }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');
 
/*WEB企画アイコンの取得*/
var icon = new google.maps.MarkerImage('js/marker.png',/*アイコンの場所*/
  new google.maps.Size(50,60),/*アイコンのサイズ*/
  new google.maps.Point(0,0)/*アイコンの位置*/
);

/*マーカーの設置*/
var markerOptions = {
  position: latlng,/*表示場所と同じ位置に設置*/
  map: map,
  icon: icon,
  title: '株式会社WEB企画'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);
 
}

下記を参考にさせていただきました
ワンランク上のサイトデザインを目指して、Googleマップのカスタマイズに挑戦してみた！