Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edgeworkscreative/ewc-google-map
:round_pushpin: Google Maps Place card web component built with StencilJS.
https://github.com/edgeworkscreative/ewc-google-map
google-maps google-places snazzy-maps stencil stenciljs web-components
Last synced: about 1 month ago
JSON representation
:round_pushpin: Google Maps Place card web component built with StencilJS.
- Host: GitHub
- URL: https://github.com/edgeworkscreative/ewc-google-map
- Owner: edgeworkscreative
- License: mit
- Created: 2018-09-03T18:22:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T15:04:16.000Z (over 6 years ago)
- Last Synced: 2024-11-06T15:07:08.514Z (2 months ago)
- Topics: google-maps, google-places, snazzy-maps, stencil, stenciljs, web-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@edgeworkscreative/ewc-google-map
- Size: 171 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Edgeworks Creative - Google Maps Component
Google Maps Place card web component built with StencilJS.
So simple, it works with only two lines of code! [JSFiddle](https://jsfiddle.net/v3a4urwL/1/)
###### WIP
#### Stencil components are just Web Components, so they work in any major framework or with no framework at all.
## Example
```html
```
## Features
- Load styles directly from [SnazzyMaps](https://snazzymaps.com/) (Please cache this request in your service worker)
- Easily retrieve business contact information by passing your [Google Place](https://developers.google.com/places/web-service/intro) ID.
- Slide through all of your [Google Place](https://developers.google.com/places/web-service/intro) photos.
### FAQ
- How do I find my Google Place ID?
- You can use the map located [here](https://developers.google.com/places/place-id) to find your Place ID.
- Do I need a Google Maps API key?
- You do not need a key when developing locally.
- Where do I find my Google Maps API key?
- You can follow [these](https://developers.google.com/maps/documentation/javascript/get-api-key) steps.
- I'd like to use the SnazzyMaps feature, what should I add to my service worker?
- If you're using Workbox:
```javascript
workbox.routing.registerRoute(
new RegExp('^https://cors-anywhere.herokuapp.com/https://snazzymaps.com/'),
workbox.strategies.cacheFirst({
cacheName: 'snazzy-maps',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200]
}),
],
}),
);
```
## Using this component
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install @edgeworkscreative/ewc-google-map --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install @edgeworkscreative/ewc-google-map --save`
- Add an import to the npm packages `import '@edgeworkscreative/ewc-google-map';`
- Then you can use the element anywhere in your template, JSX, html etc
### TODO
- Documentation
- Add `styles` prop as alternative to fetching directly from SnazzyMaps
## Stencil
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.