Skip to content

a simple component to generate an static google map

Notifications You must be signed in to change notification settings

eperedo/vue-static-map

Repository files navigation

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