Nth Permutation Mathematics

    vuejs-google-maps
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    vuejs-google-map

    Google Map components and integration for VueJs

    NPM version Dependency Statusnpm npm

    This package is under active development, the documentation is not complete yet, so if is missing something open a request or look at the source code.

    Installation

    npm i vuejs-google-maps
    yarn add vuejs-google-maps
    

    Usage

    Before starting you need a Google API key from the developer console, once you obtained your key, import the module in your application and register it as plugin:

    import Vue from 'vue'
    import VueGoogleMap from 'vuejs-google-maps'
    import 'vuejs-google-maps/dist/vuejs-google-maps.css'
    
    Vue.use(VueGoogleMap, {
        load: {
            apiKey: 'your-api-key',
            libraries: [/* rest of libraries */]
        }
    })

    ♻️ Usage with Nuxt.js

    Add vuejs-google-maps/nuxt to modules section of nuxt.config.js

    export default {
        modules: [
            // Simple usage
            'vuejs-google-maps/nuxt',
            // Passing options in module configuration
            ['vuejs-google-maps/nuxt', {apiKey: 'xxxxxx', libraries: [/* rest of libraries */]}]
        ],
        // Passing options in module top level configuration
        googleMaps: {apiKey: 'xxxxxx', libraries: [/* rest of libraries */]}
    }

    This module tries to map GoogleMap with Vue components as much as possible so any of the options available on the original GoogleMap class will be available as component props and all the events emitted will be mapped to component events.

    Components

    Here a list of the available components that you can use with this plugin, click on them to discover more about the usage and see examples. If you are interested to see a real life use checkout the example folder which contains the source code of the website.

    Marker

    The Google Map Marker element require to be inside a <google-map> component., it support the default slot.

    <template>
      <google-map-marker
          title="String"
          label="String|Object"
          clickable="Boolean"
          draggable="Boolean"
          visible="Boolean"
          z-index="Number"
          click="Function"
          dblclick="Function"
          rightclick="Function"
          drag="Function"
          dragstart="Function"
          dragend="Function"
          mouseup="Function"
          mousedown="Function"
          mouseover="Function"
          mouseout="Function"
      />
    </template>

    AutoComplete

    The AutoComplete component does not require to be inside a <google-map> component, it can be used anyway inside your app. It display an input and optionally the autocomplete controls, when a place is selected the place-changed event is triggered with the result.

    <template>
      <google-map-autocomplete
          model="String"
          types="Array"
          controls="Boolean"
          update-map="Boolean"
          place-changed="Function"
      />
    </template>

    Autocomplete props

    • Example:
    const center = { lat: 50.064192, lng: -130.605469 };
    // Create a bounding box with sides ~10km away from the center point
    const defaultBounds = {
      north: center.lat + 0.1,
      south: center.lat - 0.1,
      east: center.lng + 0.1,
      west: center.lng - 0.1,
    };
    const options = {
      bounds: defaultBounds,
      componentRestrictions: { country: "us" },
      fields: ["address_components", "geometry", "icon", "name"],
      strictBounds: false,
      types: ["establishment"],
    };
    <template>
      <div class="info-windows">
        <google-map id="map" ref="Map">
          <google-map-marker
              :key="index"
              v-for="(infoWindow, index) in infoWindowsList"
              :position="infoWindow.position"
              :key="index"
              @click="toggleInfoWindow(infoWindow)"
          />
          <google-map-infowindow
              :position="infoWIndowContext.position"
              :show.sync="showInfo"
              :options="{maxWidth: 300}"
              @info-window-clicked="infoClicked"
          >
            <h4>{{infoWindowContext.title}}</h4>
            <p>{{infoWindowContext.description}}</p>
          </google-map-infowindow>
        </google-map>
      </div>
    </template>
    
    <script>
    import cities from '~/assets/cities.json'
    
    export default {
      data() {
        return {
          showInfo: false,
          infoWindowContext: {
            position: {
              lat: 44.2899,
              lng: 11.8774
            }
          },
          infoWindowsList: cities
        }
      },
      methods: {
        toggleInfoWindow(context) {
          this.infoWIndowContext = context
          this.showInfo = true
        },
        infoClicked(context) {
          console.log(context)
        }
      }
    }
    </script>

    Added

    @info-window-clicked($event) to info-windows


    Development

    If you want to contribute in the development clone or fork the repository, than install all the dependencies:

    npm install
    yarn install
    

    Create a .env file containing the VUE_APP_GOOGLE_APIKEY variable with your valid API key:

    VUE_APP_GOOGLE_APIKEY=my-apy-key

    License

    This package is under the MIT License.

    Install

    npm i vuejs-google-maps

    DownloadsWeekly Downloads

    893

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    1.72 MB

    Total Files

    19

    Last publish

    Collaborators

    • chantouchsek