Google Map Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require arcasolutions/google-map-bundle
   

   Ensure ArcaSolutions\GoogleMapBundle\ArcaSolutionsGoogleMapBundle is enabled in config/bundles.php.

2. Configuration: Add Google Maps API key to config/packages/arcasolutions_google_map.yaml:

   arcasolutions_google_map:
       map:
           api_key: "YOUR_API_KEY"
   

3. First Use Case: Render a basic map in a Twig template:

   {{ render(controller('ArcaSolutionsGoogleMapBundle:Default:map')) }}
   

   Or use the service directly in a controller:

   use Ivory\GoogleMap\Map;
   use Ivory\GoogleMap\Overlay\Marker;
   
   $map = $this->get('ivory_google_map.map');
   $map->addMarker(new Marker('Hello World!', [48.8584, 2.2945]));
   
   return $this->render('map.html.twig', ['map' => $map]);
   

Implementation Patterns

Core Workflows

1. Dynamic Map Rendering: Build maps programmatically in controllers or services:

   $map = $this->get('ivory_google_map.map');
   $map->setCenter([48.8584, 2.2945])->setZoom(12);
   $map->addMarker(new Marker('Location', [48.8584, 2.2945]));
   return $this->render('map.html.twig', ['map' => $map]);
   

2. Twig Integration: Use Twig extensions for concise syntax:

   {% google_map map %}
       {% marker 'Location' at [48.8584, 2.2945] %}
   {% end_google_map %}
   

3. Geocoding & Directions: Leverage services for API calls:

   $geocoder = $this->get('ivory_google_map.geocoder');
   $result = $geocoder->geocode('1600 Amphitheatre Parkway, Mountain View');
   

4. Event Handling: Attach JavaScript events via Twig:

   {% google_map map %}
       {% marker 'Clickable' at [48.8584, 2.2945] with {
           'events': {
               'click': 'alert("Marker clicked!")'
           }
       } %}
   {% end_google_map %}
   

Integration Tips

• Symfony Forms: Use IvoryGoogleMapType for form fields:

  $builder->add('location', IvoryGoogleMapType::class, [
      'map_options' => ['center' => [48.8584, 2.2945], 'zoom' => 12],
  ]);
  

• API Key Management: Store keys in parameters.yaml and reference via %env% for security.
• Asset Optimization: Configure Twig to bundle Google Maps JS/CSS with other assets.

Gotchas and Tips

Pitfalls

1. Deprecated Bundle:

   • The package wraps IvoryGoogleMapBundle (last updated 2016), which may have compatibility issues with modern Symfony (5.x/6.x). Test thoroughly.
   • Workaround: Use a fork or polyfill missing features (e.g., TypeScript support).

2. API Key Restrictions:

   • Ensure your key has Maps JavaScript API enabled. Restricted keys (e.g., server-side) will fail.
   • Debug Tip: Check browser console for InvalidKey errors.

3. Twig Template Caching:

   • Dynamically generated maps may break caching. Use {% block google_map %} in templates to override defaults.

4. Marker Overlays:

   • Default markers lack icons. Customize via:

     $marker = new Marker('Location', [48.8584, 2.2945]);
     $marker->setIcon('https://maps.google.com/mapfiles/ms/icons/blue.png');
     

Debugging

• Console Errors: Use var_dump($map->getOptions()) to inspect generated JS options.
• Network Tab: Verify Google Maps API loads (check for 403 errors on /maps/api/js).
• Symfony Profiler: Log service calls for debugging:

  $this->get('logger')->debug('Map options:', $map->getOptions());
  

Extension Points

1. Custom Overlays: Extend Ivory\GoogleMap\Overlay\OverlayInterface for new shapes (e.g., heatmaps):

   class CustomOverlay implements OverlayInterface { ... }
   

2. Event Listeners: Subscribe to map events via Symfony’s event dispatcher:

   # config/services.yaml
   services:
       App\EventListener\MapListener:
           tags:
               - { name: kernel.event_listener, event: ivory_google_map.map_render, method: onMapRender }
   

3. API Service Overrides: Replace default services (e.g., geocoder) with custom implementations:

   # config/services.yaml
   services:
       ivory_google_map.geocoder:
           class: App\Service\CustomGeocoder
           arguments: ['@http_client']
   

Performance Tips

• Lazy-Loading: Defer non-critical overlays (e.g., marker clusters) until user interaction.
• Static Maps: For simple use cases, use Google’s Static Maps API to avoid JS overhead.