Google Places API を使ってクチコミを取得する方法

はじめに

山梨県北杜市にある「明野のひまわり畑」のクチコミを取得してみました。

f:id:knkomko:20180825113444p:plain:w500

開発環境

・Eclipse Pleiades 4.8.10
・Apach Tomcat 9.0.10

ソースコード

<ul class="resultcontent" id="resultcontent"></ul>

<script type="text/javascript">
	var service = new google.maps.places.PlacesService(document.createElement('div'));
	service.getDetails({
                 // 明野のひまわり畑を示すGoogleマップ上のID
		placeId: 'ChIJUUT49Y8NHGARknZk1nxh_Q8' 
	}, function(place, status) {
		if (status === google.maps.places.PlacesServiceStatus.OK) {
		var resultcontent = '';
		for (i=0; i<place.reviews.length; ++i) {
			resultcontent += '<li">'
			resultcontent += '<div>' + place.reviews[i].rating + '</div>';
			if (!!place.reviews[i].text){
				resultcontent += '<div>' + place.reviews[i].text + '</div>';
			}
			resultcontent += '</li>'
		}
		$('#resultcontent').append(resultcontent);
	}});
</script>

実行結果

f:id:knkomko:20180825122543p:plain:w500

ポイント

・クロスドメイン制約には JavaScript API の Places Library で対応する
ajax では取得できない為 JavaScript API の Places Library を使用することで取得を行っています。

var service = new google.maps.places.PlacesService(document.createElement('div'));

APIを使い始めた時は ajax を使っていて dataType に 'json' を指定していましたが、クロスドメイン制約があるため取得ができませんでした。

$.ajax({
	type: 'GET',
	url: 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=明野のひまわり畑&language=ja&key=Google Maps API Key',
	dataType: 'json',
	success: function(json){
		var len = json.length;
		for(var i=0; i < len; i++){
			$("#resultcontent").append(json[i].rate);
		}
	}
});

以下は実行時のエラーです。
f:id:knkomko:20180825135949p:plain:w500

ajax の dataType を 'jsonp' に変更すればクロスドメイン制約を回避できるようですが Google Places API が JSONP に対応していませんでした。

We don't provide a JSONP interface for Autocomplete.
引用元 : https://groups.google.com/forum/#!topic/google-maps-api-web-services/8gR153dHnS4

Grow up

生活とプログラミング