A Laravel Nova field that provides an interactive Google Map with Places Autocomplete for picking locations. Users can search for addresses, drag a marker, or enter coordinates manually.

• PHP 8.1+
• Laravel Nova 4.x or 5.x
• A Google Cloud API key with Maps JavaScript API and Places API enabled

composer require ghanem/google-map

Publish the config file:

php artisan vendor:publish --provider="Ghanem\GoogleMap\FieldServiceProvider"

Add your Google Maps API key to .env:

GMAPS_API_KEY=your-api-key-here

Optional environment variables with their defaults:

GMAPS_DEFAULT_LATITUDE=41.657523
GMAPS_DEFAULT_LONGITUDE=-101.157292
GMAPS_DEFAULT_ZOOM=3

Get your API key from the Google Cloud Console. Make sure to enable both Maps JavaScript API and Places API.

Add the field to your Nova resource:

use Ghanem\GoogleMap\GHMap;

public function fields(NovaRequest $request): array
{
    return [
        // ...
        GHMap::make('Location'),
    ];
}

Your model needs latitude and longitude columns (or custom names — see below).

If your database columns are not named latitude and longitude:

GHMap::make('Location')
    ->latitude('lat')
    ->longitude('lng'),

GHMap::make('Location')
    ->hideLatitude()
    ->hideLongitude(),

GHMap::make('Location')
    ->zoom(10),

GHMap::make('Location')
    ->apiKey('different-api-key'),

GHMap::make('Location')
    ->latitude('lat')
    ->longitude('lng')
    ->zoom(12)
    ->hideLatitude()
    ->hideLongitude(),

You can also use any standard Nova field methods (validation, visibility, etc.):

GHMap::make('Location')
    ->rules('required')
    ->hideFromIndex(),

When a location is selected (via autocomplete or marker drag), the field emits Nova events that you can listen to in other custom fields:

See CHANGELOG.md for release history.

MIT - see LICENSE for details.

Become a Sponsor