tablet-app/lib/Components/Map/mapView.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:tablet_app/Components/Map/markerInfo.dart';

Set<Marker> markers = {};
List<MarkersModel> markersList = List();

class MarkersModel {
  int id;
  String name;
  String description;
  String latitude;
  String longitude;
  String image;
  MarkersModel(
      this.id,
      this.name,
      this.description,
      this.latitude,
      this.longitude,
      this.image);

// you can use this model with your backend as well :

/*  factory MarkersModel.fromJson(Map<String, dynamic> json) => MarkersModel(
      id: json['id'],
      name: json['name'],
      description: json['description'],
      latitude: json['latitude'],
      longitude: json['longitude'],
      image: json["image"]);
*/
}


class MapViewWidget extends StatefulWidget {
  MapViewWidget();

  @override
  _MapViewWidget createState() => _MapViewWidget();
}

class _MapViewWidget extends State<MapViewWidget> {

  Completer<GoogleMapController> _controller = Completer();

  var markerSelected = "NULL";

  void getMarkers() async {
    /*final Uint8List userMarkerIcon =
    await getBytesFromAsset('assets/normalMarker.png', 75);

    final Uint8List selectedMarkerIcon =
    await getBytesFromAsset('assets/selectedMarker.png', 100);*/

    markers = {};

    markersList.add(MarkersModel(
        1,
        "La Grande Poste",
        "The Algiers central post office is an office building for postal services located at Alger Centre municipality in Algiers, Algeria",
        "36.752887",
        "3.042048",
        "https://www.dzbreaking.com/wp-content/uploads/2018/03/2000.png"));
    markersList.add(MarkersModel(
        2,
        "Mosquee Ketchaoua",
        "The Ketchaoua Mosque is a mosque in Algiers, the capital of Algeria. It was built during the Ottoman rule in the 17th century and is located at the foot of the Casbah, which is a UNESCO World Heritage Site",
        "36.7850",
        "3.0608",
        "https://ttnotes.com/images/makam-echahid-algiers.jpg"));
    markersList.add(MarkersModel(
        3,
        "The shrine of the martyr",
        "The Maqam Echahid is a concrete monument commemorating the Algerian war for independence. The monument was opened in 1982 on the 20th anniversary of Algeria's independence",
        "36.7456",
        "3.0698",
        "https://www.airfrance.co.uk/GB/common/common/img/tbaf/news/ALG/la-mosquee-ketchaoua-l-histoire-avec-un-grand-h/ALG-la-mosquee-ketchaoua-l-histoire-avec-un-grand-h-2_1-1024x512.jpg"));


    markersList.forEach((element) {
      if (element.latitude != null && element.longitude != null) {
        markers.add(Marker(
            draggable: false,
            markerId: MarkerId(element.latitude + element.longitude),
            position: LatLng(
              double.tryParse(element.latitude),
              double.tryParse(element.longitude),
            ),
            icon: BitmapDescriptor.defaultMarkerWithHue(
              BitmapDescriptor.hueYellow,
            ),
            onTap: () {
              print('hello you 1');
              setState(() {
                markerSelected = element.latitude + element.longitude;
              });
            },
            infoWindow: InfoWindow(title: element.name)));
      }
    });
  }

  @override
  void initState() {
    getMarkers();
    print('coucou marlers');
    print(markers);
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(50.4167344, 4.879165),
    zoom: 0.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 59.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Stack(
        children: <Widget>[
          GoogleMap(
            mapType: MapType.hybrid,
            initialCameraPosition: _kGooglePlex,
            onMapCreated: (GoogleMapController controller) {
              _controller.complete(controller);
            },
            markers: markers,
            onTap: (LatLng location) {
              setState(() {
                print(location);
              });
            },
          ),
          MarkerInfoWidget(title: markerSelected,
              description: 'DESCRIPTION',
              text: 'TEXTE kmljfdkmj dfsmlkj dfmlkj mlkj df')
        ]
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  void _onMarkerTapped(Marker marker) {

  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }

  Marker newyork1Marker = Marker(
    markerId: MarkerId('newyork1'),
    position: LatLng(40.742451, -74.005959),
    infoWindow: InfoWindow(title: 'Los Tacos', snippet: 'lhlkjsdf lksdfk jdsf kjdfs lkjfds lkjdflkjdjdsf ljfds ljdfslkj fdsjfdslkjfdsmkfdsmlk dfslkjh dfjdfskdsf dfsmkj fdskj df'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueViolet,
    ),
  );

  Marker gramercyMarker = Marker(
    markerId: MarkerId('asticot'),
    position: LatLng(20.738380, -43.988426),
    infoWindow: InfoWindow(title: 'Coucou asticot'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueGreen,
    ),
  );

  Marker bernardinMarker = Marker(
    markerId: MarkerId('bernardin'),
    position: LatLng(40.761421, -73.981667),
    infoWindow: InfoWindow(title: 'Le Bernardin'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueViolet,
    ),
  );
  Marker blueMarker = Marker(
    markerId: MarkerId('bluehill'),
    position: LatLng(40.732128, -73.999619),
    infoWindow: InfoWindow(title: 'Blue Hill'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueViolet,
    ),
  );

//New York Marker


  Marker newyork2Marker = Marker(
    markerId: MarkerId('newyork2'),
    position: LatLng(40.729640, -73.983510),
    infoWindow: InfoWindow(title: 'Tree Bistro'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueViolet,
    ),
  );
  Marker newyork3Marker = Marker(
    markerId: MarkerId('newyork3'),
    position: LatLng(40.719109, -74.000183),
    infoWindow: InfoWindow(title: 'Le Coucou'),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueViolet,
    ),
  );
}