プラグインはいくつかあるが、アイコンをオリジナルにする＆マップの色をカスタマイズする方法は、コードを書くしかない。
アイコンを変えるだけ、マップの色を変えるだけ、どちらかならプラグインでも出来る。
どっちも入れたかったので、私は下記の方法で実行した。
■参照サイトはここ
https://www.granfairs.com/blog/staff/google-maps-api-04
①googlemapで住所やクレカ登録をして API key を取得する
※クレカ登録は2018年8月から改訂されたので必須※
②MAPを表示したい座標を割り出す
lat は緯度、lng は経度
■MAPを座標で出す
https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=ja
住所で見て、そこを選択⇒右クリック、この場所について、で座標が表示される
③zoomの設定などをカスタム
④地図の色などをstyle追加してカスタム
⑤アイコンをサーバにアップして、これを呼び出すようにstyleに追加
icon: ‘http://{URL}/wp-content/uploads/map_icon.png’,
⑥埋め込み済みgoogle mapを英語版のときに APIキーの後に &language=en を追加
<script src=”https://maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap” async></script>
↓↓↓
<script src=”https://maps.googleapis.com/maps/api/js?key={APIキー}&language=en&callback=initMap” async></script>
出来上がったコードがこちら（日本語版） ***********************************************
<!– ここから地図 –>
<div id=”maps”></div>
<script src=”https://maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap” async></script>
<script>
function initMap() {
var mapPosition = {lat: {緯度}, lng: {経度}};//座標
var mapArea = document.getElementById(‘maps’);
var mapOptions = {
center: mapPosition,
zoom: 17,
// ↓↓↓ stylesオプション ↓↓
styles: [
//全てのラベルを表示
{
featureType: ‘all’,
elementType: ‘labels’,
stylers: [
{visibility: ‘on’},//ラベルの表示
],
},
//「poi=観光スポットや施設など」のアイコンのみ再表示
{
featureType: ‘poi’,
elementType: ‘labels.icon’,
stylers: [
{visibility: ‘inherit’},
],
},
//地図全体の色味をカスタマイズ
//基本色を青に統一 + 彩度を上げる
{
featureType: ‘all’,
elementType: ‘all’,
stylers: [
{hue: ‘#3ba1f3’},
{saturation : +10},
],
}
]
// ↑↑↑ stylesオプション ↑↑↑
};
var map = new google.maps.Map(mapArea, mapOptions);
var markerOptions = {
map: map,
position: mapPosition,
icon: ‘http://{URL}/wp-content/uploads/map_icon.png’,
};
var marker = new google.maps.Marker(markerOptions);
}
</script>
<!– ここまで地図 –>
ここまで（日本語版） ***********************************************
これを入れたい固定ページに入れればＯＫ