Shift marker by given specific user input

Question

<template>
   GmapMarker
   v-for="(marker, index) in markerArray"
   :key="index"
   :position="marker.position"
   @dragend="getCoordinates"
   :draggable="true"
  />                              
</template>

<script>


 methods: {
 getCoordinates: function(e) {
 //log of the lat and lng of where the pin is currently situated.
     }
}
</script>

I am currently using vue2-google-maps plugin, however, I am trying to figure out how could I get the marker to shift by giving a specific street number and street name. By enabling the pin to be draggable and by getCoordinates() I am able to get the Lat and Lng of a specific place, however, I would like to make the pin shift based on the street number and/or street name given.

Answer 1

I have found the solution by using this endpoint:

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

Instead of the actual address, I have concatenated the variables that are storing these, so then whenever one of them changes, I am doing this API call, where I get in return the Lat and Lng along with another bunch of stuff, and then is here where I push the coordinates into my markerArray, and the pin shift accordingly.

Ref: https://developers.google.com/maps/documentation/geocoding/intro