MovableTypeでGoogleMAPルート案内

らら
らら

はじめに

以前、ブログに書いた、下記をもとに・・

GoogleMAP座標を利用するねた・・

関連

Movable TypeでGoogleMAP座標のコンテンツタイプ追加してみた。
https://www.omakase.net/blog/2024/06/movable-typegooglemap.html

つくってみた。

MTでHTMLを出力する部分と、javascriptで対応する。

コンテンツタイプは


名称
GoogleMAP座標

コンテンツデータのタグは・・

divはなんでもいいです。重要なのはdata-latとか・・


<mt:Contents content_type="関連企業">
<div data-lat="<mt:ContentField content_field="GoogleMAP座標"><mt:ContentFieldValue coordinate="lat"></mt:ContentField>" data-lng="<mt:ContentField content_field="GoogleMAP座標"><mt:ContentFieldValue coordinate="lng"></mt:ContentField>"><mt:ContentField content_field="名称"><mt:ContentFieldValue></mt:ContentField></div>
</mt:Contents>

掃き出しされるとこんな感じ


<div data-lat="35.xxxxxxxxxxx" data-lng="136.xxxxxxxxxx">〇〇〇〇〇</div>
<div data-lat="35.xxxxxxxxxxx" data-lng="136.xxxxxxxxxx">〇〇〇〇〇</div>

下記のリンクを参考に・・

https://developers.google.com/maps/documentation/urls/get-started?hl=ja#directions-action

下記書式を利用


https://www.google.com/maps/dir/?api=1&origin=' + g_lat + ',' + g_lon + '&destination=' + lat  + ',' + lng + '&travelmode=walking

javascriptの例

GPSで座標を取得するAPIで自座標を求めて、正常に完了したときに、コンテンツデータ登録された、座標と名称にGoogleMAPのルート案内APIリンクを張る


var	g_lat;
var	g_lon;
var gps_count=0;
$(function() {
	if(navigator.geolocation){
		var position_options = {
			enableHighAccuracy:true,// GPS などの高品質な情報を受け取リたいか
			timeout:1000,			// タイムアウトエラーとする時間を指定 (単位：ミリ秒)
			maximumAge:0			// 古い位置情報の取得を許容する場合、時間を指定 (単位：ミリ秒)
		};
		navigator.geolocation.watchPosition(GeoFunc,GeoFailure,position_options);
	} else {
		alert("このブラウザは GPSをサポートしていません。");
	}
});
function GeoFailure(error){
	console.log("失敗:" + error.message + " (code:" + error.code + ")");
	switch (error.code) {
		case error.PERMISSION_DENIED: // codeが1
			alert("位置情報が許可でありません。位置情報を許可に設定してください。");
			$("body").removeClass("loading");
			break;
		case error.POSITION_UNAVAILABLE: // codeが2
			alert("現在の位置情報を特定できませんでした。");
			$("body").removeClass("loading");
			break;
		case error.TIMEOUT: // codeが3
			alert("指定されたタイムアウト時間内に現在の位置情報を特定できませんでした。");
			break;
	}
}
function GeoFunc(pos)
{
	gps_count ++;
	if(gps_count == 1){
		g_lat	= pos.coords.latitude;
		g_lon	= pos.coords.longitude;
		$('[data-lat]').each(function(index, element) {
			//driving (車); transit（電車）; walking（徒歩）; bicycling (自転車).
			var lat	= $(this).attr('data-lat');
			var lng	= $(this).attr('data-lng');
			map_tag = $(this).text();
			map_tag = map_tag + '<span><a href="https://www.google.com/maps/dir/?api=1&origin=' + g_lat + ',' + g_lon + '&destination=' + lat  + ',' + lng + '&travelmode=walking" target="_blank" rel="nofollow">Google Map</a></span>';
			$(this).html(map_tag);
		});
	}
}

実行すると・・

Google Mapリンクがついて、該当のGoogleMAPルート案内を表示します。


〇〇〇〇〇
〇〇〇〇〇
から下記に・・
〇〇〇〇〇Google Map
〇〇〇〇〇Google Map

さいごに

今月・・まだ。記事書いてなくて・・慌てて・・・・

メモです・・

関連記事