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]);
});
}