How can I get the new lat, lang of the user whenever the user drags the pin anywhere using google map api

Question

I'm building a web app that actually allow the user to see the marker for a selected a address. Also, I'm trying to build a feature that when a user drag the pin it should update the lat, lang value. Though I was able to get the current location of a user using the code below but the big question is How can I get the new lat, lang of the user whenever the user drags the pin anywhere? Any response is much appreciated, thank you. Btw, I am using this addon https://github.com/asennikov/ember-g-map

/component.js

    getCurrentLocation() {
      if (navigator.geolocation) {
        console.log(navigator.geolocation);
        navigator.geolocation.getCurrentPosition((position) => {
         this.set('selectedLatitude', position.coords.latitude);
         this.set('selectedLongitude', position.coords.longitude);
         this.set('hasSelectedFromAutoCompleteOrCurrentLocation', true);

         this.reverseGeoCode(position.coords.latitude, position.coords.longitude).then((resp) => {
           this.set('formattedAddress', resp);
         }).catch((error) => console.log(error));

       });
      } else {
        console.log("Your browser doesn't support geo location");
      }
    },

/template.hbs

    {{#g-map lat=cityLatitude lng=cityLongitude zoom=zoomValue options=mapOptions as |context|}}
      {{#if hasSelectedFromAutoCompleteOrCurrentLocation}}
        {{g-map-marker context lat=selectedLatitude lng=selectedLongitude onDrag=(action "getCurrentLocation") draggable=true zoom=zoomValue icon=myIcon}}
      {{/if}}
    {{/g-map}}

Answer 1

Ola @Mikelemuel, thank you for your question! 🎉

I have been able to solve your problem with a quick example application that I have created locally and I think part of the problem that you might be experiencing is that you are overloading getCurrentLocation() to do too many things 🤔 Let me explain...

Firstly I don't exactly understand what you're trying to do in your use case. I have made the assumption that because you're using the navigator.geolocation functionality that you want the map to initialise with the current location of the user and then they should be able to drag the icon around to pick a more specific location. Because of this I have moved the navigator.geolocation implementation to the init() function of the component and simplified the onDrag implementation to take the passed-in attributes.

// app/components/map.js
import Component from '@ember/component';

export default Component.extend({
  init() {
    this._super(...arguments);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.set('selectedLatitude', position.coords.latitude);
        this.set('selectedLongitude', position.coords.longitude);
        this.set('hasSelectedFromAutoCompleteOrCurrentLocation', true);

        this.reverseGeoCode(position.coords.latitude, position.coords.longitude).then((resp) => {
          this.set('formattedAddress', resp);
        }).catch((error) => console.log(error));

      });
    } else {
      console.log("Your browser doesn't support geo location");
    }
  },

  actions: {
    updateLocation(lat, lon) {
      this.set('selectedLatitude', lat);
      this.set('selectedLongitude', lon);
    },
  }
});

This will initially update the map with a marker for the current location and will then allow the user to drag the marker, which updates selectedLatitude and selectedLatitude. I have added an output to the template just to show this in action:

<!-- app/templates/components/map.hbs -->
{{#g-map lat=53 lng=-7 zoom=8 options=mapOptions as |context|}}
  {{#if hasSelectedFromAutoCompleteOrCurrentLocation}}
    {{g-map-marker context lat=selectedLatitude lng=selectedLongitude onDrag=(action "updateLocation") draggable=true zoom=zoomValue icon=myIcon}}
  {{/if}}
{{/g-map}}

<p>Lat {{this.selectedLatitude}} Lon: {{this.selectedLongitude}}</p>

You will notice that I updated the lat=cityLatitude lng=cityLongitude zoom=zoomValue values in my example just so that it would show roughly where I am 😂 that is roughly pointing at Ireland 🇮🇪

Here is an example of it working:

Note: I have already dragged the marker once so that I'm not revealing my exact location 😉 but it did work as expected on initial load 👍