Nuxt Link in Map Marker PopUp

Question

I have a Google Map, with markers loaded. When I click the marker it shows a pop-up, which is great. Inside that pop-up I need a so that it loads the next pages smoothly. But this doesn't work inside the content of the map marker as I have show below.

createMarker({
      lat: doc.lat,
      lng: doc.lng,
      content: `<div class="mapPopMarker-content">
                <div class="inner-content">
                  ${doc.name ? '<div class="name">'+ doc.name +'</div>' : ''}
                  ${doc.address ? '<div class="address">'+ doc.address +'</div>' : ''}
                  <NuxtLink to="/companies/${doc.id}" class="link">View</NuxtLink>
                </div>
                </div>`
})

When rendered, it just renders as HTML, and not an actual link here. How do I make this NuxtLink work?

Answer 1

Yes, you can't render a vue code in the createMarker content property as it will be inserted as innerHTML and will not be compiled.

You can use nuxt-gmaps library, and you can use GMapMarker component to add your code as default slot to it.