รับ Maps Demo Key: ทดลองใช้ฟีเจอร์บางอย่างของ Maps JavaScript API และ Places UI Kit โดยไม่มีค่าใช้จ่ายด้วย Maps Demo Key โดยไม่ต้องระบุข้อมูลสำหรับการเรียกเก็บเงิน

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การค้นหาในบริเวณใกล้เคียง

เลือกแพลตฟอร์ม: Android iOS JavaScript เว็บเซอร์วิส

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

การค้นหาในบริเวณใกล้เคียง (ใหม่) จะใช้ประเภทสถานที่อย่างน้อย 1 ประเภท และแสดงรายการสถานที่ที่ตรงกัน ในตัวอย่างต่อไปนี้ คุณสามารถเลือกประเภทสถานที่และดูผลลัพธ์บนแผนที่ได้ คลิกเครื่องหมายเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับสถานที่

การค้นหาในบริเวณใกล้เคียง (ใหม่) จะแสดงข้อมูลเกี่ยวกับชุดสถานที่ตามประเภทสถานที่ที่คุณระบุ เช่น restaurant หรือ book_store หรือ bowling_alley บริการจะตอบกลับด้วยรายการสถานที่ที่ตรงกับประเภทสถานที่ที่ระบุภายในรัศมีของ locationRestriction ที่ระบุ

หากต้องการใช้การค้นหาในบริเวณใกล้เคียง (ใหม่) คุณต้องเปิดใช้ "Places API (ใหม่)" ในโปรเจ็กต์ Google Cloud ดูรายละเอียดได้ที่เริ่มต้นใช้งาน

ค้นหาสถานที่ใกล้เคียง

เรียกใช้ searchNearby() เพื่อแสดงรายการสถานที่ตามประเภทสถานที่ สถานที่ตั้ง และรัศมีที่ระบุ ระบุพารามิเตอร์การค้นหาโดยใช้คำขอ แล้วเรียกใช้ searchNearby() ระบบจะแสดงผลลัพธ์เป็นรายการออบเจ็กต์ Place ซึ่งคุณสามารถดูรายละเอียดสถานที่ได้ ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างคำขอและการเรียกใช้ searchNearby()

TypeScript

// Get bounds and radius to constrain search.
center = mapElement.center!;
const ne = innerMap.getBounds()!.getNorthEast();
const sw = innerMap.getBounds()!.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;
const ne = innerMap.getBounds().getNorthEast();
const sw = innerMap.getBounds().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 (จำเป็น) เพื่อระบุรายการฟิลด์ข้อมูลอย่างน้อย 1 รายการที่คั่นด้วยคอมมา ช่องที่คุณขอจะเป็นตัวกำหนดราคาของคำขอ ดูหัวข้อเลือกฟิลด์ข้อมูล
ใช้พารามิเตอร์ locationRestriction (ต้องระบุ) เพื่อระบุรัศมีสูงสุด 50,000 เมตร
ใช้พารามิเตอร์ includedPrimaryTypes เพื่อระบุประเภทสถานที่ที่จะค้นหาอย่างน้อย 1 ประเภท
ใช้พารามิเตอร์ rankPreference เพื่อระบุ SearchNearbyRankPreference เป็น POPULARITY หรือ DISTANCE
ดูรายการพารามิเตอร์ทั้งหมด

ตัวอย่าง

ตัวอย่างต่อไปนี้ใช้ searchNearby() เพื่อค้นหาสถานที่ประเภทที่เลือกภายในขอบเขตของแผนที่ และสร้างแผนที่พร้อมเครื่องหมายเพื่อแสดงผลลัพธ์

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let center: google.maps.LatLngLiteral | google.maps.LatLng;
let typeSelect: HTMLSelectElement;
let infoWindow: google.maps.InfoWindow;

async function init() {
    const [{ InfoWindow }, { event }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

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

    typeSelect = document.querySelector('.type-select')!;

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

    infoWindow = new InfoWindow();

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

async function nearbySearch() {
    const [
        { Place, SearchNearbyRankPreference },
        { AdvancedMarkerElement },
        { spherical },
    ] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('geometry'),
    ]);
    // Get bounds and radius to constrain search.
    center = mapElement.center!;
    const ne = innerMap.getBounds()!.getNorthEast();
    const sw = innerMap.getBounds()!.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,
                gmpClickable: true,
            });

            // 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.addEventListener('gmp-click', () => {
                innerMap.panTo(place.location!);
                updateInfoWindow(place.displayName!, content, marker);
            });
        });

        innerMap.fitBounds(bounds, 100);
    } else {
        console.log('No results');
    }
}

