Vue with Typescript and Google Map

Overview

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 :)

You might also like...
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue
EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes 📖 Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Owner
An Nguyen Van
I am a Software Engineer with 1+ years in web development, 6 months in Public Cloud (AWS Certified SA)
An Nguyen Van
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 130 Sep 14, 2022
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 23 Nov 24, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Sylvain Julé 87 Dec 9, 2022
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

马金花儿 2.3k Jan 5, 2023
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 117 Oct 24, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Vladimir Vershinin 664 Dec 2, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

null 8 Oct 15, 2022
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 392 Dec 31, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 40 Nov 17, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 80 Dec 18, 2022