Nova Google Map with Autocomplete

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.

Screenshot

Requirements

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

Installation

composer require ghanem/google-map

Publish the config file:

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

Configuration

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.

Usage

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).

Custom Field Names

If your database columns are not named latitude and longitude:

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

Hide Coordinate Inputs

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

Custom Zoom Level

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

Override API Key Per Field

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

All Options Combined

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(),

Events

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

| Event | Description | |-------|-------------| | address-update | Full formatted address | | city-update | City / locality name | | state-update | State / administrative area | | country-update | Country name | | zip-code-update | Postal code | | latitude-update | Latitude value (incoming) | | longitude-update | Longitude value (incoming) |

Changelog

See CHANGELOG.md for release history.

License

MIT - see LICENSE for details.

Become a Sponsor