0

I am using google map in angular project (ngx-google-places-autocomplete and angular/google-maps). Functionality is like user can select location and its latitude and longitude gets store. Now depending on lat, long stored, I need to display google map and marker on that co-ordinates.

HTML

   <google-map 
                  width="400px"
                  height="280px"
                  [zoom]="zoom"
                  [center]="initialCoordinates"
                  [options]="mapConfigurations">
                  </google-map>

ts

export class SampleComponent implements OnInit {
  myDetails: any = [];
  mylat: string = "51.076101702905575"; // default lat
  mylong: string = "10.867780927493548"; // default long
  zoom = 12;
  initialCoordinates = {
    lat: +this.myLat,
    lng: +this.myLong,
  };
  mapConfigurations = {
    disableDefaultūI: true,
    fullscreenControl: true,
    zoomControl: true,
    mapTypeId: "roadmap",
    scrollwheel: false,
    disableDoubleClickZoom: true,
  };
  ngOnInit(): void {
    this.getDetails();
  }

  getDetails() {
    this.myService.getDetails(this.formData).subscribe((data) => {
      if (data["status"] === false) {
      } else {
        this.myDetails = data["data"];
        this.myLat = this.myDetails.latitude;
        this.myLong = this.myDetails.longitude;
      }
    });
  }
}

Above code displays map with default lat, long set everytime. myLat, myLong variables always takes that default values. It does not overwrites with database values which I am setting in getDetails function. As a beginner to angular, I am not sure how I can achieve that.

How I should set database fetched lat, long to google map and show marker on that?

please help and guide.

ganesh
  • 416
  • 1
  • 11
  • 32
  • Are you sure you are passing the new values of your coordinates to the `initialCoordinates` which is the value of your center? I can see a lil bit of typo in your `getDetails` you are calling `this.myLat and this.myLong` but it seems that the variable you are using should be `this.mylat and this.mylong`. Also, have you tried changing the coordinates in `this.initialCoordinates` directly instead ? Additionally, can you put your code in sandbox? You can use [stackblitz](https://stackblitz.com/) – Pagemag Dec 13 '21 at 04:26
  • @Pagemag I have checked typo in my code. It was correct. Just here that typo was there. Corrected it. Sorry for that. I will not able to create stackblitz as values are coming from backend. Somehow I need `initialCoordinates` change values after/in call of function `getDetails`. so that it will not take default value and will take database. I am not sure how I can do that. – ganesh Dec 13 '21 at 05:17

0 Answers0