Skip to content

Pass params in google maps API url in vue.js

I have two params I get from a $router.push() : {{ this.$ }} 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:{{ this.$ }},{{ 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?



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="`${this.$},${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 = ""
    const params = new URLSearchParams({
      center: `${this.$},${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">
User contributions licensed under: CC BY-SA
8 People found this is helpful