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.

Features

Easily integrate a store locator in your Next.js projects.
Customizable map options and styles.
Dynamic loading of store locations.

For more advanced usage and customization options, please refer to the official documentation.

License

Specify your package's license here, typically "MIT".