may88seiji
7/21/2017 - 9:47 AM

googlemap https://teratail.com/questions/54683 https://webkikaku.co.jp/blog/webdesign/googlemap-customize/

/*スタイルのカスタマイズ*/
var styleOptions =
    [
      {
        "stylers": [
          { "saturation": -100 },
          { "lightness": 50 }
        ]
      },{
        "elementType": "labels.icon",
        "stylers": [
          { "visibility": "off" }
        ]
      },{
        "featureType": "transit",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      }
    ];

var map;
var marker = [];
var markerLatLng;
var infoWindow;
var markerData = $('#map_custmomize').data("latlng");
/*アイコンの取得*/
var icon = {
  url: '/assets/themes/findknow/img/icon_map.png',
  scaledSize : new google.maps.Size(50, 50)
}

export function init(){
  // 地図の作成
  var mapLatLng = new google.maps.LatLng({lat: markerData[0].lat, lng: markerData[0].lng}); // 緯度経度のデータ作成

  var myOptions = {
//    zoom: 18, /*拡大比率*/
    center: mapLatLng, /*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
  };
   map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*マップのID取得*/

  var bounds = new google.maps.LatLngBounds();/*地図表示領域をマーカー位置に合わせて拡大*/

  infoWindow = new google.maps.InfoWindow();

  var styledMapOptions = { name: name }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');

  // マーカー毎の処理
  for (var i = 0; i < markerData.length; i++) {
    markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
    bounds.extend(new google.maps.LatLng(markerData[i]['lat'], markerData[i]['lng']));

    marker[i] = new google.maps.Marker({ // マーカーの追加
      position: markerLatLng, // マーカーを立てる位置を指定
      icon:icon,
      map: map // マーカーを立てる地図を指定
    });
    markerEvent(i,'<div class="name">' + markerData[i]['name'] + '</div>'); // マーカーにクリックイベントを追加
  }

  map.fitBounds (bounds);
}

// マーカーにクリックイベントを追加
function markerEvent(i, html) {
  marker[i].addListener('click', function() { // マーカーをクリックしたとき
    infoWindow.setContent( html );
    infoWindow.open(map, marker[i]);
  });
}