{"id":19542566,"url":"https://github.com/fable-compiler/fable.reactgooglemaps","last_synced_at":"2025-07-21T23:32:10.254Z","repository":{"id":34745269,"uuid":"182951077","full_name":"fable-compiler/Fable.ReactGoogleMaps","owner":"fable-compiler","description":"Fable bindings and helpers for react-google-map","archived":false,"fork":false,"pushed_at":"2024-11-21T13:16:08.000Z","size":167,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-26T17:46:59.213Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fable-compiler.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,"zenodo":null}},"created_at":"2019-04-23T06:43:43.000Z","updated_at":"2024-11-21T13:16:07.000Z","dependencies_parsed_at":"2023-01-15T09:01:28.359Z","dependency_job_id":"b0dafd2d-08e2-47fd-b72e-fcbf08d79058","html_url":"https://github.com/fable-compiler/Fable.ReactGoogleMaps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fable-compiler/Fable.ReactGoogleMaps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fable-compiler%2FFable.ReactGoogleMaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fable-compiler%2FFable.ReactGoogleMaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fable-compiler%2FFable.ReactGoogleMaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fable-compiler%2FFable.ReactGoogleMaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fable-compiler","download_url":"https://codeload.github.com/fable-compiler/Fable.ReactGoogleMaps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fable-compiler%2FFable.ReactGoogleMaps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266403045,"owners_count":23923403,"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","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-11T03:15:06.365Z","updated_at":"2025-07-21T23:32:10.214Z","avatar_url":"https://github.com/fable-compiler.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fable.ReactGoogleMaps\n\nFable bindings and helpers for [react-google-map](https://github.com/tomchentw/react-google-maps)\n\n## Installation\n\n```\nnpm install --save react-google-maps # or\nyarn add react-google-maps\n\npaket add Fable.ReactGoogleMaps --project [yourproject]\n```\n\n## Usage\n\nIn your css add the following:\n\n```css\n.maploadercontainer,\n.mapcontainer {\n    height: calc(100vh - 18rem);\n    width: 100%;\n}\n```\n\nand in your F# code you can create the map like this:\n\n```fs\nopen Fable.Core.JsInterop\nopen Fable.ReactGoogleMaps\nopen Fable.ReactGoogleMaps.Props\n\nlet defaultCenter:GoogleMaps.LatLngLiteral = GoogleMaps.Literal.createLatLng 40.6892494 -74.0445004\n\nlet myMap =\n    googleMap [\n        MapProperties.ApiKey googleMapApiKey\n        MapProperties.MapLoadingContainer \"maploadercontainer\"\n        MapProperties.MapContainer \"mapcontainer\"\n        MapProperties.DefaultZoom 9\n        MapProperties.DefaultCenter !^ defaultCenter\n        MapProperties.Center !^ defaultCenter ]\n```\n\n### Traffic Layer\n\nGoogle Maps allows you to activate the traffic layer. The map component has a simple property for that:\n\n\n```fs\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..\n        MapProperties.ShowTrafficLayer true ]\n```\n\n### SearchBox\n\nIf you want to show a searchbox in Google Maps then use the following properties:\n\n\n```fs\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..\n        MapProperties.SearchBoxText \"Search\"\n        MapProperties.ShowSearchBox true ]\n```\n\n### Markers\n\nIf you want to show markers on the map then you can create them like this:\n\n```fs\nlet markers =\n    locations\n    |\u003e Array.map (fun location -\u003e\n        marker [\n            MarkerProperties.Key location.ID\n            MarkerProperties.Position !^ (Fable.Helpers.GoogleMaps.Literal.createLatLng location.X location.Y)\n            MarkerProperties.Icon (sprintf \"Images/markers/%s.png\" location.Color)\n            MarkerProperties.Title location.Title] [])\n\n\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..\n        MapProperties.Markers markers ]\n```\n\nIf your markers are changing over time, then it's important to set the key property to some stable ID. This allows React to keep track of which markers actually changed and reduces flickering.\n\n### MarkerClusterer\n\nThe map component allows you to use a [MarkerClusterer](https://tomchentw.github.io/react-google-maps/#markerclusterer):\n\n```fs\nlet clustered =\n    markers\n    |\u003e markerClusterer [\n        MarkerClustererProperties.AverageCenter true\n        MarkerClustererProperties.MaxZoom 15\n        MarkerClustererProperties.EnableRetinaIcons true\n        MarkerClustererProperties.GridSize 60.]\n\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..\n        MapProperties.Clusterer clustered ]\n```\n\n\n### Getting properties from the map\n\nIt's possible to retrieve properties like current center or current bounds from the GoogleMaps component. You need to use a MapRef like the following:\n\n```fs\n\nlet mutable mapRef = MapRef null\nlet onMapMounted (ref:obj) =\n    mapRef \u003c- MapRef ref\n\n// ...\n\n\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..\n        MapProperties.OnMapMounted onMapMounted ]\n\n// ...\n\nlet bounds = mapRef.GetBounds()\n\n```\n\n### Set bounds of map to fit all the markers\n\n```fs\n// ...\nlet markerPositions: Position list = // ...\n\n\nlet mutable mapRef = MapRef null\nlet onMapMounted (ref:obj) =\n    mapRef \u003c- MapRef ref\n    mapRef.FitBounds(getBoundsFromLatLngs markerPositions)\n\nlet myMap =\n    googleMap [ \n        MapProperties.ApiKey googleMapApiKey\n        // ..    \n        MapProperties.Markers markers\n        MapProperties.OnMapMounted onMapMounted ]\n\n```\n\n\n## Release process\n\nAfter installing dependencies with `yarn install`, run `yarn run build publish` to publish a new package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffable-compiler%2Ffable.reactgooglemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffable-compiler%2Ffable.reactgooglemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffable-compiler%2Ffable.reactgooglemaps/lists"}