Google Maps 없이 모든 웹사이트에 매장 찾기 기능을 추가하는 방법

<link
  rel="stylesheet"
  href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css"
/>
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

npm install @mapmetrics/mapmetrics-gl

const stores = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.9041, 52.3676] },
      properties: {
        id: 1,
        name: "Amsterdam Central",
        address: "Stationsplein 12, 1012 AB Amsterdam",
        phone: "+31 20 123 4567",
        hours: "Mon-Sat 09:00-20:00"
      }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.4777, 51.9244] },
      properties: {
        id: 2,
        name: "Rotterdam Lijnbaan",
        address: "Lijnbaan 10, 3012 EL Rotterdam",
        phone: "+31 10 987 6543",
        hours: "Mon-Sat 09:00-21:00"
      }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [5.1214, 52.0907] },
      properties: {
        id: 3,
        name: "Utrecht Centrum",
        address: "Oudegracht 45, 3511 AB Utrecht",
        phone: "+31 30 555 1234",
        hours: "Mon-Sun 10:00-19:00"
      }
    }
  ]
};

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [5.2913, 52.1326], // Centre of the Netherlands
  zoom: 7
});

map.on('load', () => {
  // Add GeoJSON source with clustering
  map.addSource('stores', {
    type: 'geojson',
    data: stores,
    cluster: true,
    clusterMaxZoom: 12,
    clusterRadius: 50
  });

  // Cluster circles
  map.addLayer({
    id: 'clusters',
    type: 'circle',
    source: 'stores',
    filter: ['has', 'point_count'],
    paint: {
      'circle-color': '#3B82F6',
      'circle-radius': ['step', ['get', 'point_count'], 20, 10, 28, 30, 36]
    }
  });

  // Cluster count labels
  map.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: 'stores',
    filter: ['has', 'point_count'],
    layout: {
      'text-field': '{point_count_abbreviated}',
      'text-size': 13
    },
    paint: { 'text-color': '#ffffff' }
  });

  // Individual store pins
  map.addLayer({
    id: 'unclustered-point',
    type: 'circle',
    source: 'stores',
    filter: ['!', ['has', 'point_count']],
    paint: {
      'circle-color': '#EF4444',
      'circle-radius': 8,
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff'
    }
  });
});

// Click unclustered store → open popup + highlight list card
map.on('click', 'unclustered-point', (e) => {
  const { coordinates } = e.features[0].geometry;
  const { name, address, phone, hours, id } = e.features[0].properties;

  new mapmetricsgl.Popup()
    .setLngLat(coordinates)
    .setHTML(`
      <strong>${name}</strong>
      <p>${address}</p>
      <p>${phone}</p>
      <p>${hours}</p>
    `)
    .addTo(map);

  highlightCard(id);
});

// Click cluster → zoom in
map.on('click', 'clusters', (e) => {
  const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
  const clusterId = features[0].properties.cluster_id;
  map.getSource('stores').getClusterExpansionZoom(clusterId, (err, zoom) => {
    if (err) return;
    map.easeTo({ center: features[0].geometry.coordinates, zoom });
  });
});

function highlightCard(id) {
  document.querySelectorAll('.store-card').forEach(card => {
    card.classList.toggle('active', card.dataset.id === String(id));
  });
}

// Build list panel from store data
function buildListPanel() {
  const list = document.getElementById('store-list');
  stores.features.forEach(({ properties, geometry }) => {
    const card = document.createElement('div');
    card.className = 'store-card';
    card.dataset.id = properties.id;
    card.innerHTML = `
      <strong>${properties.name}</strong>
      <p>${properties.address}</p>
      <small>${properties.hours}</small>
    `;
    card.addEventListener('click', () => {
      map.flyTo({ center: geometry.coordinates, zoom: 14 });
      highlightCard(properties.id);
    });
    list.appendChild(card);
  });
}

async function searchLocation(query) {
  const url = new URL('https://api.mapatlas.eu/geocoding/v1/search');
  url.searchParams.set('text', query);
  url.searchParams.set('key', 'YOUR_API_KEY');

  const res = await fetch(url);
  const data = await res.json();

  if (!data.features.length) {
    alert('Address not found. Try a city or postcode.');
    return;
  }

  const [lng, lat] = data.features[0].geometry.coordinates;

  // Fly map to searched location
  map.flyTo({ center: [lng, lat], zoom: 10 });

  // Sort list by distance from searched point
  const sorted = [...stores.features].sort((a, b) => {
    const distA = haversine(lat, lng, a.geometry.coordinates[1], a.geometry.coordinates[0]);
    const distB = haversine(lat, lng, b.geometry.coordinates[1], b.geometry.coordinates[0]);
    return distA - distB;
  });

  document.getElementById('store-list').innerHTML = '';
  sorted.forEach(feature => {
    // Re-render each card (reuse buildListPanel logic)
  });
}

function haversine(lat1, lon1, lat2, lon2) {
  const R = 6371;
  const dLat = ((lat2 - lat1) * Math.PI) / 180;
  const dLon = ((lon2 - lon1) * Math.PI) / 180;
  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos((lat1 * Math.PI) / 180) *
    Math.cos((lat2 * Math.PI) / 180) *
    Math.sin(dLon / 2) ** 2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

document.getElementById('search-btn').addEventListener('click', () => {
  const query = document.getElementById('search-input').value.trim();
  if (query) searchLocation(query);
});

#locator-wrapper {
  display: flex;
  height: 600px;
  gap: 0;
}

#store-list {
  width: 300px;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
  padding: 12px;
}

#map {
  flex: 1;
}

.store-card {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.store-card.active {
  border-color: #3B82F6;
  background: #EFF6FF;
}

@media (max-width: 640px) {
  #locator-wrapper {
    flex-direction: column;
    height: auto;
  }
  #store-list {
    width: 100%;
    border-right: none;
    border-top: 1px solid #e5e7eb;
    height: 280px;
  }
  #map {
    height: 350px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Store Locator</title>
  <link rel="stylesheet"
    href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
  <script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>
  <style>
    /* paste the CSS from Step 6 here */
  </style>
</head>
<body>
  <div id="search-bar">
    <input id="search-input" type="text" placeholder="Enter your city or postcode…" />
    <button id="search-btn">Search</button>
  </div>
  <div id="locator-wrapper">
    <div id="store-list"></div>
    <div id="map"></div>
  </div>
  <script>
    // paste store data, map init, clustering, popup, list panel, and search from Steps 2–5
  </script>
</body>
</html>