google_map_windows

a plugin for google map on windows OS

Before the installing

this plugin depends on Javascript google map api and webview_windows which depends on Microsoft Edge WebView2 we recommend to read the install requirements of webview_windows

porblem you may face with webview_windows and nuget

some times the source of nuget maybe uncorret you can set it from cmd by following next command be sure you add nuget to system varibles

nuget source Update -Name nuget.org -Source https://api.nuget.org/v3/index.json

get the api key (optinal in development mode)

as we said this plugin built on google map javascript api so you can use javascript api key by follwing this guide

how to use

you can add the map to your widget tree by follwing code.

1- create map controller

    WindowsMapController mapController = WindowsMapController();
    mapController.initMap();

2- set your api key (optinal)

    mapController.apiKey = YOUR_API_KEY';

3- add to widget tree

    SizedBox(
        width: 900,
        height: 500,
        child: WindowsMap(
          controller: mapController,
          zoom: zoom,
          center:
          LatLng(lat: 33.43446356719302, lng: 36.25603641463645),

        ),
  )

4- add draw element

you can add Markes, Polylnes and Polygons by the map controller.

markers

adding a Marker

  al_QudsLocation = LatLng(lat: 31.776187750566574, lng: 35.23573728711054);
  Marker marker = Marker(position: al_QudsLocation, title: 'msjd al-aqsa almubark');
  mapController.addMarker(marker);

removing a marker

  mapController.removeMarker(marker);

polylines

adding a polyline

  Polyline polyline = Polyline(path: [al_madinaLocation, mkaaLocation]);
  mapController.addPolyline(polyline);

removing a polyline

  mapController.removePolyline(polyline);

polygons

adding a ploygon

 List<LatLng> alAqsaPP = [
    LatLng.fromMap({"lat": 31.77956412562312, "lng": 35.23701938301966}),
    LatLng.fromMap({"lat": 31.779276833355343, "lng": 35.23453029305384}),
    LatLng.fromMap({"lat": 31.77573126753284, "lng": 35.234828062147656}),
    LatLng.fromMap({"lat": 31.7762192265448, "lng": 35.23731178769545})
  ];
  Polygon polygon = Polygon(
    paths: [
      alAqsaPP,
    ],
    fillColor: Colors.blue.shade400,
    strokeColor: Colors.red.shade200,
    fillOpacity: .4,
  );
  mapController.addPolygon(polygon);

removeing a ploygon

  mapController.removePolygon(polygon);

5- events system

you can add a new event listenr with following syntex

for map

  mapController.event=function;

for draw elements

  element.event=function;

examples:

  mapController.onMapInitialed = () {};
  marker.onClick = (point) {};

for more docs, github

Libraries

google_map_windows