rungwiroon / blazorgooglemaps Goto Github PK

View Code? Open in Web Editor NEW

302.0 19.0 99.0 9.32 MB

Blazor interop for GoogleMap library

License: MIT License

HTML 19.20% C# 72.68% CSS 0.75% JavaScript 7.37%

blazor-interop google-maps

blazorgooglemaps's People

Contributors

Stargazers

Watchers

Forkers

vladhorby cojegede cyberyaga pitasoft willapp muhammad-asghar-workmatec cl-tzuhan arazdk ahm322 alexbits nevinson rezasfl opscentre chandusekhar kkacer kiwi179 cartastraccia robertomilani jacko1394 micahosborne vrvlive yurickas christo-steyn tagwerk-berlin turner11 invectys sepppenner humbertocabezas samvanhoutte epictek weedkiller msih-tools andyrow123 flunx pgmstan mlinnen ckrath cptcrunchy xamahien enritski ozanyasindogan srf-consulting-group-inc theatomicoption sykesjohn adxprime djmjp cephdon alex-torres neoayi dan5602 devbox10 thevilshadoww prakelisjulius poppywood fzetterlund oldbird9527 benevides kevinarthurackerman franz1960 dbaru rafsanulhasan tnt0305 taaaioo peter-schneider nickztar markschroeder77 jtfk ackomas lenhannam bryanrcarlson studywithjeffrey curlack nnikos123 traviskool vishaljani23 psunconquered ulbf mikewcameron ghhv coeur85 fredatgithub bruderjohn ashedge webmat1 iworktech deep145757 peterm stockdrops cruiserkernan kubano vinco83 andreytretyak tomleelive erivera80 hanxiao123 ham187 franks1 vamsitp stickiebe

blazorgooglemaps's Issues

Show marker

Hi,
I want to know how can I show the red marker?

google map init

I think that googleapis script needs to be in <head>, otherwise google maps may not be ready yet. It fails to load the maps when I try /maps directly in incognito window.

Ideally, we would need something like this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Calling async JS methods

Hi @rungwiroon and @valentasm1

This is great work, thanks.

I love the clean JS interop.

I'm wanting to implement the DirectionsService.route command.

Can you recommend a way to pass in the callback function and get notified when it completes?

I was hoping to do it in a generic way, so that when implementing other async calls to GMaps we can use the same JS proxy func.

Any advice would be greatly appreciated.

Mark

WASM: Microsoft.JSInterop.JSException: Could not find 'googleMapsObjectManager' in 'window'

I'm using client side blazor and implemented accoring to the examples in this project. I get the following error when it tries to laod the map: blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Could not find 'googleMapsObjectManager' in 'window'

is this a knows issue? what is the way to work around it?

Thanks.

Open infowindow from code

Hi, I have a map with several markers, if you click the marker an infowindow opens and displays the data, is there a way to also open the infowindows from code? For example, if I have a grid with a datasource of the markers list, I would want to click on the record and then open the infowindow on the map.
Thanks in advance.

Polyline getPath doesnt work and return path

Code:

 polylineOptions = new PolylineOptions()
                        {
                            Path = myRoute.ToArray(),
                            StrokeColor = "#0000FF",
                            Geodesic = true,
                            Clickable = true,
                            StrokeOpacity = 0.5F,
                            Map = _map.InteropObject
                        };

var routeLine = await Polyline.CreateAsync(_map.JsRuntime, polylineOptions);
var path = await routeLine.GetPath();

Path is always null and a (handled) exception is thrown:

