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

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>

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 20 (2 by maintainers)

Most upvoted comments

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>

+11

austinlarue on Mar 31, 2017

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:

Created an Interface named marker: interface marker { lat: number; lng: number; label?: string; draggable: boolean; }
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 );

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.

nileshkmahant on Jul 27, 2016

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

georgibakken on Jul 27, 2016

@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.

pramttl on Jul 7, 2016

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

sebholstein on May 12, 2016