Build a light Google places API micro service for your projects.

…or how to switch your api calls into your back-end instead of your front-end…

Photo by Jackson So on Unsplash

Recently I had to manage an autocomplete input which will call Google places API to suggest adresses for user profil pages.

Stack:

• Back-end: NestJS / MySql
• Front-end: VueJS / Quasar

The Client Side Workflow

I’ll present my first approach (without quasar component, I’ll explain why later):

First a basic input with a ref (important):

<div class="custom__field__control">
    <input
      v-model="user.adresse"
      type="text"
      ref="locations"
      class="custom__input"
      placeholder="Adresse"
    />
</div>

Create a function which accept a callback to inject places api call into the DOM.

window.checkAndAttachMapScript = function (callback) {
    let scriptId = 'map-api-script'
    let mapAlreadyAttached = !!document.getElementById(scriptId)
    if (mapAlreadyAttached) {
        if (window.google)
            callback()
    } else {
        window.mapApiInitialized = callback
        let script = document.createElement('script')
        script.id = scriptId
        script.src =…