DEV Community

loading...

Using Google Maps API for Location Picker with Vue 2

shreyasmalewar profile image shreyasmalewar Updated on ・3 min read

At times when creating apps like uber, which require the user to pick a location on the map we can use the Google Maps API. So let me show you how to build a location picker with Google Maps API using Vue 2.

If you do not know about Vue, I'd recommend you check it out here: Vue

Let us begin.

Prerequisites

  • Creating a Vue app

Create a new Vue app using the following command:

$ npm install -g @vue/CLI
$ vue create gmaps-tutorial
$ cd gmaps-tutorial
$ npm run serve
Enter fullscreen mode Exit fullscreen mode

This should get you an app server running which you can check out at localhost:8080.
Alt Text

  • Obtaining Google Maps API Key

Go to: Google Cloud Console
Alt Text

Click on Library under API & Services
Alt Text

Click on "Maps Javascript API"
Alt Text

Click on "Enable"
Alt Text

Click on "Credentials"
Alt Text

Click on "Create Credentials" and select the API key
Alt Text

Copy the created API Key
Alt Text

Editing Code

Install Dependencies

$ npm i vue2-google-maps
Enter fullscreen mode Exit fullscreen mode

In src/main.js

  • Import VueGoogleMaps
import * as VueGoogleMaps from "vue2-google-maps";
Enter fullscreen mode Exit fullscreen mode
  1. Initialize VueGoogleMaps
Vue.use(VueGoogleMaps, {
  load: {
    key: "API_KEY",
  },
  installComponents: true,
});
Enter fullscreen mode Exit fullscreen mode

In src/App.vue

  • Add the GmapMap & GmapMarker components GmapMap displays the map in the browser window and GmapMarker picks the location.
<div id="app">
  <GmapMap
    :center="center"
    :zoom="18"
    map-style-id="roadmap"
    :options="mapOptions"
    style="width: 100vmin; height: 50vmin"
    ref="mapRef"
    @click="handleMapClick"
  >
    <GmapMarker
      :position="marker.position"
      :clickable="true"
      :draggable="true"
      @drag="handleMarkerDrag"
      @click="panToMarker"
    />
  </GmapMap>
  <button @click="geolocate">Detect Location</button>

  <p>Selected Position: {{ marker.position }}</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Declare the following as component data
  data() {
    return {
      marker: { position: { lat: 10, lng: 10 } },
      center: { lat: 10, lng: 10 },

      mapOptions: {
        disableDefaultUI: true,
      },
    };
  }
Enter fullscreen mode Exit fullscreen mode
  • Add the following Methods to the component
methods: {
    //detects location from browser
    geolocate() {
      navigator.geolocation.getCurrentPosition((position) => {
        this.marker.position = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };

        this.panToMarker();
      });
    },

    //sets the position of marker when dragged
    handleMarkerDrag(e) {
      this.marker.position = { lat: e.latLng.lat(), lng: e.latLng.lng() };
    },

    //Moves the map view port to marker
    panToMarker() {
      this.$refs.mapRef.panTo(this.marker.position);
      this.$refs.mapRef.setZoom(18);
    },

    //Moves the marker to click position on the map
    handleMapClick(e) {
      this.marker.position = { lat: e.latLng.lat(), lng: e.latLng.lng() };
      console.log(e);
    },
  },
};
Enter fullscreen mode Exit fullscreen mode
  • If you wish to automatically detect the location on the application load add geolocate to the mounted hook
  mounted() {
    this.geolocate();
  },
Enter fullscreen mode Exit fullscreen mode

Alt Text

This should give you a map that lets you select your location by clicking on it. Now you can extend this component to use as you like.

The complete example can be found here Github Gist

Discussion (3)

pic
Editor guide
Collapse
anikets08 profile image
Aniket Singh

Interesting gonna try it

Collapse
rtpharry profile image
Matthew Harris

This tutorial seems to be missing the bit where you npm install the VueGoogleMaps package.

Collapse
shreyasmalewar profile image
shreyasmalewar Author

Thanks! Updated.