Microsoft.JSInterop.JSException
HResult=0x80131500
Message=obj[args[1]] is not a function
TypeError: obj[args[1]] is not a function
at Object.invoke (http://localhost:52781/_content/BlazorGoogleMaps/objectManager.js:176:38)
at http://localhost:52781/_framework/blazor.server.js:8:31421
at new Promise ()
at e.beginInvokeJSFromDotNet (http://localhost:52781/_framework/blazor.server.js:8:31390)
at http://localhost:52781/_framework/blazor.server.js:1:19202
at Array.forEach ()
at e.invokeClientMethod (http://localhost:52781/_framework/blazor.server.js:1:19173)
at e.processIncomingData (http://localhost:52781/_framework/blazor.server.js:1:17165)
at e.connection.onreceive (http://localhost:52781/_framework/blazor.server.js:1:10276)
at WebSocket.i.onmessage (http://localhost:52781/_framework/blazor.server.js:1:38091)
Source=System.Private.CoreLib
StackTrace:
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Threading.Tasks.ValueTask1.get_Result() at System.Runtime.CompilerServices.ValueTaskAwaiter1.GetResult()
at Microsoft.JSInterop.JSRuntime.d__161.MoveNext() at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Threading.Tasks.ValueTask1.get_Result()
at System.Runtime.CompilerServices.ValueTaskAwaiter1.GetResult() at GoogleMapsComponents.Helper.<MyInvokeAsync>d__21.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at Enera.WorkMirror.BlazorAdminTool.Pages.JourneyMap.d__20.MoveNext()

The polyline is drawn in the map as it should.
If you fix this could you please also add a MapEventListener on Polyline so it is possible to handle mouse click on the polyline.

Databinding of the Height of the map control or changing the height of the map control after OnInitialized.

My problem:
I want the height of the map to be set to the height (or percentage of) of the browsers viewport not just a fixed px-value.

What I have tried:
<GoogleMap @ref="@_mapControl" Id="myMap" Options="@_mapControlOptions" Height="@_height"></GoogleMap>

The @_height is the height of the viewport. Before the render of the page this value will be 0.

The OnInitialized() method where the map option is set up will run before the value of _height is set.

As soon as the height of the viewport is received from the brower the @_height will be set and if i check _mapControl.Height the value has change and it is the new value.
But the height of the control on the page is always the default 500px.

Calling StateHasChanged() doesn't trigger any redraw of the control, atleast not with the new value of height.

Have I missed something or is there a better way to change the height of the control in runtime?

InvalidValueError when calling SetClickable or SetVisible method of a Marker Instance.

When I try to call the SetClickable or SetVisible methods of an instance of a Marker that I have added to a map, I get an exception that states that I passed an invalid value and that it was not a boolean even though I use the boolean literal true or false.

I create a Marker:
//Origin Marker this._OriginLocationMarker = await Marker.CreateAsync(this._TrackingMap.JsRuntime, new MarkerOptions() { Position = new LatLngLiteral(), Visible = false, Map = this._TrackingMap.InteropObject, Title = "Origin", Label = "Origin" });

Then I try to make it Visible:
await this._OriginLocationMarker.SetVisible(true);

Error:
InvalidValueError: setClickable: not a boolean

Delete package

Please delete package. I accidently posted my personal when mixed repository url
@rungwiroon
https://github.com/rungwiroon/BlazorGoogleMaps/packages/471229?version=1.0.0-beta-1

Route creation

Hi Team,

Is it possible to create Route with blazer google maps? my requirement is to create a route between two locations in blazor app. am using your package since 3 months onwards for my project for all maps services. let me know when this feature will be available if it is not available now?

Remove markers and polylines from map

Hi, Ive been trying different ways of removing a list of markers and a list of polylines but if I clear the List objects the maps retains all the info, whats the right way? Using blazor server side.
Thanks.

Getting reference to marker that dragend occurred in

When adding a "dragend" listener to a marker like this:

await marker.AddListener("dragend", async (e) => await OnMarkerDragged(e));

In my OnMarkerDragged(MouseEvent e) method, how do I get a reference to the marker that was dragged? I'm assuming I'm not adding the listener correctly.

Unable to get demo to show map

I cloned the repo, opened in VS2019 Preview 3, ran and on the map page I see the buttons, but the map never appears. ideas? Anything else I need to do from a clean pull on a new install to get this going?

Markers Hide and show

Hi Team,

do we have the functionality to hide the marker and show back based on map pin click/dblcick events?

HeatmapLayer.SetData throws error : b.lat is not a function

Programmatically Closing Info Window throws error

Hi Team,

I have created info window on top of the marker and i was able to close the window using close icon which top right of the info window. but when am trying to close info window explicitly like infowind.close() not working. it was throwing null value not convert to system.boolean.

Adding Range of Circles

Hi,
This is somewhat related to #58 , which is not marked as closed, but I can see that is available in the latest nugget package.

Is there any chance on adding same functionality of MarkerList.CreateAsync to Circles?
I guess I'm asking for a CircleList.CreateAsync functionality + the niceties of managing the list.

The use case is similar to the one mentioned in #58. I have a large list of coordinates which Ioop and adding them one by one to the map, which results:

Seeing each marker added one by one (it also takes a long time to complete due to the large size of list).
No good way to "clear" the map.

Plotting Multiple Marker Takes long Time while deployed in server

Hi ,
When marking multiple markers takes long time while it is deployed on server. It works fine while debugging . Any help would be appreciated.

possible memory leak? GC_MINOR: (Nursery full)

I'm getting GC_MINOR: (Nursery full) time 4.50ms, stw 4.51ms promoted 1147K major size: 9552K in use: 8741K los size: 1024K in use: 983K on my app. It works in debug, but not production...

Maybe my implementation is goofy?
https://github.com/OpenEugene/little-help-book-web/blob/develop/LittleHelpBook/Client/Pages/Map.razor

Add a marker on OnInitializedAsync or OnAfterRenderAsync

I'm trying to add a marker to the map without the need of a button to click. So when someone loads the page the map already has a marker. Is this possible? I couldn't find anything relevant to my issue in the documentation

Using maps with blazor preview4 error

Is it possible to update google maps to work with 3.0.0-preview4 version?
I got errors like this and it looks just as beginning.
The type 'IWebAssemblyHostBuilder' exists in both 'Microsoft.AspNetCore.Blazor.Browser, Version=0.7.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60' and 'Microsoft.AspNetCore.Blazor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'

Add possibility to create a Marker Clustering

Hi,
I could create markers (and they work great). I wonder if it's possible to group the markers into clusters as shown here

https://developers.google.com/maps/documentation/javascript/marker-clustering

Thanks in advance

[Disscussion] Why not to use BrowserInterop JsObjectRef ?

Hi,

I have found your library and it is very exciting !!
But one thing I noticed among all other Blazor wrappers that each wrapper creates its own JsObjectRef and Reviver ...

Why not to use https://github.com/RemiBou/BrowserInterop reviver ? One advantage of using only one reviver and JsObjectRef is high interoperability between different libraries

Unfortunately Microsoft does not provide standard way of working with JsObjectRef, but we as community can choose on JsObjectRef implementation and stick to it

I have already using this approach in https://github.com/redradist/BlazorGooglePay ;)

Anyway it is discussion ;)

Adding listeners for infowindows

Hello, I´m looking for a way for styling my infowindows and need some help. My first thought was to create listeners for my infowindows and then later style it on the "domready" event. Like in this example: http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html. I tried to figure out if it´s possible here with this packages but didn´t find the solution.

Is it possible to create listeners for my infowindows? If not, maybe you know a better way for styling the "complete infowindow" like in the example i linked above.

Thanks for your time in advance.

google map marker icon click Ievent

Geocode. Get GPS coordinates from address

I want to ask why I cannot visualize a place and how to use MapAutocomplete component?

Orphaned DOM Nodes

Appears that the Dispose method is not releasing all the objects from a javascript array. This is causing the DOM Node Count to increase indefinitely. If the user visits a page that makes use of a map with markers/circles/polygons etc all those objects are never cleared from array when navigating away or calling Dispose(). Each time a user visits the page the DOM Node count increases.

I made a quick hack which clears the array on dispose and solves the problem, but my js skills are not good. probably best if you can solve this one properly.

objectManager.js ->

dispose: function () {
    delete window._blazorGoogleMapsObjects;
},

call this when user navigates away from the page and/or no longer needs any of the objects.

Issues

Hi,

In the class JsObjectRef.cs I noticed:

1 - There is a lot of "async" call, but the methods are not async and there are a lot of missing "await" everywhere. Is it normal ?

2 - In the method DisposeAsync(), you call "googleMapsObjectManager.dispose", but it does not exists in the javascript code !

Thanks

Is it possible to switch to terrain layer view?

Error when clicking on search button in MapAutocomplete.razor component

getting this JS console error (VS Community 2019 16.7.5 Core 3.1)

blazor.server.js:19

[2020-10-02T14:38:30.465Z] Error: Microsoft.JSInterop.JSException: Cannot read property 'Autocomplete' of undefined
TypeError: Cannot read property 'Autocomplete' of undefined
at stringToFunction (https://localhost:44378/_content/BlazorGoogleMaps/objectManager.js:6:16)
at Object.createObject (https://localhost:44378/_content/BlazorGoogleMaps/objectManager.js:171:27)
at https://localhost:44378/_framework/blazor.server.js:8:31619
at new Promise ()
at e.beginInvokeJSFromDotNet (https://localhost:44378/_framework/blazor.server.js:8:31587)
at https://localhost:44378/_framework/blazor.server.js:1:20052
at Array.forEach ()
at e.invokeClientMethod (https://localhost:44378/_framework/blazor.server.js:1:20022)
at e.processIncomingData (https://localhost:44378/_framework/blazor.server.js:1:18006)
at e.connection.onreceive (https://localhost:44378/_framework/blazor.server.js:1:11091)
at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
at GoogleMapsComponents.Helper.MyInvokeAsync[TRes](IJSRuntime jsRuntime, String identifier, Object[] args) in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\GoogleMapsComponents\Helper.cs:line 144
at GoogleMapsComponents.JsObjectRef.CreateAsync(IJSRuntime jsRuntime, Guid guid, String functionName, Object[] args) in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\GoogleMapsComponents\JsObjectRef.cs:line 124
at GoogleMapsComponents.Maps.Places.Autocomplete.CreateAsync(IJSRuntime jsRuntime, ElementReference inputField, AutocompleteOptions opts) in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\GoogleMapsComponents\Maps\Places\Autocomplete.cs:line 15
at ServerSideDemo.Pages.MapAutocomplete.OnAfterMapInit() in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\ServerSideDemo\Pages\MapAutocomplete.razor:line 54
at ServerSideDemo.Pages.MapAutocomplete.b__0_1() in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\ServerSideDemo\Pages\MapAutocomplete.razor:line 25
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at GoogleMapsComponents.GoogleMap.OnAfterRenderAsync(Boolean firstRender) in C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\GoogleMapsComponents\GoogleMap.razor:line 52
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Building errors in MapLegendPage.razor component

getting two build errors: ( I downloaded the Zip file of all 3 projects in one solution)
ServerSide
VS Commuity 2019 Version 16.7.5

MapLegendPage.razor

Line 1
Cannot implicitly convert type 'Microsoft.AspNetCore.Components.ElementReference' to 'GoogleMapsComponents.GoogleMap' ServerSideDemo \BlazorGoogleMaps-master\ServerSideDemo\Pages\MapLegendPage.razor

Line 5
Cannot convert method group 'AfterMapInit' to non-delegate type 'object'. Did you intend to invoke the method? ServerSideDemo C:\Users\joshm\Downloads\BlazorGoogleMaps-master\BlazorGoogleMaps-master\ServerSideDemo\Pages\MapLegendPage.razor

I probably haven't provided enough info, sorry for that.

Add services extension

Hi,

In your current version, we have to insert code by hand into the _Host.cshtml (the one with Google Map Key by example) , but in .NET core it is convenient to use this kind of code:

services.AddGoogleMaps(options =>
{
options.ApiKey = "Your Google Maps Api Key";
});

It will be fine to do this too here ;-)

Here is another lib that do exactly this for google map, look at the code, it 'should' be easy:

https://github.com/Mewriick/Blazor.GoogleMap/blob/master/src/Blazor.GoogleMap/Components/GoogleMap.cs

https://github.com/Mewriick/Blazor.GoogleMap/blob/master/src/Blazor.GoogleMap/ServiceCollectionExtensions.cs

Thanks

spiderfier effect to our map

I want spiderfier effect to our blazor google maps. is there any solution to achieve this.
https://github.com/jawj/OverlappingMarkerSpiderfier

Button Click Event on InfoWindow

I added a button on an infowindow with a click event. Is there a way to register for that event and respond to it in C#?

Couldn't access map object via same inherit class

Hey, got some issues with accessing the map object i think. Maybe it´s just me who does this wrong, I´m pretty new with Blazor aswell. I´ll try to explain my problem.

I got a client-side Blazor project where i split up my c# and razor. My baseclass looks like this:

    public class MapBase : ComponentBase
    {
        [Inject]
        protected HttpClient Http { get; set; }
        [Inject]
        public IJSRuntime JSRuntime { get; set; }
        public GoogleMap map;
        public Location activeLocation = new Location();
        public MapOptions mapOptions;
        public List<Location> locations = new List<Location>();
        private Stack<Marker> markers = new Stack<Marker>();
        private InfoWindow infoWindow = null;

        protected override async Task OnInitializedAsync()
        {
            mapOptions = new MapOptions()
            {
                Zoom = 12,
                Center = new LatLngLiteral()
                {
                    Lat = 58.346644,
                    Lng = 12.455974
                },
                MapTypeId = MapTypeId.Sattellite
            };

           // Here im also populating my list "locations" from a async httpcall.
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (!firstRender)
            {
                if (map == null) return;

                foreach (var location in locations)
                {
                    var marker = await Marker.CreateAsync(map.JsRuntime, new MarkerOptions()
                    {
                        Position = new LatLngLiteral { Lat = klev.Latitude, Lng = klev.Longitude },
                        Map = map.InteropObject,
                        Icon = "/images/Scout.png"
                    });

                    markers.Push(marker);

                    // Creating my infoWindow here
                    
                    await marker.AddListener("click", async () =>
                    {
                        if (infoWindow != null)
                        {
                            await infoWindow.Close();
                        }

                        infoWindow = await InfoWindow.CreateAsync(map.JsRuntime);
                        setActiveLocation(location);

                        await infoWindow.SetContent(infoWindowContent);
                        await infoWindow.SetPosition(await marker.GetPosition());
                        await infoWindow.Open(map.InteropObject);
                    });
                }

                await map.InteropObject.AddListener("click", async () =>
                {
                    if (infoWindow != null)
                    {
                        await infoWindow.Close();
                    }
                });
            }
        }

        public void onSelectFilter()
        {
            Console.WriteLine(markers.Count());
        }

        public void setActiveLocation(Location location)
        {
            activeLocation = location;
            StateHasChanged();
        }
    }

My MapComponent who inherrit the MapBase class looks like this:

@page "/map"

@using GoogleMapsComponents

@inherits MapBase

<SearchComponent/>
<GoogleMap @ref="@map" Id="map" Options="@mapOptions"></GoogleMap>

Everything works perfectly. I have my map with markers, working click functions who opens and closes infowindows. Now to my problem. I have a third component who also inherrit the MapBase Component that is kinda simple and looks like this:

@inherits MapBase

    <div id="searchComponent">
        <select id="mySelect" @onchange="onSelectFilter" class="form-control">
            <option />
            @foreach (var location in locations)
            {
                <option value="@location.Name">@location.Name</option>
            }
        </select>
    </div>

This third component calls the function onSelectFilter who is in my baseclass. It simply writes down the marker count. I get the marker count to be 0. I also tried to do other thinks with my map and markers but i can´t access them. Where am i doing wrong?

Is it possible to set an custom marker image?

Hello,

I try to change the beachflag marker with a custom image marker, but it doesn't work.
Google Maps open and works normally but you can't see the custom marker.

Is there a way to change it or can’t it get changed?

    await Marker.CreateAsync(map1.JsRuntime, new MarkerOptions
    {
        Position = new LatLngLiteral
        {
            Lat = (double)lastlatitude,
            Lng = (double)lastlongitude
        },
        Icon = new Icon
        {
            Url = "https://localhost:44329/img/icons/greenMarker.png"
        }
    });

Route estimated time between two locations

Functionality to get the estimated time between two locations like google.maps.DistanceMatrixService()

Map not rendered

Hi,

I have a special case... sorry ;-)

I show a bootstrap modal, this one contains the Google map component.
Just after the modal is shown, I have 2 possibles actions:

I center the map to my current lon/lat

  await _modal.Show();
  await _modal.Map.Center();

I try to render a direction

  await _modal.Show();
  await _modal.Map.DrawDirections();

Case (1), everything goes fine.

Case (2), the map is not always rendered, sometimes 50% of the map is visible only!
Also, it does not zoom around the direction path.

But, noticed that if I force a redraw of the directions (see on the picture, I have a button), it works perfectly then :-P

Do you have any idea of the issue? ( I don't ) :-P

Thx

Add markers range

Is it possible to add a whole list of coordinates at once?
Right now I have a loop that goes through each element of a collection with coordinates and adding them to the markers list, which results in seeing each marker added one by one on the map, this also happens when I remove the markers from the map, is it possible to add them all at once?

Title misspelled

Marker.cs - row 207 (SetTilte)

Getting an exception (await marker.SetTiltle("some text")):
Microsoft.JSInterop.JSException
HResult=0x80131500
Message=obj[args[1]] is not a function
TypeError: obj[args[1]] is not a function
at Object.invoke (http://localhost:52781/_content/BlazorGoogleMaps/objectManager.js:176:38)
at http://localhost:52781/_framework/blazor.server.js:8:31421
at new Promise ()
at e.beginInvokeJSFromDotNet (http://localhost:52781/_framework/blazor.server.js:8:31390)
at http://localhost:52781/_framework/blazor.server.js:1:19202
at Array.forEach ()
at e.invokeClientMethod (http://localhost:52781/_framework/blazor.server.js:1:19173)
at e.processIncomingData (http://localhost:52781/_framework/blazor.server.js:1:17165)
at e.connection.onreceive (http://localhost:52781/_framework/blazor.server.js:1:10276)
at WebSocket.i.onmessage (http://localhost:52781/_framework/blazor.server.js:1:38091)
Source=System.Private.CoreLib
StackTrace:
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Threading.Tasks.ValueTask1.get_Result() at System.Runtime.CompilerServices.ValueTaskAwaiter1.GetResult()
at Microsoft.JSInterop.JSRuntime.d__161.MoveNext() at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Threading.Tasks.ValueTask1.get_Result()
at System.Runtime.CompilerServices.ValueTaskAwaiter1.GetResult() at GoogleMapsComponents.Helper.<MyInvokeAsync>d__21.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()

Should probably be something like:

    public Task SetTitle(string title)
    {
        return _jsObjectRef.InvokeAsync(
            "setTitle",
            title);
    }

Impossible to add Custom Legends. Controls always null

I am trying to add a custom legend to my map, as per the tutorial here : https://developers.google.com/maps/documentation/javascript/adding-a-legend.

I see, though, that the InteropObject.Controls dictionary is always null so I can't do something like
_map1.InteropObject.Controls.Add(ControlPosition.BottomRight, new List<ElementReference> {_legend});
Am I going about this the wrong way, or is the Controls dictionary not implemented yet?

DirectionsRoute Documentation

Hi!

Do you have any other documentation than the wiki page on how to use your api?
I have geolocations (lat, long) and I want to draw directions with them instead of
the location name indicated in your sample. I noticed DirectionsGeocodedWaypoint
class but it doesn't have a place to put lat, long data which are probably converted
to PlaceID somehow. I wanted to check if you have any doc explaining how it's done
before diving deep into your code.

Thanks,

Ozan.

Geocoding. Get GPS coordinates from address

Is it possible to add geocoding? Passing an address and return Latlng obj

Map style support

Hi,

I have try setup a custom map style, but it does not work.

Does this feature is really supported ? Or is there an issue in my code ?

I checked the doc here: https://developers.google.com/maps/documentation/javascript/examples/style-array?hl=fr

Here it is:

protected override Task OnInitializedAsync()
    {
        // https://console.developers.google.com/
        _mapOptions = new MapOptions()
        {
            Zoom = 15,
            Center = new LatLngLiteral()
            {
                Lat = 0,
                Lng = 0
            },
            MapTypeId = MapTypeId.Roadmap,
            DisableDefaultUI = true,
            Styles = MapStyle()
        };

        return base.OnInitializedAsync();
    }

    public MapTypeStyle[] MapStyle()
    {
        List<MapTypeStyle> styles = new List<MapTypeStyle>();

        NewStyle(styles, "geometry", "", new List<string>{ "color", "#1d2c4d" });
        NewStyle(styles, "labels.text.fill", "", new List<string> { "color", "#8ec3b9" });
        NewStyle(styles, "labels.text.stroke", "", new List<string> { "color", "#1a3646" });
        NewStyle(styles, "", "administrative", new List<string> { "visibility", "off" });
        NewStyle(styles, "geometry.stroke", "administrative.country", new List<string> { "color", "#4b6878" });
        NewStyle(styles, "geometry.stroke", "administrative.land_parcel", new List<string> { "color", "#64779e" });
        NewStyle(styles, "geometry.stroke", "administrative.province", new List<string> { "color", "#4b6878" });
        NewStyle(styles, "geometry.stroke", "landscape.man_made", new List<string> { "color", "#334e87" });
        NewStyle(styles, "geometry", "landscape.natural", new List<string> { "color", "#023e58" });
        NewStyle(styles, "geometry", "poi", new List<string> { "color", "#283d6a" });
        NewStyle(styles, "labels.text.fill", "poi", new List<string> { "color", "#6f9ba5" });
        NewStyle(styles, "labels.text.stroke", "poi", new List<string> { "color", "#1d2c4d" });
        NewStyle(styles, "geometry.fill", "poi.park", new List<string> { "color", "#1d2c4d" });

        NewStyle(styles, "geometry", "road", new List<string> { "color", "#304a7d" });
        NewStyle(styles, "labels.text.fill", "road", new List<string> { "color", "#98a5be" });
        NewStyle(styles, "labels.text.stroke", "road", new List<string> { "color", "#1d2c4d" });

        NewStyle(styles, "geometry", "road.highway", new List<string> { "color", "#2c6675" });
        NewStyle(styles, "geometry.stroke", "road.highway", new List<string> { "color", "#255763" });
        NewStyle(styles, "labels.text.fill", "road.highway", new List<string> { "color", "#b0d5ce" });
        NewStyle(styles, "labels.text.stroke", "road.highway", new List<string> { "color", "#023e58" });

        return styles.ToArray();
    }
    private void NewStyle(List<MapTypeStyle> styles, string elementType, string featureType, List<string> stylers)
    {
        MapTypeStyle s = new MapTypeStyle();
        s.elementType = elementType;
        s.featureType = featureType;
        s.stylers = new List<object> { Tuple.Create(stylers[0], stylers[1]) }.ToArray();
        styles.Add(s);
    }

Server-side Issue

Hello - Does this library work with server-side Blazor? I've been trying to get everything setup but the maps don't render.

Thanks!

Marker Color

Is it possible to set the default marker color?

Not properly issues, only few suggestions

First of all, great works!

First suggestion:

Add GUID available to Marker object:
I simply modified in my local GIT Marker class, introducing:

public class Marker : IDisposable, IJsObjectRef
    {
        private readonly JsObjectRef _jsObjectRef;

        public Guid Guid => _jsObjectRef.Guid;

That allows in Blazor things as:

await marker.AddListener("click", async () =>
        {
            CityName = null;
            StopId = null;
            StateHasChanged();

            await JSRuntime.InvokeVoidAsync("openModal", new
            {
                Map = gtfsMap.InteropObject.Guid,
                Marker = marker.Guid
            });

            CityName = Id;
            StopId = Stop.Id;
            StateHasChanged();
        });

And JS side things as:

function openModal(params) {
    var map = window._blazorGoogleMapsObjects[params.map];
    var marker = window._blazorGoogleMapsObjects[params.marker];

    if (map.getCenter() != marker.getPosition()) {
        map.setCenter(marker.getPosition());
        new google.maps.event.trigger(map, 'dragend');
    }

    $('#markerModal').modal({
        backdrop: 'static',
        keyboard: false
    })

    $('#markerModal').modal('show');
}

...and yes... I've implemented a "open a Boostrap Modal Popup instead a InfoWindow object on OnClick event for a marker".
(just below I'll explain why...)

Second suggestion:

Before using a Bootstrap Modal Popup I've encountered some issue about set content of a InfoWindow: if it set from Javascript side (exposing InfoWindow GUID too as done for Marker), all was fine, but when set by Blazor code I discovered some:

return item.replace(/['"]+/g, '');

That cause things like:

<div class="class1 class2">...</div>

were assigned runtime to InfoWindow content as:

<div class=class1 class2></div>

and interpreted by browser as:

<div class="class1" class2=""></div>

with consequently undesiderable appearance effects.

Third suggestion:

Globally, library seems to be strong coded, but I feel the shortage of some things, as possibility to create an array of Marker passing an array of MarkerOptions that allows a significant speed up when managing some thousands of markers inside a map (my test case GTFS info for city of Rome, Italy), although I take care to show only markers inside bounds and hide just markers just gone outside bounds and limiting zoom level from 15 to more to show markers.
Pre-creating markers at first page load will allow no needs to marker creations when user moves inside map (dragging, zooming) -> at the moment it takes about 12 seconds but with multiple markers creation (single JSinterobject call) I believe it can be significant faster.
So, it will be very great can apply to the "behind the scenes" object that contains markers somethings as "SetVisibleMultiple" passing it an array of Marker GUID and a boolean variable regarding visibility to be set instead of doing that inside a loop iterating on markers to be shown or hide involving for for each iteration a JSInterop call.

That's my ideas :)

I'm back! (What I learned in the meantime) - NOT A ISSUE, just a greeting and a welcome back to you all :)

Sorry for the long absence: some summer vacation and some SW releases at work.
In my spare time, I devoted myself to studying Blazor Web Assembly, which until today I had "snubbed".

Well, let me tell you what a great platform it is!
Obviously I'm still learning, but the mere fact of having a cross-platform client, focused on presentation, which communicates with REST API on the server which in turn can call a Service class, allows you to have your own imagination as the only limit to what you can implement!

For heaven's sake, Blazor server applications are not bad, but especially from a mobile point of view, they suffer heavily from any connection losses.

Moreover, in my case, having them hosted on Raspebrry Pi and behind a NGINX proxy it happens that for no apparent reason, from time to time the WebSocket stops, leaving the application in freeze for a few seconds.

It seems that this is due to the sum of the following conditions:
a) Hosting on Raspberry pi
b) NGINX Proxy
c) Use of HTTPS
Needless to say, I also tested on a notebook with Windows 10 and with IIS Server and the problem nevertheless occurred. The only factor in common, the HTTPS which I certainly do not want to give up.

So I decided to switch padadigma and switch to Blazor WebAssembly!

And from what I have been able to read around, my hopes seem well pinned!

And now to us ...
What good is all this introduction in our context?

Well, all this just for one survey:
how many of you have already used the library in WebAssembly projects and how many in Blazor Server projects?

At the moment I'm trying (it's a huge job) to create a Spotify client in Blazor WebAssebly.
If I'm lucky and good and a good project comes out, who knows I'll put it on GitHub as well :D

In the meantime "happy coding" to all of you and good use of BlazorGoogleMaps !!! :)

DirectionsRenderer.GetDirections doesnt return OverviewPath from a rute

Hi, I am having some difficulties getting an overview_path.

On my site I have a GoogleMap and DirectionRenderer which plots a route, just like in your example.

Then I try to get the route points from a route, which can be manually changed (route drag is enabled).
I am calling DirectionsRenderer.GetDirections() to get latest DirectionsResult from a path on a map.
Then I try to iterate Route.OverviewPath, to get the LatLngLiterals, but the collection is always empty.

Is there any other way to get the route points?
I am using Blazor Client and BlazorGoogleMaps 0.9.0

Thanks for help.

How to remove route created on the map

Hi Team,
could you please help me how to remove map route.
I have used below code to create route:

dirRend = await DirectionsRenderer.CreateAsync(map1.JsRuntime, new DirectionsRendererOptions()
{
Map = map1.InteropObject
});
//Direction Request
DirectionsRequest dr = new DirectionsRequest();
dr.Origin = "Allentown, PA";
dr.Destination = "Bronx, NY";
dr.Waypoints = waypoints;
dr.TravelMode = TravelMode.Driving;

	//Calculate Route
	var directionsResult = await dirRend.Route(dr);

// to remove route, tried with below code but no luck. could you please help on this.
await dirRend.SetDirections(null);
await dirRend.SetMap(null);

rungwiroon / blazorgooglemaps Goto Github PK

blazorgooglemaps's People

Contributors

Stargazers

Watchers

Forkers

blazorgooglemaps's Issues

Recommend Projects

Recommend Topics

Recommend Org