Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rungwiroon/BlazorGoogleMaps
Blazor interop for GoogleMap library
https://github.com/rungwiroon/BlazorGoogleMaps
blazor-interop google-maps
Last synced: 3 months ago
JSON representation
Blazor interop for GoogleMap library
- Host: GitHub
- URL: https://github.com/rungwiroon/BlazorGoogleMaps
- Owner: rungwiroon
- License: mit
- Created: 2019-01-01T17:18:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-05T04:55:05.000Z (3 months ago)
- Last Synced: 2024-04-05T14:45:24.675Z (3 months ago)
- Topics: blazor-interop, google-maps
- Language: C#
- Homepage:
- Size: 9.51 MB
- Stars: 282
- Watchers: 19
- Forks: 96
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- AdrienTorris_awesome-blazor - BlazorGoogleMaps - ![stars](https://img.shields.io/github/stars/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=604800) ![last commit](https://img.shields.io/github/last-commit/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=86400) Blazor interop for GoogleMap library. (Libraries & Extensions / Tools & Utilities)
- awesome-blazor - BlazorGoogleMaps - ![stars](https://img.shields.io/github/stars/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=604800) ![last commit](https://img.shields.io/github/last-commit/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=86400) Blazor interop for GoogleMap library. (Libraries & Extensions / Tools & Utilities)
- blazor-awesome - BlazorGoogleMaps - ![stars](https://img.shields.io/github/stars/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=604800) ![last commit](https://img.shields.io/github/last-commit/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=86400) Blazor interop for GoogleMap library. (Libraries & Extensions / Tools & Utilities)
- awesome-blazor - BlazorGoogleMaps - ![stars](https://img.shields.io/github/stars/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=604800) ![last commit](https://img.shields.io/github/last-commit/rungwiroon/BlazorGoogleMaps?style=flat-square&cacheSeconds=86400) Blazor interop for GoogleMap library. (Libraries & Extensions / Tools & Utilities)
README
# BlazorGoogleMaps
Blazor interop for GoogleMap library**Breaking change from 2.0.0**
LatLngLiteral constructor's parameters order changed #173**Breaking change from 3.0.0**
Migrate from Newtonsoft.Json to System.Text.Json.**Breaking change from 4.0.0**
Migrate to .net 8 #286.[![NuGet version (BlazorGoogleMaps)](https://img.shields.io/nuget/v/BlazorGoogleMaps)](https://www.nuget.org/packages/BlazorGoogleMaps/)
## Usage
1. Add google map script HEAD tag to wwwroot/index.html in Client side or _Host.cshtml in Server Side.
How to get key follow https://developers.google.com/maps/documentation/javascript/get-api-keyDo not forgot addition libraries if required *&libraries=places,visualization,drawing*
If you got 'Loading the Google Maps JavaScript API without a callback is not supported' then add *&callback=Function.prototype*
``````
Add path to project javascript functions file in wwwroot/index.html in Client side or _Host.cshtml in Server Side.
``````
If you want to use marker clustering in a Server Side project then add the following script to _Host.cshtml.
``````
If you want to use marker clustering in a Client Side project then add the following script to wwwroot/index.html.
``````
2. Use component in client and server side same
```
@page "/map"
@using GoogleMapsComponents
@using GoogleMapsComponents.MapsGoogle Map
@functions {
private GoogleMap map1;
private MapOptions mapOptions;protected override void OnInitialized()
{
mapOptions = new MapOptions()
{
Zoom = 13,
Center = new LatLngLiteral()
{
Lat = 13.505892,
Lng = 100.8162
},
MapTypeId = MapTypeId.Roadmap
};
}
}
```## Known Issues
Adding map in razor page without _Host.cshtml use RenderComponentAsync to render component or/and try changing the Rendermode to Server in the host fileServer Side issue with Route DirectionsResult when using DirectionsRequestOptions all paths are included (all set to false). MaximumReceiveMessageSize reaches limit of 32kb. Then limit should be increased or set to null (unlimited)
```
In Startup.ConfigureServices
services.AddServerSideBlazor().AddHubOptions(config => config.MaximumReceiveMessageSize = 1048576);
```## Samples
Please check server side samples https://github.com/rungwiroon/BlazorGoogleMaps/tree/master/ServerSideDemo which are most to date
ClientSide demos. Just a few and missing code, but will be updated little by little
https://rungwiroon.github.io/BlazorGoogleMaps/mapEvents