DEV Community

Cover image for Create a simple Vue component to use Google Maps
alfchee
alfchee

Posted on

Create a simple Vue component to use Google Maps

There are some libraries over there that we may install in our projects to use Google Maps, but considering the amount of KB's to add and that is another dependence that sometimes can be deprecated some day, I got in the position to create my own component, also I didn't going to use too many features.

The code I'm going to share can be useful to use the basics of Google Maps, or even to start your own component and give it more features that can be useful for your projects.

Obtaining the API Key

To use Maps JavaScript API, you'll need an API Key, which is a unique identifier used to authenticate the requests associated with your project for payment accounting purposes.
To get an API key, do the following:

Go to the GCP Console: https://cloud.google.com/console/google/maps-apis/overview

Use the drop-down menu to select or create the project that you want a new API Key for
Click the button to open the sidebar and go to API & Services > Credentials

On the Credentials page, click on Create Credentials > API key. The API Key Created dialog will show the new API Key.

You can read more about the Google Maps API Key in the documentation: https://developers.google.com/maps/documentation/javascript/get-api-key

Now create an environment file at the root of the project, called .env, the content must be like

VUE_APP_MAPS_API_KEY="API_KEY"
Enter fullscreen mode Exit fullscreen mode

Initializing the library

You can initialize the library with a function that returns a promise, which is resolved once the Google Maps library is downloaded in the browser and initialized.

Here is a basic example of how to create a map and add markers.

To actively use the Google Maps library in your Vue project, create a new script, /src/utils/gmaps.js.

const API_KEY = process.env.VUE_APP_MAPS_API_KEY
const CALLBACK_NAME = 'initMap'

let initialized = !!window.google
let resolveInitPromise
let rejectInitPromise

// This promise handles the initialization
// status of the google maps script
const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve
  rejectInitPromise = reject
})

