vue-static-map

    3.0.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i vue-static-map

    DownloadsWeekly Downloads

    410

    Version

    3.0.2

    License

    none

    Unpacked Size

    228 kB

    Total Files

    19

    Last publish

    Collaborators

    • erivero