Move the marker based on the specific user input provided

<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'm utilizing the vue2-google-maps plugin at the moment but I'm exploring ways to make a marker move by inputting a specific street number and name. Through enabling the draggability of the pin and using getCoordinates(), I can retrieve the coordinates of a particular location. However, my goal is to have the pin move based on the provided street number and/or street name.

Answer №1

After some exploration, I came across a solution utilizing the following endpoint:

https://maps.googleapis.com/maps/api/geocode/json?address=1234+Example+Street,+Sampleville,+AB&key=YOUR_API_KEY

By concatenating variables storing address components rather than using a static address, I can dynamically update my API call to retrieve latitude and longitude information. This data is then used to populate my markerArray, adjusting pins accordingly on my map.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to recycle SASS @mixin: Repeating previous parameter value

I am attempting to give 3 circle icons a glowing effect using a Sass @mixin with Font Awesome icons. _mixins.scss @mixin textGlow($glowColor: 0){ @keyframes glow{ from { text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px ...

Tips for uploading a file with AngularJS using the multipart/form-data format

Looking for guidance on uploading an image using AngularJS with a REST API that requires Content-Type:multipart/form-data. Content-Type:multipart/form-data www.abc.com/images/id Request Body { // --Boundary_1_1626119499_1392398808202 // Conten ...

Why isn't my callback working? Can anyone help me figure out what I did wrong?

I'm currently facing an issue while making an asynchronous call to Redis and attempting to utilize a callback to inform async.js about the completion of the query. I am consistently receiving an error message stating "callback is not a function". Can ...

Progressive Web App (PWA) default start URL

I am currently facing an issue with my Vue app, which is also a Progressive Web App (PWA). While the PWA functions correctly as planned, I realized that I am using generic paths for my web application. This means that in order to access the correct page, ...

Learn how to upload an image using Vue.js and then trigger a custom method

Greetings! I am a newcomer to Vue.js and I have encountered a problem that I need help with. In my component, there is a hidden input for files. When I click a button, the browser displays a window for importing files from my PC. Once I choose a file, I wa ...

Is it possible to refresh data efficiently using web scraping tools, similar to how it

While researching web scraping in Python, I consistently found references to BeautifulSoup and Selenium as the primary tools for retrieving HTML and JavaScript content from websites. One thing that has eluded me is finding a method to automatically update ...

Show a JS file variable in an HTML document using a Pug file

Two types of files are in question here. The first one is a pug file: doctype html html head meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') link(href=& ...

The ng-scope class in AngularJS is failing to be applied

While exploring the Angular Tutorials, I noticed an interesting detail in their example where the ng-scope CSS class is added to each element with a directive. If you want to check out the tutorial for yourself, here's the link: Angular Tutorial on S ...

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

New to NodeJS: Utilizing Requestify to Retrieve Data from Another URL

As a newcomer in the world of NodeJs, I am faced with the task of transitioning my CodeIgniter server APIs to Node.js. Currently, I am utilizing requestify to retrieve data from a web service, and once this is accomplished, I intend to invoke an insert met ...

The form validation feature is not functioning as expected when integrating mui-places-autocomplete with MUI React

I'm currently working on implementing an autocomplete feature using Google Places API in my project with Material UI React, Redux-Form, Revalidate, and MUI-Places-Autocomplete. Although I've successfully integrated the place lookup functionality, ...

Can you provide a basic illustration of how routes are implemented in AngularJS?

After searching through numerous examples of using Routes with Angular, I have unfortunately not been able to find a working solution. Even the example provided in the official guide did not work properly (clicking on it resulted in a wrong URL that did no ...

Implement a FOR loop in conjunction with an AJAX request

My goal is to send an AJAX request with multiple form fields and use an array for validations. I would like to also pass these values via AJAX: Although I haven't used a for loop in JavaScript before, it looks familiar. The current approach of the l ...

The presence of the If-Modified-Since header causes the CORS OPTIONS request to experience failure

When using a custom header (If-Modified-Since) in the code below, it causes ajax to fail with a status of HTTP/1.1 405 Not Allowed for the OPTIONS preflight request. However, if the header is removed, the request works as expected (I am unsure if OPTIONS i ...

Creating a dynamic drop-down menu using a single database table in CodeIgniter

Table https://i.sstatic.net/yw7d0.jpg I need the district names to dynamically change based on the Category selection. For example, when I select Category 1 from the drop-down, only the district names under Category 1 should be displayed, and the same fo ...

I'm attempting to retrieve information from my vuex store, however, encountering an error in the process

I've encountered an issue with vuex getters while working on my project. I have a route that showcases all users, and upon visiting this route, the AllUsers.vue component is displayed. Within this component, I'm utilizing the UsersList.vue compo ...

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

Enhance the "content switcher" code

I have been working on improving my "contenthandler" function. It currently changes different articles when I click different buttons, which I am satisfied with. However, I believe there may be a better approach to this and would appreciate any advice on h ...

Creating a Dropdown list using Javascript

I am currently working on implementing inline CRUD operations in MVC 5. When a user clicks a specific button to add new records, it should create a dynamic table row. Below is the JavaScript code I am using: function tblnewrow() { var newrow = ' ...

Changing the Default Title Presentation in Magnific Popup Using Custom HTML Elements

When utilizing Magnific Popup to generate an image gallery with customized titles containing HTML content, I am facing a challenge. The popup consistently displays the default title attribute value instead of my specified custom title, despite attempts to ...