function updateInfoWindow(
    title: string | Element | null,
    content: string | Element | null,
    anchor: google.maps.marker.AdvancedMarkerElement
) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        anchor,
    });
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let center;
let typeSelect;
let infoWindow;

async function init() {
    const [{ InfoWindow }, { event }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

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

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

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

    infoWindow = new InfoWindow();

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

async function nearbySearch() {
    const [
        { Place, SearchNearbyRankPreference },
        { AdvancedMarkerElement },
        { spherical },
    ] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('geometry'),
    ]);
    // Get bounds and radius to constrain search.
    center = mapElement.center;
    const ne = innerMap.getBounds().getNorthEast();
    const sw = innerMap.getBounds().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,
                gmpClickable: true,
            });

            // 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.addEventListener('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,
    });
}

void init();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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY" 
            });
        </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

เลือกฟิลด์ข้อมูล

ช่องที่คุณขอจะกำหนดราคาของคำขอการค้นหาแต่ละรายการ ระบบจะเรียกเก็บเงินสำหรับคำขอเพียงครั้งเดียวที่ SKU สูงสุดในบรรดาช่องที่ขอ เช่น การเพิ่ม reviews ลงใน fields จะเรียกเก็บเงินคำขอทั้งหมดเป็นการค้นหาในบริเวณใกล้เคียงระดับ Enterprise + บรรยากาศ

หากต้องการให้คำขอการค้นหาอยู่ใน Nearby Search Pro ให้ขอเฉพาะช่องที่ผลการค้นหาแสดง เช่น id, displayName, formattedAddress และ location

เมื่อผู้ใช้เลือกสถานที่ ให้เรียกใช้ fetchFields() ในสถานที่นั้นเพื่อรับฟิลด์ต่างๆ เช่น reviews, nationalPhoneNumber หรือ websiteURI การเรียกใช้ fetchFields() แต่ละครั้งเป็นคำขอรายละเอียดสถานที่แยกต่างหาก โดยจะเรียกเก็บเงินตาม SKU สูงสุดในบรรดาฟิลด์ที่ขอ วิธีนี้จะช่วยประหยัดเงินได้หรือไม่นั้นขึ้นอยู่กับจำนวนสถานที่ที่ผู้ใช้เปิด

ช่องที่ทริกเกอร์ SKU แต่ละรายการ

ช่องต่อไปนี้จะทริกเกอร์ SKU การค้นหาในบริเวณใกล้เคียง Pro

accessibilityOptions
addressComponents
adrFormatAddress
businessStatus
displayName
formattedAddress
googleMapsUri
iconBackgroundColor
id
location
photos
plusCode
svgIconMaskURI
types
utcOffsetMinutes
viewport
ช่องต่อไปนี้จะทริกเกอร์ SKU ระดับองค์กรสำหรับการค้นหาในบริเวณใกล้เคียง

internationalPhoneNumber
nationalPhoneNumber
priceLevel
rating
regularOpeningHours
userRatingCount
websiteURI
ช่องต่อไปนี้จะทริกเกอร์ SKU การค้นหาในบริเวณใกล้เคียงระดับองค์กร + บรรยากาศ

allowsDogs
editorialSummary
evChargeOptions
fuelOptions
hasCurbsidePickup
hasDelivery
hasDineIn
hasLiveMusic
hasMenuForChildren
hasOutdoorSeating
hasRestroom
hasTakeout
hasWifi
isGoodForChildren
isGoodForGroups
isGoodForWatchingSports
isReservable
parkingOptions
paymentOptions
reviews
servesBeer
servesBreakfast
servesBrunch
servesCocktails
servesCoffee
servesDessert
servesDinner
servesLunch
servesVegetarianFood
servesWine

ดู SKU ของทุกฟิลด์ได้ที่ฟิลด์ข้อมูลคลาส Place