Added comments for maps restrictions.

Author: majorimi

.github/docs/Maps.md

@@ -34,6 +34,7 @@ Maps using `IGeolocationService` (see "Dependences") to center current position.
 It can be omitted and injected separately to your components as well to get or track device location. 
 To see how it works please check **Geo JS** [documentation](https://github.com/majorimi/blazor-components/blob/master/.github/docs/JsInterop.md#geolocation-js-see-demo-app) and [demo](https://blazorextensions.z6.web.core.windows.net/jsinterop#geo-js).
 
+
 ## `GoogleStaticMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-static-maps))
 
 :warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**
@@ -98,7 +99,6 @@ Once operation has finished successfully `OnLocationDetected` event will be fire
 - **`DisposeAsync()`: `Task DisposeAsync()`** <br />
 Component implements `IAsyncDisposable` interface Blazor framework will call it when parent removed from render tree.
 
-
 ## `GoogleMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-js-maps))
 
 :warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor

@@ -137,7 +137,7 @@
 				},
 				mapZoomChangedCallback: async (zoom) =>
 				{
-					WriteDiag($"Map Zoom level changed to: '{zoom}'.");
+					WriteDiag($"Map Zoom level callback changed to: '{zoom}'.");
 					if (_zoomLevel == zoom)
 						return;
 
@@ -336,6 +336,8 @@
 			if (_mapInitialized && value != _zoomLevel)
 			{
 				_zoomLevel = value;
+
+				WriteDiag($"Map Zoom level property Set to: '{_zoomLevel}'.");
 				InvokeAsync(async () => await _mapService.SetZoomAsync(_zoomLevel));
 			}
 		}

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs

@@ -2,6 +2,8 @@
 {
     /// <summary>
     /// Restrictions coordinates for <see cref="GoogleMap"/>
+    /// NOTE: Google Maps restriction is basically a MAX Zoom level. So it does not allow users to zoom out (zoom level value forced). 
+    /// In order to notify Blazor about the maximum Zoom level two-way binding MUST be used: `@bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"`
     /// </summary>
     public class GoogleMapRestriction
     {

src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml

@@ -241,9 +241,12 @@
 		<div class="row pb-2">
 			<div class="col-12 col-lg-8 col-xl-6">
 				<p>
-					<strong>Maps Pre-render settings</strong>: Background color: <strong style="color: @_jsMapBackgroundColor;">@_jsMapBackgroundColor</strong>
-					Control size: <strong>@(_jsMapControlSize)px</strong> <br />
-					Restrict map to New Zealand: <input class="mr-2" type="checkbox" @bind="_jsRestrictMap" disabled="disabled" />
+					<h5>Maps Pre-render settings:</h5> 
+					<ul>
+						<li>Background color: <strong style="color: @_jsMapBackgroundColor;">@_jsMapBackgroundColor</strong></li>
+						<li>Control size: <strong>@(_jsMapControlSize)px</strong></li>
+						<li>Restrict map to New Zealand: <input class="mr-2" type="checkbox" @bind="_jsRestrictMap" disabled="disabled" /></li>
+					</ul>
 				</p>
 			</div>
 		</div>
@@ -260,7 +263,7 @@
 						   ControlSize="@_jsMapControlSize"
 						   Center="@_jsMapCenter"
 						   AnimateCenterChange="@_jsMapAnimateCenterChange"
-						   Zoom="@_jsMapZoomLevel"
+						   @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"
 						   ZoomControl="@_jsZoomControl"
 						   ZoomControlOptionsPosition="GoogleMapControlPositions.RIGHT_BOTTOM"
 						   MaxZoom="null"
@@ -298,7 +301,6 @@
 						   OnMapMouseOver="@OnMapMouseOver"
 						   OnMapMouseOut="@OnMapMouseOut"
 						   OnMapCenterChanged="@OnMapCenterChanged"
-						   OnMapZoomLevelChanged="@OnMapZoomLevelChanged"
 						   OnMapTypeChanged="@OnMapTypeChanged"
 						   OnMapHeadingChanged="@OnMapHeadingChanged"
 						   OnMapTiltChanged="@OnMapTiltChanged"
@@ -533,7 +535,7 @@
 	private bool _jsScaleControl = true;
 	private bool _jsStreetViewControl = true;
 	private bool _jsZoomControl = true;
-	private bool _jsRestrictMap = false;
+	private bool _jsRestrictMap = false; //must be set before Init...
 
 	private List<GoogleMapCustomControl> _jsCustomControls = new List<GoogleMapCustomControl>();
 	private ObservableRangeCollection<GoogleMapMarker> _jsMarkers = new ObservableRangeCollection<GoogleMapMarker>();
@@ -709,15 +711,6 @@
 		//Center point can be accessed as well with method call
 		var center = await _googleMap.GoogleMapService.GetCenterAsync();
 	}
-	private async Task OnMapZoomLevelChanged(byte zoom)
-	{
-		//Can be used with Binding and custom event: @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"
-		if (_logOtherEvents)
-		{
-			_mapsLog = await WriteLog(_mapsLog, $"Map Zoom level changed to: {zoom}");
-		}
-		_jsMapZoomLevel = zoom;  //Two-way binding with event value
-	}
 	private async Task OnMapTypeChanged(GoogleMapTypes googleMapTypes)
 	{
 		//Can be used with Binding and custom event: @bind-MapType="_jsMapType" @bind-MapType:event="OnMapTypeChanged"