​

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