YahooマップAPIの使い方

API

数年前からGoogleマップAPIの有料化に伴って、無料のYahooマップAPIに移行する流れになっています。
ここでは、そのYahooマップAPIの基本的な使い方を紹介したいと思います。

YahooのClient IDの取得方法

*Yahoo! JAPAN IDを持っている必要があります。

登録はこちら

<アプリケーションの登録を行いClient IDを取得します>
https://e.developer.yahoo.co.jp/register
サーバーサイド(Yahoo!ID連携 v2)を選んでアプリケーション名とサイトURLを入力し、同意をして登録を行います。


登録したアプリケーションのCliend IDをYahooマップで使用します。

基礎のYahooマップの表示方法

<ソース>

<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=<ここに取得したCLIENT IDを指定します>"></script>
</head>
<body>
<script type="text/javascript">
var ymap;
var marker;
$(document).ready(function(){
	// マップのインスタンスを作成
	ymap = new Y.Map("map");
	
	// マップを作成
	ymap.drawMap(
		new Y.LatLng(35.667200, 139.731092), 
		17, 
		Y.LayerSetId.NORMAL
	);
	
	// マーカーを指定
	marker = new Y.Marker(new Y.LatLng(35.667200, 139.731092));
	ymap.addFeature(marker);
});
</script>
<div id="map" style="width:500px; height:500px"></div>
</body>
</html>

複数のマーカーの表示方法

<!-- ここで複数の緯度経度を指定する -->
<span class="latlng"><input type="hidden" class="lat" value="35.667200" /><input type="hidden" class="lng" value="139.731092" /></span>
<span class="latlng"><input type="hidden" class="lat" value="35.683011" /><input type="hidden" class="lng" value="139.751045" /></span>
<span class="latlng"><input type="hidden" class="lat" value="35.666021" /><input type="hidden" class="lng" value="139.742974" /></span>

<script type="text/javascript">
$(document).ready(function(){
	var i = 0;
	var array = [];

	$('.latlng').each(function(){
		if($('input.lat',this).val()!=''){
			array[i++] = {lat:$('input.lat',this).val(),lng:$('input.lng',this).val()};
		}
	});

	// マーカーの表示
	view_map(array);
});
// マーカー表示関数
function view_map(array){
	// マップのインスタンスを作成
	var ymap = new Y.Map("map", {
		configure : {
			doubleClickZoom : true,
			scrollWheelZoom : false,
			singleClickPan : true,
			dragging : true
		}
	});

	// マップを作成
	ymap.drawMap(
		new Y.LatLng(34.975686, 138.382776), 
		13, 
		Y.LayerSetId.NORMAL
	);

	// 複数のマーカーを表示する
	var markers = [];
	var minX = 999;
	var minY = 999;
	var maxX = 0;
	var maxY = 0;
	var x = 1;
	for(var i in array){
		var object = array[i];

		// マーカー
		markers.push(new Y.Marker(new Y.LatLng(object.lat, object.lng)));

		var lt = object.lat;
		var lg = object.lng;
		if (lg <= minX){ minX = lg; }
		if (lg > maxX){ maxX = lg; }
		if (lt <= minY){ minY = lt; }
		if (lt > maxY){ maxY = lt; }

		x++;
	}
	ymap.addFeatures(markers);

	// センタリングする
	ymap.drawBounds(new Y.LatLngBounds(new Y.LatLng(maxY,minX), new Y.LatLng(minY,maxX)), Y.LayerSetId.NORMAL);

	var center = ymap.getCenter();
	ymap.setZoom(13, true, center, true);

}
</script>
<!-- マップの表示場所 -->
<div id="map" style="width:550px; height:550px"></div>

INPUTのHIDDENで緯度経度を複数指定して、ループで呼び出しているいます。

クリックした場所の緯度経度と住所を取得する。
住所と緯度経度からマップをつけることもできます。

