Have ideas to improve npm?Join in the discussion! »

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

    0.1.4 • Public • Published

    CONTRIBUTORS NEEDED!

    My projects at work have also gradually migrated away from Google Maps (but still on Vue -- Vue's awesome!), so there's less and less incentive to maintain.

    If you have time to contribute to a rather frequently used library, feel free to make a PR!

    What's urgently needed are:

    1. Better automated tests
    2. Better integration tests with the popular frameworks, especially Nuxt and Vue template
    3. Better documentation (examples, recommendations)

    The above three will go a long way to keeping the project maintainable and contributable, and will address many of the open issues.

    vue-google-maps-typescript

    Build Status

    Installation

    With npm:

    npm i vue-google-maps-typescript

    Manually

    Just download dist/vue-google-maps-typescript.js file and include it from your HTML.

    Basic usage / Documentation

    Get an API key from Google

    Generating an Google Maps API key.

    Example:

    Config GoogleMapLoader (Wrap):

    • mapConfig: object -> example: { zoom: 0, center: { lat: 0, lng: 0 } };
    • apiKey: string -> example: "AIzaSp...";
    • style: object (optional) -> example: { width: "700px", height: "500px" };
    <GoogleMapLoader :options="mapConfig" :apiKey="apiKey" :mapStyle="style">
    </GoogleMapLoader>

    Marker:

    • markerOption: google.maps.MarkerOptions
    • markers: google.maps.ReadonlyMarkerOptions[]
    <GoogleMapLoader :options="mapConfig" :apiKey="apiKey" :mapStyle="style">
      <template slot-scope="{ google, map }">
        <!-- GOOGLE MAP MARKER -->
        <GoogleMapMarker
          v-for="(marker, index) in markers"
          :key="index"
          :marker="markerOption"
          :google="google"
          :map="map"
        />
      </template>
    </GoogleMapLoader>

    Autocomplete:

    • inputAddress: @Ref (from input tag)
    • origin: google.maps.places.PlaceResult (optional)
    • markerOption: google.maps.MarkerOptions
    <GoogleMapLoader :options="mapConfig" :apiKey="apiKey" :mapStyle="style">
      <template slot-scope="{ google, map }">
        <!-- AUTOCOMPLETE ORIGIN GEOLOCATION -->
        <GoogleMapAutocomplete
          :place.sync="origin"
          :input="inputAddress"
          :countries="['vn']"
          :google="google"
          :map="map"
        >
          <template slot-scope="{ place, address }">
            <GoogleMapMarker
              :marker="markerOption"
              :google="google"
              :map="map"
            />
          </template>
        </GoogleMapAutocomplete>
      </template>
    </GoogleMapLoader>

    Direction:

    • directionsRequest: google.maps.DirectionsRequest -> example:{ origin: originLocation, destination: destinationLocation, travelMode: "DRIVING" }
    • originLocation: google.maps.places.PlaceGeometry
    • destinationLocation: google.maps.places.PlaceGeometry
    <GoogleMapLoader :options="mapConfig" :apiKey="apiKey" :mapStyle="style">
      <template slot-scope="{ google, map }">
        <!-- GENDER DIRECTION FROM 2 GEOLOCATIONS -->
        <GoogleMapDirection
          :router="directionsRequest"
          :google="google"
          :map="map"
        />
      </template>
    </GoogleMapLoader>
     

    Distance Matrix:

    • routersRequest: google.maps.DistanceMatrixRequest -> example:{ origins: originsLocations, destinations: destinationsLocations, travelMode: "DRIVING", unitSystem: 0, avoidHighways: false, avoidTolls: false }
    • originsLocations: google.maps.places.PlaceGeometry[]
    • destinationsLocations: google.maps.places.PlaceGeometry[]
    <GoogleMapLoader :options="mapConfig" :apiKey="apiKey" :mapStyle="style">
      <template slot-scope="{ google, map }">
        <!-- GENDER DIRECTION FROM 2 GEOLOCATIONS -->
        <GoogleMapDistanceMatrix
          :single="true"
          :routers="routersRequest"
          :google="google"
          :map="map"
        >
          <template slot-scope="{ distance }">
            {{ distance }}
          </template>
        </GoogleMapDistanceMatrix>
      </template>
    </GoogleMapLoader>
     

    Officially supported components:

    The list of officially support components are:

    • Marker
    • Autocomplete
    • Direction
    • Distance Matrix

    Improvements to the tests are welcome :)

    Install

    npm i vue-google-maps-typescript

    DownloadsWeekly Downloads

    259

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    27.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar