Nearby Search

プラットフォームを選択: Android iOS JavaScript ウェブサービス
欧州経済領域（EEA）のデベロッパー

Nearby Search（新版）は 1 つ以上の場所タイプを受け取り、一致する場所のリストを返します。次の例では、場所のタイプを選択して、地図上に結果を表示できます。マーカーをクリックすると、場所の詳細が表示されます。

Nearby Search（新版）は、指定した場所タイプ（restaurant、book_store、bowling_alley など）に基づいて、一連の場所に関する情報を返します。つまり、指定された locationRestriction の半径内で、指定された場所タイプに一致する場所のリストをレスポンスとして返します。

Nearby Search（新版）を利用するには、ご使用の Google Cloud プロジェクトで「Places API（新版）」を有効化する必要があります。詳しくはスタートガイドをご覧ください。

付近の場所を見つける

searchNearby() を呼び出すと、指定された場所のタイプ、位置、半径に基づいて場所のリストが返されます。リクエストを使用して検索パラメータを指定して、searchNearby() を呼び出します。結果は Place オブジェクトのリストとして返されます。そのリストから場所の詳細を取得できます。次のスニペットは、リクエストと searchNearby() 呼び出しの例を示しています。

TypeScript

// Get bounds and radius to constrain search.
center = mapElement.center;
let bounds = innerMap.getBounds();
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
const diameter = spherical.computeDistanceBetween(ne, sw);
const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.

const request = {
    // required parameters
    fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
    locationRestriction: {
        center,
        radius,
    },
    // optional parameters
    includedPrimaryTypes: [typeSelect.value],
    maxResultCount: 5,
    rankPreference: SearchNearbyRankPreference.POPULARITY,
};

const { places } = await Place.searchNearby(request);
index.ts

JavaScript

// Get bounds and radius to constrain search.
center = mapElement.center;
let bounds = innerMap.getBounds();
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
const diameter = spherical.computeDistanceBetween(ne, sw);
const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
const request = {
    // required parameters
    fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
    locationRestriction: {
        center,
        radius,
    },
    // optional parameters
    includedPrimaryTypes: [typeSelect.value],
    maxResultCount: 5,
    rankPreference: SearchNearbyRankPreference.POPULARITY,
};
const { places } = await Place.searchNearby(request);
index.js
  • fields パラメータ（必須）を使用して、データ フィールドを指定（複数可）します。
  • locationRestriction パラメータ（必須）を使用して、50,000 m までの半径を指定します。
  • includedPrimaryTypes パラメータを使用して、検索する場所タイプを指定（複数可）します。
  • rankPreference パラメータを使用して、POPULARITY または DISTANCE の SearchNearbyRankPreference を指定します。
  • パラメータの完全なリストについては、こちらを参照してください。

例

次の例では、searchNearby() を使用して地図の境界内の選択したタイプの場所をクエリし、結果をマーカーで地図に表示します。

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as google.maps.marker.AdvancedMarkerElement;
let center;
let typeSelect;
let infoWindow;

async function initMap() {
    const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
    const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    typeSelect = document.querySelector(".type-select");

    typeSelect.addEventListener('change', () => {
        nearbySearch();
    });

    infoWindow = new InfoWindow();

    // Kick off an initial search once map has loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        nearbySearch();
    });
}

async function nearbySearch() {
    const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
    // Get bounds and radius to constrain search.
    center = mapElement.center;
    let bounds = innerMap.getBounds();
    const ne = bounds.getNorthEast();
    const sw = bounds.getSouthWest();
    const diameter = spherical.computeDistanceBetween(ne, sw);
    const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.

    const request = {
        // required parameters
        fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
        locationRestriction: {
            center,
            radius,
        },
        // optional parameters
        includedPrimaryTypes: [typeSelect.value],
        maxResultCount: 5,
        rankPreference: SearchNearbyRankPreference.POPULARITY,
    };

    const { places } = await Place.searchNearby(request);

    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
        const bounds = new LatLngBounds();

        // First remove all existing markers.
        for (const marker of mapElement.querySelectorAll('gmp-advanced-marker')) marker.remove();

        // Loop through and get all the results.
        places.forEach(place => {
            if (!place.location) return;
            bounds.extend(place.location);

            const marker = new AdvancedMarkerElement({
                map: innerMap,
                position: place.location,
                title: place.displayName,
            });

            // Build the content of the InfoWindow safely using DOM elements.
            const content = document.createElement('div');
            const address = document.createElement('div');
            address.textContent = place.formattedAddress || '';
            const placeId = document.createElement('div');
            placeId.textContent = place.id;
            content.append(address, placeId);

            if (place.googleMapsURI) {
                const link = document.createElement('a');
                link.href = place.googleMapsURI;
                link.target = '_blank';
                link.textContent = 'View Details on Google Maps';
                content.appendChild(link);
            }

            marker.addListener('gmp-click', () => {
                innerMap.panTo(place.location);
                updateInfoWindow(place.displayName, content, marker);
            });
        });

        innerMap.fitBounds(bounds, 100);

    } else {
        console.log('No results');
    }
}

function updateInfoWindow(title, content, anchor) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        anchor,
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center;
let typeSelect;
let infoWindow;
async function initMap() {
    const { Map, InfoWindow } = await google.maps.importLibrary('maps');
    const { LatLng } = await google.maps.importLibrary("core");
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    typeSelect = document.querySelector(".type-select");
    typeSelect.addEventListener('change', () => {
        nearbySearch();
    });
    infoWindow = new InfoWindow();
    // Kick off an initial search once map has loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        nearbySearch();
    });
}
async function nearbySearch() {
    const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { spherical } = await google.maps.importLibrary('geometry');
    // Get bounds and radius to constrain search.
    center = mapElement.center;
    let bounds = innerMap.getBounds();
    const ne = bounds.getNorthEast();
    const sw = bounds.getSouthWest();
    const diameter = spherical.computeDistanceBetween(ne, sw);
    const radius = Math.min((diameter / 2), 50000); // Radius cannot be more than 50000.
    const request = {
        // required parameters
        fields: ['displayName', 'location', 'formattedAddress', 'googleMapsURI'],
        locationRestriction: {
            center,
            radius,
        },
        // optional parameters
        includedPrimaryTypes: [typeSelect.value],
        maxResultCount: 5,
        rankPreference: SearchNearbyRankPreference.POPULARITY,
    };
    const { places } = await Place.searchNearby(request);
    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary("core");
        const bounds = new LatLngBounds();
        // First remove all existing markers.
        for (const marker of mapElement.querySelectorAll('gmp-advanced-marker'))
            marker.remove();
        // Loop through and get all the results.
        places.forEach(place => {
            if (!place.location)
                return;
            bounds.extend(place.location);
            const marker = new AdvancedMarkerElement({
                map: innerMap,
                position: place.location,
                title: place.displayName,
            });
            // Build the content of the InfoWindow safely using DOM elements.
            const content = document.createElement('div');
            const address = document.createElement('div');
            address.textContent = place.formattedAddress || '';
            const placeId = document.createElement('div');
            placeId.textContent = place.id;
            content.append(address, placeId);
            if (place.googleMapsURI) {
                const link = document.createElement('a');
                link.href = place.googleMapsURI;
                link.target = '_blank';
                link.textContent = 'View Details on Google Maps';
                content.appendChild(link);
            }
            marker.addListener('gmp-click', () => {
                innerMap.panTo(place.location);
                updateInfoWindow(place.displayName, content, marker);
            });
        });
        innerMap.fitBounds(bounds, 100);
    }
    else {
        console.log('No results');
    }
}
function updateInfoWindow(title, content, anchor) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        anchor,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.type-select {
    width: 400px;
    height: 32px;
    border: 1px solid #000;
    border-radius: 10px;
    flex-grow: 1;
    padding: 0 10px;
    margin-left: 10px;
    margin-top: 10px;
  }

style.css

HTML

<html>

<head>
  <title>Nearby Search</title>

  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script type="module" src="./index.js"></script>
  <!-- prettier-ignore -->
  <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
</head>

<body>
  <gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"><!-- Map id is required for Advanced Markers. -->
    <gmp-advanced-marker></gmp-advanced-marker>
    <div id="controls" slot="control-inline-start-block-start">
      <select name="types" class="type-select">
        <option value="cafe" selected>Cafe</option>
        <option value="restaurant">Restaurant</option>
        <option value="museum">Museum</option>
        <option value="monument">Monument</option>
        <option value="park">Park</option>
      </select>
    </div>
  </gmp-map>
</body>

</html>
index.html

サンプルを試す