<script type="text/javascript">
var ymap;
var marker;
$(document).ready(function(){
	ymap = new Y.Map("map", {
		configure : {
			doubleClickZoom : true,
			scrollWheelZoom : false,
			singleClickPan : true,
			dragging : true
		}
	});

	// マップ作成
	ymap.drawMap(
		new Y.LatLng(35.667200, 139.731092), 
		17, 
		Y.LayerSetId.NORMAL
	);
	
	// 初期マーカー作成
	marker = new Y.Marker(new Y.LatLng(35.667200, 139.731092));
	ymap.addFeature(marker);

	ymap.bind('click', function(latlng){

		// マーカーの消去
		ymap.removeFeature(marker);

		// マーカーの作成
		marker = new Y.Marker(latlng);
		ymap.addFeature(marker);

		// 緯度経度を取得
		var str = latlng.toString()
		var result = str.split(',');

		$("#show_lat").val(result[0]); // 緯度
		$("#show_lng").val(result[1]); // 経度

		// リバースジオコーディング
		var request = { "latlng": latlng };
		var geocoder = new Y.GeoCoder();
		geocoder.execute( request , function( ydf ) {
			if ( ydf.features.length > 0 ) {
		        	var feature = ydf.features[0];
				$("#address").val(feature.property.Address); // 住所を入れる
			}
		} );


	});

});

function search() {

	//ジオコーディング
	var query = document.getElementById('address').value;

	var geocoder = new Y.GeoCoder();
	geocoder.execute( { query : query } , function( result ) {

		if ( result.features.length > 0 ) {
	
			ymap.removeFeature(marker);
	
			// ジオコーディング結果の緯度経度へ移動
			ymap.drawMap( result.features[0].latlng );
	
			marker = new Y.Marker(result.features[0].latlng);
			ymap.addFeature(marker);
	
			$("#show_lat").val(result.features[0].latlng.Lat); // 緯度を入れる
			$("#show_lng").val(result.features[0].latlng.Lon); // 経度を入れる
	
		}
	});
}
</script>
<!-- マップの表示場所-->
<div id="map" style="width:550px; height:550px"></div>
<!-- 取得情報-->
緯度<input type="text" name="latitude" size="40" value="" id="show_lat">
経度<input type="text" name="longitude" size="40" value="" id="show_lng"><br>
住所<input type="text" name="address" value="" size="40" id="address"><input type="button" value="検索" onclick="search()" >

前のマーカーは、削除をしないと残ってしまいます。
そのため、下記のソースで前のマーカーを削除しています。
ymap.removeFeature(marker);

経路情報を表示する

<ソース>

<!-- ここで複数の緯度経度を指定する -->
<span class="latlng"><input type="hidden" class="lat" value="35.667200" /><input type="hidden" class="lng" value="139.731092" /></span>
<span class="latlng"><input type="hidden" class="lat" value="35.666021" /><input type="hidden" class="lng" value="139.742974" /></span>

<script type="text/javascript">
$(document).ready(function(){
	var i=0;
	var array = [];

	// 緯度経度を取得
	$('.latlng').each(function(){
		if($('input.lat',this).val()!=''){
			array[i++] = {lat:$('input.lat',this).val(),lng:$('input.lng',this).val()};
		}
	});

	// 経路表示関数
	view_map(array);
});
// 経路表示関数
function view_map(array){
	var ymap = new Y.Map("map", {
		configure : {
			doubleClickZoom : true,
			scrollWheelZoom : false,
			singleClickPan : true,
			dragging : true
		}
	});

	ymap.drawMap(
		new Y.LatLng(35.667200, 139.731092), 
		10, 
		Y.LayerSetId.NORMAL
	);

	// 緯度経度を取得
	var latlngs = [];
	var minX = 999;
	var minY = 999;
	var maxX = 0;
	var maxY = 0;
	for(var i in array){
		var object = array[i];

		latlngs.push(new Y.LatLng(object.lat, object.lng));

		var lt = object.lat;
		var lg = object.lng;
		if (lg <= minX){ minX = lg; }
		if (lg > maxX){ maxX = lg; }
		if (lt <= minY){ minY = lt; }
		if (lt > maxY){ maxY = lt; }

	}

	var configs = {latlngs};

	//経路探索プラグインを生成します。
	var plugin = new Y.RouteSearchPlugin(configs);

	//センターにします。
	var center = ymap.getCenter();
	ymap.setZoom(5, true, center, true);

	//地図を描画します。
	ymap.drawBounds(new Y.LatLngBounds(new Y.LatLng(maxY,minX), new Y.LatLng(minY,maxX)), Y.LayerSetId.NORMAL);

	//Mapオブジェクトにプラグインを追加します。(drawMapの後に記載すべし)
	ymap.addPlugin(plugin);
}
</script>
<!-- マップの表示場所 -->
<div id="map" style="width:700px; height:700px;"></div>

経路情報を表示させるためには、Mapオブジェクトにプラグインを使います。
var configs = {latlngs};
var plugin = new Y.RouteSearchPlugin(configs);

参考サイト

https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/