@dmnchzl/mnml-gmap-vue

Minimal Google Map

@dmnchzl/mnml-gmap-vue is a Vue component to simply inject Google Maps 🌍 inside your projet.

This library is published under the Beerware license, which means you can do whatever you want with the code.

This project is powered by ViteJS.

How To Use

First of all, you need to install the package:

  npm install @dmnchzl/mnml-gmap-vue

Equivalent with Yarn

  yarn add @dmnchzl/mnml-gmap-vue

Then, use the component as these samples below:

  <template>
    <div class="container">
      <GMap
        :apiKey="apiKey"
        :defaultCenter="location"
        :defaultZoom="5"
      />
    </div>
  </template>

  <script>
  import { GMap } from '@dmnchzl/mnml-gmap-vue';

  /**
   * The 'keyke' (Key + Fake = Cake) is a lie
   * NB: Worst pun ever; i know that...
   */
  const API_KEY = 'YLzo6G7hJxAg55x/EvkEaPTvoO/PhQ9ASxzZ5A6OsNJLE4dxq+zK2lJ5Ta7/z5bbtQ9C2f2jDRRW6JyUArVIpQ==';
  const EIFFEL_TOWER = { lat: 48.8619, lng: 2.2945 };

  export default {
    components: {
      GMap
    },
    computed: {
      apiKey: () => API_KEY
    },
    data() {
      return {
        location: { lat: EIFFEL_TOWER.lat, lng: EIFFEL_TOWER.lng }
      };
    }
  };
  </script>

More options are also available

  <template>
    <div class="container">
      <GMap
        :apiKey="apiKey"
        :defaultCenter="location"
        :defaultZoom="5"
        :markers="markers"
        :styledMap="styleArray"
        :enableUI="true"
      />
    </div>
  </template>

  <script>
  import { GMap } from '@dmnchzl/mnml-gmap-vue';
  import styleArray from './styleArray';

  const API_KEY = 'YLzo6G7hJxAg55x/EvkEaPTvoO/PhQ9ASxzZ5A6OsNJLE4dxq+zK2lJ5Ta7/z5bbtQ9C2f2jDRRW6JyUArVIpQ==';
  const EIFFEL_TOWER = { lat: 48.8619, lng: 2.2945 };
  const BIG_BEN = { lat: 51.5021, lng: -0.1242 };
  const COLISEUM = { lat: 41.8961, lng: 12.4879 };

  export default {
    components: {
      GMap
    },
    computed: {
      apiKey: () => API_KEY,
      styleArray: () => styleArray
    },
    data() {
      return {
        location: { lat: EIFFEL_TOWER.lat, lng: EIFFEL_TOWER.lng },
        markers: [
          {
            ...EIFFEL_TOWER,
            onClick: () => console.log('Eiffel Tower')
          },
          {
            ...BIG_BEN,
            onClick: () => console.log('Big Ben')
          },
          {
            ...COLISEUM,
            onClick: () => console.log('Coliseum')
          }
        ]
      };
    }
  };
  </script>

Important

You need to create a account on cloud.google.com, and generate an API_KEY, to use Google Maps API (and so this component).

Local Development

If you want more,

You can clone the project:

git clone https://github.com/dmnchzl/minimalgooglemapvue.git

Install dependencies:

yarn install

Develop locally:

yarn dev

Run all unit tests:

yarn test

And finally compile the project:

yarn build

Enjoy 👍

License

"THE BEER-WARE LICENSE" (Revision 42):
<[e-mail]> wrote this file. As long as you retain this notice you
can do whatever you want with this stuff. If we meet some day, and you think
this stuff is worth it, you can buy me a beer in return. Damien Chazoule