> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocky.global/llms.txt
> Use this file to discover all available pages before exploring further.

# Manual address entry

# Manual Address Entry Feature

## Overview

This feature allows users to manually enter venue addresses when Google Maps autocomplete doesn't find the desired location. It provides a toggle between automatic (Google Maps autocomplete) and manual address entry modes.

## Features

### Toggle Functionality

* **Button Text**: "No encuentras la dirección, agrégalo manualmente" (default)
* **Toggle Text**: "Buscar con Google" (when in manual mode)
* **Visual Indicator**: Button changes color from secondary to primary when in manual mode

### Manual Mode

When activated, the following fields become editable:

* **Country** (`pais`)
* **City** (`ciudad`)
* **District** (`district`)

### Interactive Map

* **Location**: Displayed below the address fields
* **Visibility**: Only shown in manual mode
* **Features**:
  * Draggable marker for precise location selection
  * Automatic geocoding when country/city fields are filled
  * Real-time coordinate updates
  * Default zoom level: 15

### Coordinate Management

* **Always Saved**: Latitude and longitude are always saved regardless of mode
* **Hidden Fields**: `create_latitude`, `create_longitude`, `create_json_maps`
* **Auto-update**: Coordinates update automatically when:
  * Using Google Maps autocomplete
  * Dragging the marker in manual mode
  * Typing in country/city fields (with geocoding)

## Technical Implementation

### Files Modified

1. `resources/views/eventos/create_steps/step_1.blade.php`
   * Added toggle button
   * Added interactive map container
   * Added CSS styles

2. `public/assets/theme_assets/dany/js/autocomplete.js`
   * Added toggle functionality
   * Added interactive map initialization
   * Added geocoding functions
   * Enhanced coordinate management

### Key Functions

* `initializeToggleFunctionality()`: Sets up the toggle button and event listeners
* `toggleToManualMode()`: Switches to manual entry mode
* `toggleToAutomaticMode()`: Switches to autocomplete mode
* `initializeInteractiveMap()`: Creates the interactive map
* `updateMapFromManualFields()`: Updates map when manual fields change
* `geocodeAddress()`: Converts address to coordinates

### Dependencies

* Google Maps JavaScript API (Places and Geocoding libraries)
* Bootstrap CSS classes for styling

## Usage Flow

### Automatic Mode (Default)

1. User types in address field
2. Google Maps autocomplete suggests locations
3. User selects from suggestions
4. Fields are auto-populated and coordinates saved

### Manual Mode

1. User clicks toggle button
2. Country, city, district fields become editable
3. Interactive map appears
4. User can:
   * Type in country/city to auto-center map
   * Drag marker to precise location
   * Manually enter district information
5. Coordinates are automatically saved from marker position

## Error Handling

* Graceful fallback if geocoding fails
* Console logging for debugging
* Maintains existing coordinate values if new geocoding fails

## Browser Compatibility

* Modern browsers with Google Maps API support
* Mobile-responsive design
* Touch-friendly marker dragging