export default function init() {
  // if google maps is already init
  // the `initPromise` should be resolved
  if (initialized) return initPromise

  initialized = true
  // the callback function is called
  // by the Google maps script if it is
  // successfully loaded
  window[CALLBACK_NAME] = () => resolveInitPromise(window.google)

  // we inject a new tag into the Head
  // of the HTML to load the Google Maps script
  const script = document.createElement('script')
  script.async = true
  script.defer = true
  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`
  script.onerror = rejectInitPromise
  document.querySelector('head').appendChild(script)

  return initPromise
}

Enter fullscreen mode Exit fullscreen mode

Creating a component to display the map

I'm gonna call the component GoogleMaps and for so create the component at /src/components/GoogleMaps.vue.

Let's add the markup at the template and the only CSS that's really mandatory

<template>
  <div class="map" ref="map"></div>
</template>

<script></script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

That's all the required code at the markup, we may add more in dependence of the layout of our application.

The mounted lifecycle hook is asynchronous, and it waits for the Google Maps library to be initialized so that it can proceed to render the map using the drawMap method, adding a marker to represent the user's location on the map.

<script>
import gmapsInit from '@/utils/gmaps'
import { isNumber, isArray } from 'util'

export default {
  name: 'GoogleMaps',

  data() {
    return {
      google: null,
      map: null,
      innerMarkers: [],
      userMarker: null
    }
  },

  async mounted() {
    try {
      // init and wait for the Google script is mounted
      this.google = await gmapsInit()

      // if the location is already set, for example
      // when returning back to this view from another one
      if ('lat' in this.myLocation && this.myLocation.lat) {
        this.drawMap()
        // set the current location
        this.addMarker(this.myLocation)
      }
    } catch (err) {
      console.log('ERROR:', err)
    }
  },

  computed: {
    myLocation() {
      // if the coordinates is not set
      if (!('lat' in this.center) && !isNumber(this.center.lat)) {
        return null
      }
      // return the object expected by Google Maps
      return { lat: this.center.lat, lng: this.center.lng }
    }
  },

  methods: {
    drawMap() {
      if (this.myLocation.lat && this.myLocation.lng) {
        // creating the map object, displaying it in the $el DOM object
        this.map = new this.google.maps.Map(this.$refs['map'], {
          zoom: 18,
          center: this.myLocation
        })

        // center the canvas of the map to the location of the user
        this.map.setCenter(this.myLocation)
      }
    },

  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

We need to pass some data to the component, and I'm going to set as required prop for the component is center, which contains the coordinates for the center of the map and can receive a collection of markers via a prop with the same name.

<script>
  props: {
    center: {
      type: Object,
      required: true
    },
    markers: {
      type: Array
    }
  },
</script>
Enter fullscreen mode Exit fullscreen mode

Then the last thing is to add reactivity in front of the change of the position of the current location of the user, for so is also required to add some methods to work with the markers.

<script>
  methods: {
        // add a marker with a blue dot to indicate the user location
    setUserMarker(location) {
      this.userMarker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
    },

    // Adds a marker to the map and push to the array
    addMarker(location) {
      // the marker positioned at `myLocation`
      const marker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
      this.innerMarkers.push(marker)
    },

    // Sets the map on all markers in the array
    setAllMarkersInMap(map) {
      for (let i = 0; i < this.innerMarkers.length; i++) {
        this.innerMarkers[i].setMap(map)
      }
    },

    // Removes the markers from the map, but keeps them in the array
    clearMarkers() {
      this.setAllMarkersInMap(null)
    },

    // Deletes all markers in the array by removing references to them
    deleteMarkers() {
      this.clearMarkers()
      this.innerMarkers = []
    }
  },

  watch: {
    marker: function(newVal) {
      if (isArray(newVal)) {
        // clear the markers
        this.clearMarkers()

        for (let i = 0; i < newVal.length; i++) {
          let position = newVal[i]
          if (
            'lat' in position &&
            isNumber(position.lat) &&
            isNumber(position.lng)
          ) {
            // set the current location
            this.addMarker(position)
          }
        }
      }
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode

It is quite easy and now you can render maps in your application with a marker, with something like

<template>
  <GoogleMaps :center="{ ...coordinates }" />
<template>
Enter fullscreen mode Exit fullscreen mode

Placing all the code for the GoogleMap component together

<template>
  <div class="map" ref="map"></div>
</template>

<script>
import gmapsInit from '@/utils/gmaps'
import { isNumber, isArray } from 'util'

export default {
  name: 'GoogleMaps',
  props: {
    center: {
      type: Object,
      required: true
    },
    markers: {
      type: Array
    }
  },
  async mounted() {
    try {
      // init and wait for the Google script is mounted
      this.google = await gmapsInit()

      // if the location is already set, for example
      // when returning back to this view from another one
      if ('lat' in this.myLocation && this.myLocation.lat) {
        this.drawMap()
        // set the current location
        this.addMarker(this.myLocation)
      }
    } catch (err) {
      console.log('ERROR:', err)
    }
  },
  data() {
    return {
      google: null,
      map: null,
      innerMarkers: [],
      userMarker: null
    }
  },
  computed: {
    myLocation() {
      // if the coordinates is not set
      if (!('lat' in this.center) && !isNumber(this.center.lat)) {
        return null
      }
      // return the object expected by Google Maps
      return { lat: this.center.lat, lng: this.center.lng }
    }
  },
  methods: {
    drawMap() {
      if (this.myLocation.lat && this.myLocation.lng) {
        // creating the map object, displaying it in the $el DOM object
        this.map = new this.google.maps.Map(this.$refs['map'], {
          zoom: 18,
          center: this.myLocation
        })

        // center the canvas of the map to the location of the user
        this.map.setCenter(this.myLocation)
      }
    },
    // add a marker with a blue dot to indicate the user location
    setUserMarker(location) {
      this.userMarker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
    },
    // Adds a marker to the map and push to the array
    addMarker(location) {
      // the marker positioned at `myLocation`
      const marker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
      this.innerMarkers.push(marker)
    },
    // Sets the map on all markers in the array
    setAllMarkersInMap(map) {
      for (let i = 0; i < this.innerMarkers.length; i++) {
        this.innerMarkers[i].setMap(map)
      }
    },
    // Removes the markers from the map, but keeps them in the array
    clearMarkers() {
      this.setAllMarkersInMap(null)
    },
    // Deletes all markers in the array by removing references to them
    deleteMarkers() {
      this.clearMarkers()
      this.innerMarkers = []
    }
  },
  watch: {
    marker: function(newVal) {
      if (isArray(newVal)) {
        // clear the markers
        this.clearMarkers()

        for (let i = 0; i < newVal.length; i++) {
          let position = newVal[i]
          if (
            'lat' in position &&
            isNumber(position.lat) &&
            isNumber(position.lng)
          ) {
            // set the current location
            this.addMarker(position)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Hoping it can be helpful for your project!

Top comments (0)