{"id":17951060,"url":"https://github.com/marcusschiesser/stencil-map","last_synced_at":"2026-04-27T22:32:11.595Z","repository":{"id":66459247,"uuid":"190876892","full_name":"marcusschiesser/stencil-map","owner":"marcusschiesser","description":"Google Maps API as a web component. Built using stencil.","archived":false,"fork":false,"pushed_at":"2019-06-08T10:54:17.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T16:14:58.879Z","etag":null,"topics":["component","google","maps","stenciljs","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/marcusschiesser.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-06-08T10:53:41.000Z","updated_at":"2023-07-06T00:59:42.000Z","dependencies_parsed_at":"2023-02-28T19:46:06.803Z","dependency_job_id":null,"html_url":"https://github.com/marcusschiesser/stencil-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcusschiesser/stencil-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusschiesser%2Fstencil-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusschiesser%2Fstencil-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusschiesser%2Fstencil-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusschiesser%2Fstencil-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcusschiesser","download_url":"https://codeload.github.com/marcusschiesser/stencil-map/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusschiesser%2Fstencil-map/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32358509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["component","google","maps","stenciljs","webcomponent","webcomponents"],"created_at":"2024-10-29T09:42:32.434Z","updated_at":"2026-04-27T22:32:11.580Z","avatar_url":"https://github.com/marcusschiesser.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# Stencil Map Component\n\nMap component based on [Google Maps API](https://developers.google.com/maps/documentation/javascript/tutorial) \nthat you can reuse in your web projects - works in any major framework or with no framework at all.\n\nTechnically it's a [web component](https://www.webcomponents.org/) built using [Stencil](https://stenciljs.com/).\n\n## Getting Started\n\nTo use the component, you first need a Google API key, you can get it from here:\nhttps://console.cloud.google.com/google/maps-apis\n\nThen you can test the component by adding the API key to the demo code found at `src/index.html` and run:\n\n```bash\nnpm install\nnpm start\n```\n\n## Using this component\n\nTo build the component for production, run:\n\n```bash\nnpm run build\n```\n\nCopy the generated `dist` folder to your own project and add the following `script` tag to your HTML:\n```html\n\u003cscript src=\"dist/stencil-map.js\"\u003e\u003c/script\u003e\n```\n\nYou can then use the component in your own HTML like this:\n\n```html\n\u003cmap-component api-key=\"[Put Google API Key Here]\" cluster=\"true\" fit-locations=\"true\"\u003e\u003c/map-component\u003e\n```\n\nThe component has the following attributes:\n\n`cluster` - uses [MarkerClusterer](https://developers.google.com/maps/documentation/javascript/marker-clustering) to cluster locations\n\n`fit-locations` - if true, centers the map to the boundary of all locations\n\nA location must be a Javascript object implementing this interface:\n```typescript\ninterface Location {\n    name: string;\n    lat: number;\n    lng: number;\n}\n```\n\nIf you have an array of locations, you can set them by changing the `locations` property of the\ncomponent:\n```javascript\nconst map = document.querySelector('map-component');\nmap.locations = locations;\n```\n\n**TODO**: Component hasn't yet been [published to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcusschiesser%2Fstencil-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcusschiesser%2Fstencil-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcusschiesser%2Fstencil-map/lists"}