@golfguiders/react

Embed an interactive, GPS-enabled golf course explorer into your React or Next.js website. Drop in <GolfGuidersCourseWidget> to get a satellite-view map with hole navigation, shot planner, live weather, and more.

Works with

• ✅ React 17+
• ✅ Next.js (App Router and Pages Router)
• ✅ Remix
• ✅ Gatsby
• ✅ Astro (with React integration)
• ✅ Vite, Create React App, any React setup

Features

• 🗺️ Interactive satellite-view golf course maps
• 📍 Real-time GPS positioning on the course
• ⛳ Hole-by-hole navigation with auto-rotation
• 🎯 Shot planner with smart club recommendations
• 🌦️ Live weather with wind direction compass
• 📊 Scorecard, tee details, course rating & slope
• 🏔️ Elevation profile & adjusted distances
• 🎨 Fully configurable — show/hide features as needed

Installation

npm install @golfguiders/react
# or
yarn add @golfguiders/react

Quick start

import { GolfGuidersCourseWidget } from '@golfguiders/react';

export default function CourseView() {
  return (
    <GolfGuidersCourseWidget
      apiKey="YOUR_API_KEY"
      courseId="chambers-bay-123"
      setFlyover={true}
      style={{ width: '100%', height: 600 }}
    />
  );
}

Get an API key

Request your API key by emailing at email [email protected] or explore the website golfguiders.com to see what we do.

Props

Required

| Prop | Type | Description | |---|---|---| | apiKey | string | Your GolfGuiders API key |

Optional

| Prop | Type | Default | Description | |---|---|---|---| | baseUrl | string | https://widget.golfguiders.com | CDN URL hosting golfguiders.js | | courseId | string | — | Auto-load a specific course on mount (skips search) | | showSearch | boolean | true | Show the course search bar | | setDefaultGreenTarget | 'front' \| 'center' \| 'back' | 'center' | Default green target | | setFlyover | boolean | true | Animate camera when switching holes | | setShotPlanner | boolean | true | Enable the shot planner | | setElevation | boolean | false | Show elevation profile by default | | setGreenEdges | boolean | false | Show front/center/back distances | | setRatingSlope | boolean | false | Show course rating & slope | | setClubRecommendation | boolean | true | Show club hints on distance labels | | closeRedirectUrl | string | — | URL to redirect to when user closes the course | | hideElevation | boolean | false | Completely hide the elevation feature | | hideWeather | boolean | false | Completely hide the weather feature | | hideShotPlanner | boolean | false | Completely hide the shot planner | | hideGreenEdges | boolean | false | Completely hide front/back green | | hideRatingSlope | boolean | false | Completely hide rating & slope | | hideClubRecommendation | boolean | false | Completely hide club recommendations | | hideFlyover | boolean | false | Completely hide flyover toggle | | hideScorecard | boolean | true | Hide scorecard sidebar button | | gpsSim | boolean | false | Enable GPS simulation mode (testing) | | style | CSSProperties | — | Inline styles for the container <div> | | className | string | — | CSS class for the container <div> |

How it works

The wrapper renders a <div class="gg-maps"> and dynamically loads golfguiders.js from the GolfGuiders CDN. Your config is injected via window.GolfGuiders._config before the script runs.

Works with:

• React 17+
• Next.js (SSR-safe)
• Remix, Vite-React, CRA, Gatsby

Troubleshooting

Widget shows "Loading…" forever

• Verify apiKey is correct and active
• Check the browser console for errors
• Confirm your domain is authorized for this API key

Hydration warnings in Next.js

• The widget only renders client-side; if you see SSR warnings, wrap in <Suspense> or use a dynamic import with ssr: false

License

MIT — see LICENSE.

Support

• Email: [email protected]
• Bug reports: [email protected]

Maintainer

Saeed Afzal — CTO, GolfGuiders, Inc.

• 📧 [email protected]
• 🌐 saeedafzal.com
• 💬 linkedin.com/in/imsaeedafzal