Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eperedo/vue-static-map
a simple component to generate an static google map
https://github.com/eperedo/vue-static-map
google-maps map vue
Last synced: 21 days ago
JSON representation
a simple component to generate an static google map
- Host: GitHub
- URL: https://github.com/eperedo/vue-static-map
- Owner: eperedo
- Created: 2017-07-12T03:16:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-05T02:50:49.000Z (over 2 years ago)
- Last Synced: 2024-04-12T22:57:32.794Z (9 months ago)
- Topics: google-maps, map, vue
- Language: Vue
- Size: 396 KB
- Stars: 24
- Watchers: 2
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-static-map
> a simple component to generate an static google map
[Google Documentation](https://developers.google.com/maps/documentation/static-maps/intro)
## Demo
- [SandBox](https://codesandbox.io/s/9o8yqq527p)
- [JSBin example](https://jsbin.com/ganoxoyopo/1/edit?html,js,output)
## Requirements
1. Vue 2.X.X
## Usage
1. Install from npm
npm install vue-static-map
Or include in your html using the script tag
```html
```
2. Add component in your app
```javascript
import StaticMap from 'vue-static-map';
// or require('vue-static-map')
// or window.StaticMap if you are including in a script tag
export default {
components: {
StaticMap,
},
};
```
3. Create some parameters in your data object
```javascript
export default {
data: {
apiKey: 'YOUR_GOOGLE_API_KEY', // required
zoom: 13, // required
center: 'Brooklyn+Bridge,New+York,NY',
format: 'gif',
language: 'ja',
markers: [
{
label: 'B',
color: 'blue',
lat: 40.702147,
lng: -74.015794,
size: 'normal',
},
{
label: 'Y',
color: 'yellow',
lat: 40.711614,
lng: -74.012318,
size: 'tiny',
},
{
label: 'G',
color: 'green',
lat: 40.718217,
lng: -74.015794,
size: 'small',
icon: 'http://www.airsoftmap.net/images/pin_map.png',
},
],
paths: [
{
color: 'blue',
weight: 8,
geodesic: false,
fillcolor: '0xFFFF0033',
locations: [
{ startLat: 40.737102, endLng: -73.990318 },
{ startLat: 40.749825, endLng: -73.987963 },
{ startLat: 40.752946, endLng: -73.987384 },
{ startLat: 40.762946, endLng: -73.997399 },
],
},
],
type: 'roadmap',
size: [800, 400],
},
components: {
StaticMap,
},
};
```
4. In your template just call the static map component
```html
```
## Events
1. What about if you want the URL of the map, you can easily do that using the **getUrl** event
```javascript
function getUrl(url) {
this.url = url;
}
export default {
data: () => {
const dataValues = {
apiKey: 'YOUR_API_KEY',
center: 'Empire State Building',
url: '',
zoom: 13,
};
return dataValues;
},
name: 'app',
components: {
StaticMap,
},
methods: {
getUrl,
},
};
```
2. Add the event on your template
```html
```
## Build Setup
```bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run component
```