ホームページ

コピペでOK!現在地を中心としたGoogleMapの作り方(ワードプレス)

googlemap_centerホームページ

こんにちは、チョッカです。

WordPressでGoogleMapを表示する際に、シンプルなものでしたら、

プラグインなど使わずに、簡単に表示することができますが、


ユーザーの現在地を中心にしてマップを表示したいこともありますよね。

その場合、まずはGoogleMapのAPIキーを取得して、プログラムを書く必要があります。


今回は、タイトル通りにコピペするだけで、ユーザーが現在地を中心にした地図を表示する方法をご説明しがてら、ちょっと見た目を変える方法もご紹介します。

コピペする内容

とにかく、コードがあれば良いという方は、
以下の4つのコードをコピぺしてお使いください。

スタイルシート(CSS)

style.cssに以下のコードをコピペしてください。
style.cssは、WordPressの”外観”>”テーマエディタ”>”スタイルシート” からも編集することができます。

#map {
    width: 100%;
    height: 400px;
    margin: 0 auto;
}

テーマのための関数

function.phpに以下のコードをコピペして下さい。
function.phpは、WordPressの”外観”>”テーマエディタ”>”テーマのための関数” からも編集することができます。

function my_scripts_method() {
wp_enqueue_script('map', get_theme_file_uri('js/createmap.js'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

JavaScript(現在地の取得と地図の作成)

ファイルの作成方法と置き場所

  1. テキストファイルに以下のコードをコピペします。(ちょっと長いです)
  2. テキストファイルを、”createmap.js”という名前で保存します。
  3. お使いのWordPressテーマのフォルダに”js”というフォルダを作ります。
  4. 先ほど作った、”createmap.js”というファイルを、”js”フォルダの中に保存します。
var latitude = null;
var longitude = null;
function initMap(){};

async function initMap(){
    var result = 0;
    var output = document.getElementById("map");

    // 現在地の緯度経度を取得
    if (navigator.geolocation){
	    //Geolocation APIがサポートされている場合は現在地を取得
	    result = await this.getPosition();

    }else{
        //Geolocation APIがサポートされていない場合はアラート
        alert('あなたの端末では現在位置を取得することができません');
    }

    if( !result ){
    	//現在地を取得できなかった場合の緯度経度を指定
	    latitude  = "35.689839";    //緯度
	    longitude = "139.692077";   //経度
    }

    //マップの中心を設定
    var mapCenter = new google.maps.LatLng( latitude , longitude ) ;

 	// 地図を埋め込む
    var map = new google.maps.Map(output, { 
 		center: mapCenter, // 地図の中心を指定
 		zoom: 16   // 地図のズームを指定
    });
}

// 現在位置を取得する関数
function getPosition(){
    return new Promise((resolve, reject) => {
         navigator.geolocation.getCurrentPosition(
            (position) =>{
                // 現在地の取得に成功した際の処理
                latitude = position.coords.latitude; // 現在地の緯度
                longitude = position.coords.longitude; // 現在地の経度  
                resolve(1);
            },
            (error) => {
                // 現在地の取得に失敗した際の処理
                var errorMessage = {
                    0: "原因不明のエラーにより現在位置を取得できませんでした",
                    1: "位置情報の使用が許可されませんでした",
                    2: "電波状況などにより現在位置を取得できませんでした",
                    3: "現在位置の取得に時間がかかりすぎてタイムアウトとなりました",                
                };    
                alert( errorMessage[error.code] );
                resolve(0);
            },
            {
                // 現在地の取得に関するオプション
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 5000
            }
        );
    });
}

WordPressの投稿編集ページ

投稿の編集ページで、地図を表示する箇所に、
以下のコードをコピペしてください。APIキーの部分だけご自身のキーに置き換えてください

<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=initMap" async></script>

以上で完了です。

お疲れ様でした。

プレビューをすると、位置情報取得を許可しますか?とダイアログが表示されますので、
許可“をクリックすると、あなたの現在地を中心にマップが表示されていると思います。

WordPressで現在地を中心としたGoogleMapを作るコード

それぞれのコードを説明してこうと思います。

JavaScriptで、現在地の取得と、地図を表示する骨格を作る

var latitude = null;
var longitude = null;
function initMap(){};

async function initMap(){
    var result = 0;
    var output = document.getElementById("map");

    // 現在地の緯度経度を取得
    if (navigator.geolocation){
	    //Geolocation APIがサポートされている場合は現在地を取得
	    result = await this.getPosition();

    }else{
        //Geolocation APIがサポートされていない場合はアラート
        alert('あなたの端末では現在位置を取得することができません');
    }

    if( !result ){
    	//現在地を取得できなかった場合の緯度経度を指定
	    latitude  = "35.689839";    //緯度
	    longitude = "139.692077";   //経度
    }

    //マップの中心を設定
    var mapCenter = new google.maps.LatLng( latitude , longitude ) ;

 	// 地図を埋め込む
    var map = new google.maps.Map(output, { 
 		center: mapCenter, // 地図の中心を指定
 		zoom: 16   // 地図のズームを指定
    });
}

function initMap(){};
これを入れないと、initMapなんて関数は見つからないというエラーが出てしまいますので、入れておきましょう。

async function initMap(){
マップを表示する関数です。
WordPressに記載するJavaScriptから呼び出しています。

var result = 0;
var output = document.getElementById("map");

変数を初期化しています。
WordPressで地図を埋め込む位置に、<div id="map">というコードを書きますが、この、”map”の部分を他の文言に変更する場合は、document.getElementById("map")の、”map”も変更してください。

if (navigator.geolocation){
ユーザーが使っている端末が、位置情報取得の機能を持っているか確認しています。

result = await this.getPosition();
getPosition()という関数で、現在地を取得しています。

await で、getPosition関数が終わるまで次に進まないようにしています。
関数の中身は、後述されておりますので、その時に。

ユーザーの端末が位置情報取得の機能を持っている場合だけ実行されます。

alert('あなたの端末では現在位置を取得することができません');
ユーザーの端末が位置情報取得の機能を持っていない場合に表示する、アラートメッセージです。

if( !result ){
//現在地を取得できなかった場合の緯度経度を指定
latitude = "35.689839"; //緯度
longitude = "139.692077"; //経度
}

ユーザーの端末が位置情報取得の機能がない場合や、
何かしらの理由で現在地を取得できなかった場合に、
中心とする緯度、経度を指定します。

ここでは、特別な意味はありませんが、東京都庁の緯度、経度を指定しています。

var mapCenter = new google.maps.LatLng( latitude , longitude ) ;
中心地として取得した緯度、軽度をマップに伝えるように変数にセットしています。

var map = new google.maps.Map(output, {
center: mapCenter, // 地図の中心を指定
zoom: 16 // 地図のズームを指定
});

outputは、document.getElementById(“map”) の取得値で、
マップを埋め込む場所だと思ってください。

center地図の中心情報(先ほどセットしたものです)
zoomデフォルトでどれだけ拡大して表示するかどうかです。広範囲を地図を見せたい時は数字を小さくし、ピンポイントで地図を見せたい場合は数字を大きくします。

現在地を取得する関数を作る(JavaScript)

// 現在位置を取得する関数
function getPosition(){
    return new Promise((resolve, reject) => {
         navigator.geolocation.getCurrentPosition(
            (position) =>{
                // 現在地の取得に成功した際の処理
                latitude = position.coords.latitude; // 現在地の緯度
                longitude = position.coords.longitude; // 現在地の経度  
                resolve(1);
            },
            (error) => {
                // 現在地の取得に失敗した際の処理
                var errorMessage = {
                    0: "原因不明のエラーにより現在位置を取得できませんでした",
                    1: "位置情報の使用が許可されませんでした",
                    2: "電波状況などにより現在位置を取得できませんでした",
                    3: "現在位置の取得に時間がかかりすぎてタイムアウトとなりました",                
                };    
                alert( errorMessage[error.code] );
                resolve(0);
            },
            {
                // 現在地の取得に関するオプション
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 5000
            }
        );
    });
}

return new Promise((resolve, reject) => {
これは、initMap関数からgetPosition関数を呼び出す際に、
getPosition関数から値が返ってくるまで次に進まないようにするものです。

navigator.geolocation.getCurrentPosition(
このgetCurrentPositionという関数で、現在地を取得しています。

(position) =>{
// 現在地の取得に成功した際の処理
latitude = position.coords.latitude; // 現在地の緯度
longitude = position.coords.longitude; // 現在地の経度
resolve(1);
},

現在地取得に成功した場合に実行される処理です。
緯度、経度に取得した値をセットして、成功した証”1″を戻しています。

(error) => {
// 現在地の取得に失敗した際の処理
var errorMessage = {
0: "原因不明のエラーにより現在位置を取得できませんでした",
1: "位置情報の使用が許可されませんでした",
2: "電波状況などにより現在位置を取得できませんでした",
3: "現在位置の取得に時間がかかりすぎてタイムアウトとなりました",
};
alert( errorMessage[error.code] );
resolve(0);
},

現在地取得に失敗した場合に実行される処理です。
失敗の原因が、error.code にセットされるので、
その値に応じて、アラートメッセージを表示するようにしています。

{
// 現在地の取得に関するオプション
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 5000
}

3つ目の引数は、現在地取得に関するオプション設定です。

enableHighAccuracyより精密な位置を取得する場合は、true精密な位置は不要の場合はfalseを指定します。
timeout位置情報取得にかける最大時間をミリ秒で指定します。この時間を超えるとerror.code = 3が返されます。
maximumAge取得した位置情報を保持する時間をミリ秒で指定します。すぐに位置情報を再取得するようなものであれば少し長めに設定しておいた方が速度アップになります。

スタイルシート(CSS)の更新

#map {
    width: 100%;
    height: 400px;
    margin: 0 auto;
}
width: 100%横幅を指定しています。表示できる最大の横幅にしています。
height: 400px高さを指定しています。値は自由に変更しています。(これを指定しないと地図が表示されません)
margin: 0 auto地図を、表示領域において横方向の中心に表示するようにしています。

JavaScriptを呼び出す

function my_scripts_method() {
wp_enqueue_script('map', get_theme_file_uri('js/createmap.js'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

head内に指定のスクリプトを読み込むコードを埋め込みます。

wp_enqueue_script('map', get_theme_file_uri('js/createmap.js'));

第一引数識別名 今回は、’map’
第二引数スクリプトのパス
get_theme_file_uri(‘js/createmap.js’)で、”使用しているテーマディレクトリ / js / createmap.js” を呼び出しています。

地図を表示する場所を作ります。

<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=initMap" async></script>

ここが地図が表示される場所になります。

このスクリプトで取得したGoogleMapのAPIキーを渡します。

解説は以上になります。
ちょっと量が多かったですね。

マップの色を変えたり、表示項目を減らす方法

マップの見た目を少し変えたいという場合や、
不要な項目がたくさん表示されていて見にくいという場合は、
Google Maps Platform Styling Wizard が役に立ちます。

change_mapview01

詳細設定することもできますが、
簡単にできるのは、道、ランドマーク、ラベルの表示量の調整と、
見た目の変更です。

change_mapview02
ランドマークの表示量が最大の場合
change_mapview03
ランドマークの表示量を1つ減らした場合

設定が終わったら、”FINISH”をクリックすると、Export Styleというダイアログが出てきます。

ダイアログないにある、”COPY JSON“をクリックし、ここでコピーしたものを、マップを表示している関数のオプションにペーストして終わりです。以下のような感じです。

new google.maps.Map(output, { 
 		center: mapCenter, // 地図の中心を指定
 		zoom: 16,   // 地図のズームを指定
 		styles: [コピーしたJSON]
}

ランドマークやラベルの表示量は、見せたいものをマップ内に埋れさせないために、
非常に使えますので、是非活用してみてください。

GoogleMapから緯度、経度を調べる方法

パソコンでGoogleMapを開き、目的の場所で右クリック
そして、この場所についてをクリックすると、

get_lat_lng_01

下に、緯度経度が表示されます。

get_lat_lng_02

この値を使ってください。

まとめ

JavaScriptやHTMLを変更しなければいけないので、ちょっとハードルが高い方もいたかもしれませんが、コピペしてから、ちょっと調整するという形で使っていただけると、
意外と簡単にできると思います。

今回ご紹介したGoogleMapに関わらず、あなたのWebサイトをよりユーザーに親切なものにできないかとお困りの際には、お気軽にチョッカにお問い合わせください。

タイトルとURLをコピーしました