Next-store-locator NPM

Next Store Locator Test

A React component for easily integrating Google Maps Store Locator feature into Next.js applications. Check working example.

Installation

npm install next-store-locator-test
# or
yarn add next-store-locator-test

Usage

First, import the CSS for next-store-locator-test at the top of your application or component to ensure the styles are loaded:

import 'next-store-locator-test/dist/style.css';

Here's a basic example to integrate the NextStoreLocator component into your Next.js app:

import React, { useEffect, useState } from 'react';
import NextStoreLocator from 'next-store-locator-test';

const mapOptions = {
  center: { lat: 40.7128, lng: -74.0060 },
  zoom: 10,
  mapTypeControl: false,
  streetViewControl: false,
  fullscreenControl: false,
  styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }],
};

const Page = () => {
  const [locations, setLocations] = useState([]);

  useEffect(() => {
    async function fetchLocations() {
      const response = await fetch('https://www.milestone.de/api/getstorelocatorlist');
      const data = await response.json();
      setLocations(data);
    }
    fetchLocations();
  }, []);

  return (
    <main className="w-full pt-8">
      <div className="w-full inline-flex justify-center pb-8">
        <h1 className="text-3xl font-bold">Next Store Locator</h1>
      </div>
      {locations.length > 0 && (
        <NextStoreLocator
          locationsProp={locations}
          mapOptionsProp={mapOptions}
          iconPaths={{ markerIcon: 'images/custom-marker.png' }}
          apiKey={"YOUR_GOOGLE_MAPS_API_KEY"}
        />
      )}
    </main>
  );
};

export default Page;

Replace "YOUR_GOOGLE_MAPS_API_KEY" with your actual Google Maps API key.