a simple component to generate an static google map
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github Added an issue an pull request template Jul 14, 2017
dist feat(build): Migrate to vue-cli 3 Aug 31, 2018
public feat(build): Migrate to vue-cli 3 Aug 31, 2018
src feat(build): Migrate to vue-cli 3 Aug 31, 2018
tests/unit feat(build): Migrate to vue-cli 3 Aug 31, 2018
.browserslistrc feat(build): Migrate to vue-cli 3 Aug 31, 2018
.editorconfig Added english as a default language Jul 16, 2017
.eslintignore Initial Commit Jul 12, 2017
.eslintrc.js feat(build): Migrate to vue-cli 3 Aug 31, 2018
.gitignore feat(build): Migrate to vue-cli 3 Aug 31, 2018
.npmignore chore(build): Updated npmignore Aug 31, 2018
.postcssrc.js Initial Commit Jul 12, 2017
.prettierrc
README.md feat(docs): Updated usage instructions Aug 31, 2018
babel.config.js feat(build): Migrate to vue-cli 3 Aug 31, 2018
index.html Initial Commit Jul 12, 2017
jest.config.js feat(build): Migrate to vue-cli 3 Aug 31, 2018
package-lock.json
package.json fix(build): Added vue as a dev dependency Aug 31, 2018
postcss.config.js feat(build): Migrate to vue-cli 3 Aug 31, 2018

README.md

vue-static-map

a simple component to generate an static google map

static google map

Google Documentation

Demo

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

    <script src="https://unpkg.com/vue-static-map/dist/StaticMap.umd.min.js"></script>
  2. Add component in your app

    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

    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

    <static-map :google-api-key="apiKey" :format="format" :markers="markers" :zoom="zoom" :center="center" :size="size" :type="type" :paths="paths" :language="language"></static-map>

Events

  1. What about if you want the URL of the map, you can easily do that using the getUrl event

    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

    <static-map :google-api-key="apiKey" v-on:get-url="getUrl" :zoom="zoom" :center="center"></static-map>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run component