vue-static-map

a simple component to generate an static google map

Google Documentation

Demo

• SandBox
• JSBin example

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