[WordPress]プラグインなしで固定ページにGoogle Mapを表示したい！さらにカスタマイズも

固定ページにGoogle Mapを表示する方法は色々とありますが、

色とか縮尺とかカスタマイズしたい
なので、プラグインを使わないでショートコードで呼び出す

の備忘録

Contents

1 Google Map用のファイルを用意（例：gmap.php）
2 functions.phpにショートコード用のコード記述
3 固定ページにショートコードを記述

Google Map用のファイルを用意（例：gmap.php）

&lt;div id="map">&lt;/div>
&lt;script>
        function initAccessMap() {
            // location
            var loc1={lat: 35.655308, lng: 139.900820};
          
            var map=new google.maps.Map(document.getElementById('map2'),{
                zoom:13,
                center:loc1,
                // mapTypeId:'roadmap'
            });

            var marker1=new google.maps.Marker({
                position:loc1,
                map:map,
                // icon:iconBase+'kensuimapicon.png'
            });

            // change color
              var styleOptions = [
                {
                    "stylers": [
                        {
                            "hue": "#f4fbff"
                        },
                        {
                            "saturation": -63
                        }
                    ],
                    "elementType": "all",
                    "featureType": "all"
                }
            ]

               var styledMapOptions = {
               name: 'mono'
               }
               var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
               map.mapTypes.set('mono', monoType);
               map.setMapTypeId('mono');
            var marker = new google.maps.Marker({
                position: mapz,
                map: map
            });
            
        }
&lt;/script>
&lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=[Google Map API]&amp;&amp;sensor=false&amp;callback= [initAccessMap]&amp;language=ja&amp;region=JP">&lt;/script>

function initAccessMap() {

// location

var loc1={lat: 35.655308, lng: 139.900820};

var map=new google.maps.Map(document.getElementById('map2'),{

zoom:13,

center:loc1,

// mapTypeId:'roadmap'

});

var marker1=new google.maps.Marker({

position:loc1,

map:map,

// icon:iconBase+'kensuimapicon.png'

});

// change color

var styleOptions = [

{

"stylers": [

{

"hue": "#f4fbff"

{

"saturation": -63

}

"elementType": "all",

"featureType": "all"

}

]

var styledMapOptions = {

name: 'mono'

}

var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);

map.mapTypes.set('mono', monoType);

map.setMapTypeId('mono');

var marker = new google.maps.Marker({

position: mapz,

map: map

});

}

</script>

[Google Map API]と[initAccessMap]の部分は適宜変更してください。[]は不要です。

色とか

functions.phpにショートコード用のコード記述

function include_gmap($params = array()) {
    extract(shortcode_atts(array(
        'gmap' => 'gmap' // ファイル名を格納
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/post-formats/$gmap.php");
    return ob_get_clean();
}
add_shortcode('map', 'include_gmap');

function include_gmap($params = array()) {

extract(shortcode_atts(array(

'gmap' => 'gmap' // ファイル名を格納

), $params));

ob_start();

include(get_theme_root() . '/' . get_template() . "/post-formats/$gmap.php");

return ob_get_clean();

}

add_shortcode('map', 'include_gmap');

前述の通り作成した「gmap.php」を読み込むためのショートコードです。

固定ページにショートコードを記述

[map file='gmap']

1	[map file='gmap']

細かいところ違っていたらごめんなさい！ちょっと修正すれば東京タワーが表示されるはずですー。

こちらもあわせてどうぞ
[WordPress]固定ページに投稿を表示したい！ショートコードの設定方法

40web

36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。