Question : how to create map like tinder about x5-gmaps

[kossa]

Very helpful

a small gift : vuejs/awesome-vue#3568

[xon52]

Thanks 😊
Good question. I don't have a specific example of this, but if you go to the example page it would be either "Markers with Options" or a combination of "Markers with Options" and "DOM Elements / Popup":

1. The simplest (and maybe best) is to detect the click and open a modal over the map. The cost is something pops up over the map and not where you clicked. The advantage is you can have much more space to show information (which is good if you have a lot), and it's always in the same position, so the user is never lost.

2. The other option is when a marker is clicked, you create a "Popup" <gmaps-popup> at that location and you can put anything you want in there. The first issue is that if the popup is too big it doesn't look good. The other issue is if someone clicks on a marker near the edge of the map, you will need to do something different because the popup may not be completely visible.

If you have another idea you'd like to share, or a specific question about this, I'm happy to try and help.

[kossa]

Finally I did it here is the code may be will help someone

<template>
    <div style="height: 70vh">
        <gmaps-map :options="mapOptions">
            <gmaps-info-window v-for="marker in markers" :key="marker.id" :options="marker">
                <div class="text-center">
                    <img :src="marker.user.avatar" alt="" width="48" class="img-thumbnail rounded-circle">
                    <p class="m-0">{{ marker.user.name }}</p>
                    <a :href="marker.user.public_path">See profile</a>
                </div>
            </gmaps-info-window>
        </gmaps-map>
    </div>
</template>

[xon52]

@kossa just note that the InfoWindow is actually a Google Maps component in a Vue wrapper. The issue with the InfoWindow is that close button. The only way to hide it is with a CSS hack which is pretty messy, so that's why I made the <gmaps-popup> component (which doesn't have the close button).

Yours looks good, and if you're happy, so am I; but if you want to remove the close button, use <gmaps-popup> instead 😉

[kossa]

Great idea thanks