GoogleMap API also offers restrictions on the map bounds it should be supported

[majorimi]

Regarding this, the API also offers restrictions on the map bounds, so you can limit the map to a certain country for example. This is documented here.

I think this is might be quite easy to implement as it only requires changes in the window.initGoogleMaps function, specifically the map initializer.

It would be nice if the InnerElementReference would actually contain the map object so we can work with it....

Originally posted by @Grizzlly in https://github.com/majorimi/blazor-components/issues/105#issuecomment-991905598

[majorimi]

Hi @Grizzlly, I have migrated this to a new issues since it is a different request for Google maps.

• Restrictions: yes it was easy to implement and works. But when I try to zoom out from the given Bounds the component goes into a loop... So need more work on this.
• Map element reference: not sure what is your use case but it might be you need?
  • Existing solution: _googleMap.MapId is available and you can use this ide in JS document.getElementById(elementId) this is the DIV which used for GoogleMap to render
  • Found some get methods in Google docs getDiv should return what you need? You can use this var div = await _googleMap.GoogleMapService.GetDivAsync();

Let me know if this is what you want to do with the Reference? Meanwhile try to fix the Zoom level issue with restriction.

[Grizzlly]

I was thinking that if the ElementReference would reference the actual map object we could use interop calls to set or get properties, such as the restriction, for example.

[majorimi]

Ok get your point now. However it won't work and in general would be a very bad idea.

Reasons:

• By default Blazor and Wasm is not Js based. But for compatibility and missing features, etc. reasons it's able to do JsInterop calls. It is definitely not the best thing because of 2 different "stack" of code is communicating. If you think like humans in this cases translation is needed which is never perfect. JsInterop is similar, slow it parses everything to JSON, etc. And parsing very complex object can be problematic because they have circular references. This object must be passed, parsed (serialized and deralized) on every operation, plus tracked and disposed in Blazor
• Besides performance penalty and possible serialization errors even if we skip these problems biggest issue is Blazor parameter handling and change detection. So imagine Map object reference is existing in C# plus an IJsObjectReferece available to send it to JS code. In c# Zoom is set to 5 but in JS code you set it to 10. In this case C# parameter variables must be updated or in the first change detection Blazor sets the parameter values which will call the Map. So your UI would be jumping and doing crazy things. And this is true for every property or maps operation: Center, Tilt, MapType and the restrictions also since it's ZoomLevel and Center resetting. Now that is my issue with restriction implementation since Blazor sets a value but Maps won't allow it so Blazor just keeps setting it in a loop.... Working on a fix hope something will work...

[majorimi]

Hi @Grizzlly, Merged this into the next release candidate branch release/v1.6.0 you can pull it down and try it out. New demo page supports area restrictions but must be done in Init so you have to change the bool value. Also added XML comments to code which explains that now Zoom level must be used with two-way binging!

Let me know if this works for you and will add this update to the next release. Thanks.

[Grizzlly]

This sounds great! Will try asap.

[Grizzlly]

It seems to be working ok for me.