Leafletを使う準備

これまでと同じようにLeafletの設定を行います。
WordPressなのでfunctions.phpに、LeafletのスタイルシートとJavaScriptの2つを読み込ませます。順番は必ずスタイルシートを先にします。

function leaflet_enqueue_styles() {
	wp_enqueue_style( 'leaflet-style', '//unpkg.com/leaflet@1.3.1/dist/leaflet.css', NULL, NULL );
}
add_action( 'wp_enqueue_scripts', 'leaflet_enqueue_styles' );
/* 先にスタイルシートを読み込んでからJavaScriptを読み込む */
function leaflet_enqueue_script() {
	wp_enqueue_script( 'leaflet-js', '//unpkg.com/leaflet@1.3.1/dist/leaflet.js', NULL, NULL );
}
add_action('wp_enqueue_scripts', 'leaflet_enqueue_script');

投稿へ地図を描き出すコンテナの指定

投稿の本文へ地図を表示するためのコンテナ要素（div）にid属性（ここではmymap）を指定します。コンテナ要素には高さ（height）を必ず指定します。

<div id="mymap" style="height: 400px;"></div>

この部分は一枚の地図を表示する場合と共通です。
　

複数の地図の設定

ここも投稿の本文へJavaScriptを記入します。
切り替える地図の分だけ設定をします。

<script>
var std_map = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
var seamlessphoto_map = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
var os_map = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
});
var myMaps = {
    "地理院地図 標準": std_map,
    "地理院地図 写真": seamlessphoto_map,
    "OpenStreetMap": os_map,
};
var baseMap = new L.map('mymap', {
center: [38.260440, 140.882427],
zoom: 15,
layers: [std_map]
});
L.control.layers(myMaps).addTo(baseMap);
</script>

　
2行目～4行目：地理院地図の標準タイルを使用するオブジェクトを生成。
5行目～7行目：地理院地図の写真タイルを使用するオブジェクトを生成。
8行目～10行目：OpenStreetMapのタイルを使用するオブジェクトを生成。
　
11行目～15行目：地図レイヤーを格納するオブジェクト（myMaps）のプロパティを設定。
“表示名”: 地図レイヤーオブジェクト名
　
16行目～20行目：最初に表示される地図オブジェクト（baseMap）のプロパティを設定。
center:［緯度, 経度］
zoom: 拡大率（ズームレベル）
leyers: ［地図レイヤーオブジェクト名］

21行目：地図タイルを切り替えるためのレイヤーコントロールを設定。
L.control.layers(地図レイヤーを格納したオブジェクト名).addTo(地図オブジェクト名);
　

複数地図タイル表示例

右上のアイコンから地図タイルを変更できます。

地図タイル変更の表示を常に展開しておくには、

L.control.layers(myMaps).addTo(baseMap);

の部分を

L.control.layers(myMaps, null, {collapsed: false}).addTo(baseMap);

とします。