The latest articles on DEV Community by Arif Nurdian (@arif_nurdian_1845d6e837d0). https://dev.to/arif_nurdian_1845d6e837d0 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3173724%2Fb971ce30-2b4a-4150-81e7-832c7f3569e1.jpg https://dev.to/arif_nurdian_1845d6e837d0 en Arif Nurdian Sat, 17 May 2025 14:11:54 +0000 https://dev.to/arif_nurdian_1845d6e837d0/how-to-find-the-closest-destination-from-one-origin-to-multiple-destination-options-using-google-1bnp https://dev.to/arif_nurdian_1845d6e837d0/how-to-find-the-closest-destination-from-one-origin-to-multiple-destination-options-using-google-1bnp <p>To find the closest destination from one origin to multiple destination options using Google Maps, you should use the Google Distance Matrix API.</p> <p>Here’s a complete guide using Next.js + @react-google-maps/api to find the nearest destination:</p> <h2> Overview: </h2> <ul> <li>Use the Distance Matrix API to get travel distances between one origin and multiple destinations.</li> <li>Compare the distances and pick the closest one.</li> </ul> <h2> Step-by-step Implementation: </h2> <h3> 1. Enable Distance Matrix API </h3> <p>Go to: <a href="https://console.cloud.google.com/apis/library" rel="noopener noreferrer">https://console.cloud.google.com/apis/library</a><br> Search for Distance Matrix API, and click Enable.</p> <h3> 2. Add destinations list </h3> <p>For example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const destinations = [ { name: 'Location A', address: 'Jl. Sudirman, Jakarta' }, { name: 'Location B', address: 'Jl. Thamrin, Jakarta' }, { name: 'Location C', address: 'Jl. Merdeka, Jakarta' }, ]; </code></pre> </div> <h3> 3. Code Sample in React (with Next.js) </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>'use client'; import React, { useRef, useState } from 'react'; import { useJsApiLoader, Autocomplete } from '@react-google-maps/api'; const libraries = ['places']; export default function FindClosestLocation() { const { isLoaded } = useJsApiLoader({ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY, libraries, }); const originRef = useRef(); const [closest, setClosest] = useState(null); const [loading, setLoading] = useState(false); const destinations = [ { name: 'Location A', address: 'Jl. Sudirman, Jakarta' }, { name: 'Location B', address: 'Jl. Thamrin, Jakarta' }, { name: 'Location C', address: 'Jl. Merdeka, Jakarta' }, ]; const findClosest = () =&gt; { const origin = originRef.current?.value; if (!origin) return alert('Please enter an origin'); const service = new window.google.maps.DistanceMatrixService(); setLoading(true); service.getDistanceMatrix( { origins: [origin], destinations: destinations.map((d) =&gt; d.address), travelMode: window.google.maps.TravelMode.DRIVING, unitSystem: window.google.maps.UnitSystem.METRIC, }, (response, status) =&gt; { setLoading(false); if (status !== 'OK') return alert('Error: ' + status); const distances = response.rows[0].elements; let minIndex = 0; for (let i = 1; i &lt; distances.length; i++) { if (distances[i].distance.value &lt; distances[minIndex].distance.value) { minIndex = i; } } setClosest({ destination: destinations[minIndex], distance: distances[minIndex].distance.text, duration: distances[minIndex].duration.text, }); } ); }; if (!isLoaded) return &lt;p&gt;Loading...&lt;/p&gt;; return ( &lt;div&gt; &lt;h2&gt;Find Closest Location&lt;/h2&gt; &lt;Autocomplete&gt; &lt;input type="text" ref={originRef} placeholder="Enter your origin" style={{ width: '300px', padding: '0.5rem', marginRight: '1rem' }} /&gt; &lt;/Autocomplete&gt; &lt;button onClick={findClosest} disabled={loading} style={{ padding: '0.5rem 1rem' }}&gt; {loading ? 'Finding...' : 'Find Closest'} &lt;/button&gt; {closest &amp;&amp; ( &lt;div style={{ marginTop: '1rem' }}&gt; &lt;h3&gt;Closest: {closest.destination.name}&lt;/h3&gt; &lt;p&gt;Address: {closest.destination.address}&lt;/p&gt; &lt;p&gt;Distance: {closest.distance}&lt;/p&gt; &lt;p&gt;Duration: {closest.duration}&lt;/p&gt; &lt;/div&gt; )} &lt;/div&gt; ); } </code></pre> </div>