Does not load sebm-google-map-marker with *ngFor | async

[krunal039]

I have service for async data to load from json file. *ngFor does create sebm-google-map-marker for all data returened but sebm-google-map does not load newly added marker.
marker.json
{ "data" : [ { "lat": 51.673858, "lng": 7.815982, "label": "A", "draggable": true }, { "lat": 51.373858, "lng": 7.215982, "label": "B", "draggable": false }, { "lat": 51.723858, "lng": 7.895982, "label": "C", "draggable": true } ] }

service.ts

getmockStores() { return this._http.get(CONFIG.baseUrls.mockstoreSelector) .map((response: Response) => <marker[]>response.json().data) .catch(this._exceptionService.catchBadResponse) }

component.ts
` getMockMarkers(){

this.mockStores = this._storeService.getmockStores()
  .catch(e => {
    this._toastService.activate(`${e}`);
    return Observable.of();
  })

})
}`

.component.html
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"> <sebm-google-map-marker *ngFor="#m of mockStores" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)"> </sebm-google-map-marker> </sebm-google-map>

[krunal039]

please any update on above issue?

[sebholstein]

hey @krunal039 - can you check if the <sebm-google-map-marker> are in the DOM after the async operation finished? Thanks!

[krunal039]

Hi Sebastian, i just updated my angular2 to latest and it has solved issue not sure it was my bad code or something with angular. but it's fixed. is there also options to set zoom auto based on all marker?

[sebholstein]

@krunal039 no, not possible right now - sorry. please open a new issue for this if you need this. so we can discuss the api details. thanks!

[pramttl]

@SebastianM
I'd like to re-open this issue. I am using angular2 rc.4 (most recent angular2 release so far) and facing this problem. The markers are loading to DOM but not showing up on the maps canvas.

  <sebm-google-map 
      [latitude]="map_focus_lat"
      [longitude]="map_focus_lng"
      [zoom]="11">

    <sebm-google-map-marker *ngFor="let center of centers" 
    [latitude]="center.latitude" 
    [longitude]="center.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>

centers is an array of Objects each object having latitude and longitude parameters. centers is loaded asynchronously via a service. Other html elements using *ngFor with centers in the template are working correctly. The markers for each center object are created in the DOM with correct latitude and longitude but for some reason they are not showing up on the map.

[leoalmeida]

I`m facing the same issue using angular.rc4.
In addition, if I resize the browser manually, the map shows up to me.

[djohnston08]

@SebastionM I'm having the same issue on rc4. Markers are not showing up on the map. The markers are showing on the dom though

[nileshkmahant]

same issue here. any solutions?

[georgibakken]

same issue here too. on angular rc3

[nileshkmahant]

Finally figure it out.
In my scenario i was getting a data from Http Service which was coming in JSON. I was binding that data's lat and lng fields in for loop. It was not working. Markers were getting created in DOM but not displaying in canvas.

This is how i figured it out:

1. Created an Interface named marker:
   interface marker {
   lat: number;
   lng: number;
   label?: string;
   draggable: boolean;
   }
2. When my data comes into observable then at subscribe method, I call other method pushMarker() when data is completely fetched:

this.observable = this.gisDataService.getEntities(dcode);
this.observable.subscribe(
data => this.data = data.map((entity:Entity) => new Entity(entity.uid,entity.alpha,entity.lat,entity.lng,entity.type,entity.tag,entity.addr,entity.desc,entity.zcode,entity.rcode,entity.dcode)),
error => alert(error),
() => this.pushMarkers() //this is where i call function on finish
);

1. Then I looped in my data and pushed it into markers array:

this.data.forEach(element => {
this.markers.push({
lat:Number(element.lat),
lng:Number(element.lng),
label:element.tag,
draggable:false
})
console.log("pushed"+element.lat+","+element.lng);
});

Note: I figured it out that when data is received in JSON it is not getting converted to number even if you map JSON to a class(as I did). But at the time of Pushing (in pushMarker() function you have to explicitly convert lat/lng to Number().

Hope it helps.

[georgibakken]

@nileshmahant Super! I needed to explicitly convert to Number(). Thank you :)

[alaor]

Thanks @nileshmahant solved my problem!

[seustachi]

I would like to re-open this one, to get the conversion in the component, instead of having to feed it the converted value

[alexjeen]

+1 for me, took me a while to figure this out and the use-case for loading markers from JSON is a pretty logical one

[austinlarue]

I just ran into this and thought I would share my work around in case anyone else runs into it.

In my ts file I added a simple method to convert a string to a number:

private convertStringToNumber(value: string): number {
        return +value;
    }

Then in the html I just pass in the lat/long to this method:

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

[code-by-nate]

Nice! May I suggest that instead of a private function, why not create a pipe to do this. It would look much nicer looking and portable. Also not much more work. I could provide an example if you want one :-)

…

On 1 April 2017 at 02:12, Austin LaRue ***@***.***> wrote: I just ran into this and thought I would share my work around in case anyone else runs into it. In my ts file I added a simple method to convert a string to a number: private convertStringToNumber(value: string): number { return +value; } Then in the html I just pass in the lat/long to this method: <sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]=" convertStringToNumber(location.longitude)"></sebm-google-map-marker> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#330 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp> .

[oldschoolbg]

Wow I was beating my head against this for over an hour before I found this issue. This worked perfectly for me:)

[cen1]

In general, my experience is that if agm-markers are visible in DOM but not shown, you probably supplied a wrong object type to ngFor in some way (either improper type as Number type mentioned above or something not containing lat and long at all which was my case). Double check what you are sending to markers array.

[sadeajayi]

I would like to reopen this issue again.
I am trying to display pre-defined markers, as well as generate markers on the screen if the user clicks on a point on the map, but using ngfor, the markers are not displaying on the map.
In my HTML file, i have

<sebm-google-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]= false
          [zoomControl]= true
          (mapClick)="mapClicked($event)">

          <sebm-google-map-marker
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m,i)"
            [latitude]="convertStringToNumber(m.lat)"
            [longitude]="convertStringToNumber(m.lng)"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"
          >

            <sebm-google-map-info-window>
              <strong>{{m.name}}</strong>
            </sebm-google-map-info-window>
          </sebm-google-map-marker>
        </sebm-google-map>

and to add and display the markers in my service.ts file, I have

  getMarkers(){
    var markers = JSON.parse(localStorage.getItem('markers'));
    return markers;
  }

  addMarker(newMarker){
    //fetch marker that are already there
    var markers = JSON.parse(localStorage.getItem('markers'));

    // Push to array
    markers.push(newMarker);

    //set markers again
    localStorage.setItem('markers',JSON.stringify(markers))
  }

[kublaios]

I too was saving the lat and long values as string objects so I had to use built in DecimalPipe like this:

... *ngFor="let pin of pins" [latitude]="pin.lat|number:'1.0-8'" ...

Official Doc: https://angular.io/api/common/DecimalPipe