Google Places API を活用すると、地図上の地点に関する情報を強化できます。
出発地・到着地の入力支援や、近隣施設の検索など、ユーザーの操作性を向上させる強力な機能です。
■ オートコンプリート(入力補完)
住所や施設名を入力するフォームで、候補が自動表示されます。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> <input id="autocomplete" type="text" placeholder="出発地を入力" />
JavaScript
let map;
let marker;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.681236, lng: 139.767125 }, // 東京駅
zoom: 13,
});
const input = document.getElementById("search-box");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
alert("場所の情報が見つかりませんでした");
return;
}
map.setCenter(place.geometry.location);
map.setZoom(15);
if (marker) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
});
});
}
プレイス情報には、名前・住所・座標・URLなどが含まれます。
補足
13行目autocomplete.bindTo(“bounds”, map);について。
bindToを使用しない場合、検索対象が全世界になる可能性があります。
autocomplete.bindTo() に指定できる主なプロパティ一覧
| プロパティ名 | 説明 |
|---|---|
| bounds | 候補の地理的範囲を、地図の表示領域にバインド(推奨) |
| types | プレイスの種類(geocode、establishment)* |
| componentRestrictions | 国などに制限(バインド可能。ただし通常はsetComponentRestrictionsで直接指定) |
geocode = 地名や住所の候補(番地・町名・市区町村など)を返す
establishment = 施設名・店舗名・企業名などを返す(Google プレイスデータベースから)
autocomplete.bindTo(“bounds”, map);
autocomplete.setTypes([]); //両方のタイプを候補にしたい場合。
autocomplete.setComponentRestrictions({ country: “jp” });
■ 近くの施設を検索(Nearby Search)APIの変更点と対応
Google Maps JavaScript APIのPlaces機能に変更が発表されました。
2025年3月1日以降、新規に発行されたAPIキーでは従来のgoogle.maps.places.PlacesServiceが使えなくなり、新しいgoogle.maps.places.Place APIを使う必要があります。
従来のPlacesServiceは多くのユーザーに利用されていましたが、Googleはより高性能で拡張性の高い新APIへの移行を推進しています。
既存ユーザーのサービス停止は行われず、1年以上の猶予期間を設けていますが、新規プロジェクトでは新APIの使用が必須となります。
Nearby Searchに変わる新しい機能「PHP+JavaScriptで作るPlaces API Web Service」のリファレンスはこちら
