Basic Markers

After adding a map, you can add basic markers to show points of interest on the map.

Adding a Basic Marker

Basic markers are the simplest way to show points on the map. They only require an icon and a coordinate.

Basic Example


import 'package:lazarillo_maps/lazarillo_maps.dart';
 
// Create a basic marker
final marker = LzBasicMarker(
  'pin', // Icon name
  const LatLng(-33.417733, -70.606573), // Coordinates (latitude, longitude)
);
 
// Add the marker to the map
await lazarilloMapWidget.addMarker(marker);

Complete Example


import 'package:flutter/material.dart';
import 'package:lazarillo_maps/lazarillo_maps.dart';
 
class MapExample extends StatefulWidget {
  @override
  _MapExampleState createState() => _MapExampleState();
}
 
class _MapExampleState extends State<MapExample> {
  LazarilloMapWidget? mapWidget;
  LazarilloMaps? lazarilloMaps;
 
  @override
  void initState() {
    super.initState();
    _initializeMap();
  }
 
  Future<void> _initializeMap() async {
    // Initialize Lazarillo Maps
    lazarilloMaps = LazarilloMaps('your-api-key-here');
    await lazarilloMaps!.initialize();
 
    // Map configuration
    final mapConfig = MapConfiguration(
      latitude: -33.417733,
      longitude: -70.606573,
      zoom: 15.0,
    );
 
    // Create the map widget
    mapWidget = lazarilloMaps!.getLazarilloMapWidget(
      mapConfig,
      (String mapId) {
        print('Map ready: $mapId');
        _addSampleMarkers();
      },
    );
 
    setState(() {});
  }
 
  Future<void> _addSampleMarkers() async {
    if (mapWidget == null) return;
 
    try {
      // Marker 1: Red pin
      final marker1 = LzBasicMarker(
        'pin',
        const LatLng(-33.417733, -70.606573),
      );
      await mapWidget!.addMarker(marker1);
 
      // Marker 2: Blue pin (different location)
      final marker2 = LzBasicMarker(
        'pin',
        const LatLng(-33.418000, -70.607000),
      );
      await mapWidget!.addMarker(marker2);
 
      print('Markers added successfully');
    } catch (e) {
      print('Error adding markers: $e');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    if (mapWidget == null) {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
 
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic Markers'),
      ),
      body: mapWidget!,
      floatingActionButton: FloatingActionButton(
        onPressed: _addSampleMarkers,
        child: const Icon(Icons.add_location),
        tooltip: 'Add Markers',
      ),
    );
  }
}

Basic Marker Parameters

LzBasicMarker

Parameter	Type	Required	Description
`icon`	`String`	✅	Name of the icon to display
`coordinate`	`LatLng`	✅	Marker coordinates (latitude, longitude)

Coordinates (LatLng)


const LatLng(latitude, longitude)

latitude: Value between -90 and 90 (negative for south, positive for north)
longitude: Value between -180 and 180 (negative for west, positive for east)

Coordinate Examples


// Santiago, Chile
const LatLng(-33.417733, -70.606573)
 
// New York, USA
const LatLng(40.7128, -74.0060)
 
// London, UK
const LatLng(51.5074, -0.1278)
 
// Tokyo, Japan
const LatLng(35.6762, 139.6503)

Error Handling

It’s important to handle errors when adding markers:


Future<void> addMarkerSafely() async {
  try {
    final marker = LzBasicMarker(
      'pin',
      const LatLng(-33.417733, -70.606573),
    );
    
    await mapWidget!.addMarker(marker);
    print('Marker added successfully');
  } catch (e) {
    print('Error adding marker: $e');
    // Show error message to user
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Error: $e')),
    );
  }
}

Important Notes

Initialization: Make sure the map is completely initialized before adding markers
Valid coordinates: Verify that coordinates are within valid ranges
Available icons: Check the documentation for available icons
Performance: Don’t add too many markers simultaneously to avoid performance issues

Next Steps

Attribute Markers - Advanced markers with text and colors
Image URL Markers - Markers with remote images
Marker Management - How to remove and manage markers