Using Google Maps API for Location Picker with Vue 2
Tags: google, maps, quasar, vue
Published: 2021-02-17 08:20:25

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](https://vuejs.org/)_

Let us begin.

## Prerequisites

* Creating a Vue app

Create a new Vue app using the following command:

```bash
$ npm install -g @vue/CLI
$ vue create gmaps-tutorial
$ cd gmaps-tutorial
$ npm run serve
```

This should get you an app server running which you can check out at [localhost:8080](http://localhost:8080).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wc9heokxfl3uegnkxhv0.png)

* Obtaining Google Maps API Key

Go to: [Google Cloud Console](https://console.cloud.google.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32zaa8nhbuv1z8murnq.png)

Click on Library under API & Services
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70gg5rbfyxlyp4ypfhsf.png)

Click on "Maps Javascript API"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl1mqj28rk1l13hsvncx.png)

Click on "Enable"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l56y54rhwcx23nimu0uk.png)

Click on "Credentials"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtc3lagagn608ylkawiz.png)

Click on "Create Credentials" and select the API key
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9uun85mky4jdwgtvxnh.png)

Copy the created API Key
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7rwxbtpxgz80noq3k77.jpg)

## Editing Code

### Install Dependencies

```sh
$ npm i vue2-google-maps
```

### In `src/main.js`

* Import VueGoogleMaps

```js
import * as VueGoogleMaps from "vue2-google-maps";
```

2. Initialize VueGoogleMaps

```js
Vue.use(VueGoogleMaps, {
  load: {
    key: "API_KEY",
  },
  installComponents: true,
});
```

### In `src/App.vue`

* Add the GmapMap & GmapMarker components
   GmapMap displays the map in the browser window and GmapMarker picks the location.

```html
<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>
```

*  Declare the following as component data

```js
  data() {
    return {
      marker: { position: { lat: 10, lng: 10 } },
      center: { lat: 10, lng: 10 },

      mapOptions: {
        disableDefaultUI: true,
      },
    };
  }
```

* Add the following Methods to the component

```js
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);
    },
  },
};
```

*  If you wish to automatically detect the location on the application load add `geolocate` to the `mounted` hook

```js
  mounted() {
    this.geolocate();
  },
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew8vtl487tau8auc43ff.png)

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](https://gist.github.com/shreyasmalewar/e1fc20233debfc07f7236ad12561c71d)