Pass params in google maps API url in vue.js

I have two params I get from a $router.push() : {{ this.$route.params.lat }} and{{ this.$route.params.lng }}. They are latitude and longitude coordinates.

I have to pass the two of them in an URL to get a Google Maps:

https://maps.googleapis.com/maps/api/staticmap?center={{ this.$route.params.lat }},{{ this.$route.params.lng }}&zoom=15&size=300x300&maptype=terrain&key=MY_API_KEY"
         

But doing so doesn’t work, I have a error message:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

How can I fix it?

Answer

As the error message indicates, you can’t use the {{ }} template syntax within HTML attribute values.

The typical way to solve this is use the v-bind syntax

<img :src="`https://maps.googleapis.com/maps/api/staticmap?center=${this.$route.params.lat},${this.$route.params.lng}&zoom=15&size=300x300&maptype=terrain&key=MY_API_KEY`">

For this though, I would use a computed property to generate the URL so you can properly handle URL encoding

computed: {
  mapUrl () {
    const url = "https://maps.googleapis.com/maps/api/staticmap"
    const params = new URLSearchParams({
      center: `${this.$route.params.lat},${this.$route.params.lng}`,
      zoom: 15,
      size: "300x300",
      maptype: "terrain",
      key: "MY_API_KEY"
    })
    return `${url}?${params}`
  }
}

Then you can use this in your template

<img :src="mapUrl">