{"id":13466377,"url":"https://github.com/rungwiroon/BlazorGoogleMaps","last_synced_at":"2025-03-25T21:32:12.973Z","repository":{"id":34075647,"uuid":"163753499","full_name":"rungwiroon/BlazorGoogleMaps","owner":"rungwiroon","description":"Blazor interop for GoogleMap library","archived":false,"fork":false,"pushed_at":"2025-02-24T06:08:36.000Z","size":10608,"stargazers_count":352,"open_issues_count":12,"forks_count":106,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-24T05:02:44.155Z","etag":null,"topics":["blazor-interop","google-maps"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rungwiroon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-01T17:18:46.000Z","updated_at":"2025-03-12T09:44:46.000Z","dependencies_parsed_at":"2023-01-15T04:27:02.705Z","dependency_job_id":"aaf49a48-1611-4713-b5d1-c64576b0f1fc","html_url":"https://github.com/rungwiroon/BlazorGoogleMaps","commit_stats":{"total_commits":353,"total_committers":36,"mean_commits":9.805555555555555,"dds":0.6968838526912181,"last_synced_commit":"c1a3c9f7ca4ac3bce48b154de848706cebe5a1a5"},"previous_names":[],"tags_count":127,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rungwiroon%2FBlazorGoogleMaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rungwiroon%2FBlazorGoogleMaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rungwiroon%2FBlazorGoogleMaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rungwiroon%2FBlazorGoogleMaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rungwiroon","download_url":"https://codeload.github.com/rungwiroon/BlazorGoogleMaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245548276,"owners_count":20633549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor-interop","google-maps"],"created_at":"2024-07-31T15:00:43.184Z","updated_at":"2025-03-25T21:32:12.960Z","avatar_url":"https://github.com/rungwiroon.png","language":"C#","readme":"# BlazorGoogleMaps\nBlazor interop for GoogleMap library\n\n[![NuGet version (BlazorGoogleMaps)](https://img.shields.io/nuget/v/BlazorGoogleMaps)](https://www.nuget.org/packages/BlazorGoogleMaps/)\n\n## Usage\n1. Provide your Google API key to BlazorGoogleMaps with one of the following methods. (You can get a key here: https://developers.google.com/maps/documentation/javascript/get-api-key)\n\nUse the bootstrap loader with a key service (recommended):\n```\nservices.AddBlazorGoogleMaps(\"YOUR_KEY_GOES_HERE\");\n```\nOR specify google api libraries and/or version:\n```\nservices.AddBlazorGoogleMaps(new GoogleMapsComponents.Maps.MapApiLoadOptions(\"YOUR_KEY_GOES_HERE\")\n    {\n        Version = \"beta\",\n        Libraries = \"places,visualization,drawing,marker\",\n    });\n```\nOR to do something more complex (e.g. looking up keys asynchronously), implement a Scoped key service and add it with something like:\n```\nservices.AddScoped\u003cIBlazorGoogleMapsKeyService, YourServiceImplementation\u003e();\n```\n\nOR (legacy - not recommended) Add google map script HEAD tag to wwwroot/index.html in Client side or _Host.cshtml in Server Side.\n```\n\u003cscript type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE\u0026v=3\"\u003e\u003c/script\u003e\n```\n\n\n2. Add path to project javascript functions file in wwwroot/index.html for Blazor WASM, or in _Host.cshtml or _HostLayout.cshtml for Blazor Server.\n```\n\u003cscript src=\"_content/BlazorGoogleMaps/js/objectManager.js\"\u003e\u003c/script\u003e\n```\nIf you want to use marker clustering add this script as well:\n```\n\u003cscript src=\"https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n3. Using the component is the same for both Blazor WASM and Blazor Server\n```\n@page \"/map\"\n@using GoogleMapsComponents\n@using GoogleMapsComponents.Maps\n\n\u003ch1\u003eGoogle Map\u003c/h1\u003e\n\u003cdiv style=\"height:@Height\"\u003e\n\u003cGoogleMap @ref=\"@_map1\" Id=\"map1\" Options=\"@mapOptions\" Height=\"100%\" OnAfterInit=\"AfterMapRender\"\u003e\u003c/GoogleMap\u003e\n\u003c/div\u003e\n@functions {\n\tprivate GoogleMap _map1;\n\tprivate MapOptions mapOptions;\t\n\n\tprotected override void OnInitialized()\n\t{\n\t\tmapOptions = new MapOptions()\n\t\t{\n\t\t\tZoom = 13,\n\t\t\tCenter = new LatLngLiteral()\n\t\t\t{\n\t\t\t\tLat = 13.505892,\n\t\t\t\tLng = 100.8162\n\t\t\t},\n\t\t\tMapTypeId = MapTypeId.Roadmap\n\t\t};\n\t}\n\n\t private async Task AfterMapRender()\n\t {\n\t     _bounds = await LatLngBounds.CreateAsync(_map1.JsRuntime);\n\t }\t\t\n}\n```\n\nOR Render markers with Blazor (currently only with `v=beta` version of google-maps, and specify a `MapId`)\n```\n@page \"/map\"\n@using GoogleMapsComponents\n@using GoogleMapsComponents.Maps\n\n\u003ch1\u003eGoogle Map\u003c/h1\u003e\n\u003cAdvancedGoogleMap @ref=\"@_map1\" Id=\"map1\" Options=\"@mapOptions\"\u003e\n    @foreach (var markerRef in Markers)\n    {\n        \u003cMarkerComponent \n            @key=\"markerRef.Id\" \n            Lat=\"@markerRef.Lat\" \n            Lng=\"@markerRef.Lng\" \n            Clickable=\"@markerRef.Clickable\" \n            Draggable=\"@markerRef.Draggable\" \n            OnClick=\"@(() =\u003e markerRef.Active = !markerRef.Active)\"\n            OnMove=\"pos =\u003e markerRef.UpdatePosition(pos)\"\u003e\n            \u003cp\u003eI am a blazor component\u003c/p\u003e\n        \u003c/MarkerComponent\u003e\n    }\n\u003c/AdvancedGoogleMap\u003e\n@code {\n    private List\u003cMarkerData\u003e Markers =\n    [\n        new MarkerData { Id = 1, Lat = 13.505892, Lng = 100.8162 },\n    ];\n\tprivate AdvancedGoogleMap? _map1;\n\tprivate MapOptions mapOptions =new MapOptions()\n\t{\n\t\tZoom = 13,\n\t\tCenter = new LatLngLiteral()\n\t\t{\n\t\t\tLat = 13.505892,\n\t\t\tLng = 100.8162\n\t\t},\n\t\tMapId = \"DEMO_MAP_ID\", //required for blazor markers\n\t\tMapTypeId = MapTypeId.Roadmap\n\t};\t\n\n    public class MarkerData\n    {\n        public int Id { get; set; }\n        public double Lat { get; set; }\n        public double Lng { get; set; }\n        public bool Clickable { get; set; } = true;\n        public bool Draggable { get; set; }\n        public bool Active { get; set; }\n        \n        public void UpdatePosition(LatLngLiteral position)\n        {\n            Lat = position.Lat;\n            Lng = position.Lng;\n        }\n    }\n}\n```\n\n## Samples\n Please check server side samples https://github.com/rungwiroon/BlazorGoogleMaps/tree/master/ServerSideDemo which are most to date\n \n ClientSide demos online\n https://rungwiroon.github.io/BlazorGoogleMaps/mapEvents\n\n**Breaking change from 4.0.0**\nMigrate to .NET 8 #286.\n\n**Breaking change from 3.0.0**\nMigrate from Newtonsoft.Json to System.Text.Json.\n\n**Breaking change from 2.0.0**\nLatLngLiteral constructor's parameters order changed #173\n","funding_links":[],"categories":["others","Libraries \u0026 Extensions"],"sub_categories":["Tools \u0026 Utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frungwiroon%2FBlazorGoogleMaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frungwiroon%2FBlazorGoogleMaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frungwiroon%2FBlazorGoogleMaps/lists"}