(Question) How to show the marker in my map after picking a place in autocomplete

[alchemi009]

How can I achieve this after selecting a place (text input) in autocomplete component I want to display it to my map and show also the marker on it

here is my code

and this is my function

I tried several times it took 3 days but still no progress hope someone can help me thanks!

[NathanAP]

Hello! Did you try to use these examples as base? Also, are you being able to show markers on your map? Because after that, all you need to do is to change the values of them and everything works fine :)

[alchemi009]

Hello! Did you try to use these examples as base? Also, are you being able to show markers on your map? Because after that, all you need to do is to change the values of them and everything works fine :)

Yes It show on my map :D

heres my updated code

const markers = ref([{
  position: {
    lat: 14.5069174,
    lng: 121.0409052,
  }
}])

<GMapMarker
  :key="index"
  v-for="(m, index) in markers"
  :position="m.position"
  :clickable="true"
  :draggable="true"
/>

<!-- Search -->
<GMapAutocomplete
   placeholder="Search Location"
   @place_changed="setPlace"
   :options="{
   componentRestrictions: { country: `ph` },
   fields: [`address_components`, `geometry`],
   types: [`establishment`],
   }"
>
</GMapAutocomplete>

My Real Concern was If I pick a place in autocomplete I want to show the marker on my map

Still cant find how to show it I hope you understand what I mean hahaha thanks!

[alchemi009]

I got it now :D

heres what I added

<script setup>
import { ref } from 'vue';

const center = ref({
       lat: 14.5069174,
       lng: 121.0409052,
});

const markers = ref([{
  position: {
    lat: 14.5069174,
    lng: 121.0409052,
  },
}])

const place = ref({});

function setPlace(place) {
  navigator.geolocation.getCurrentPosition(position => {
    center.value = {
      lat: place.geometry.location.lat(),
        lng: place.geometry.location.lng(),
    };
  });

    markers.value = [
    {
      position: {
        lat: place.geometry.location.lat(),
        lng: place.geometry.location.lng(),
        }
    },
      ];
}
</script>

and in my autocomplete and markers base still the same

[NathanAP]

I'm glad you handle it!

Let me know if I can help you about this again!

[alchemi009]

Sure! I will, haha thanks!