CODEWITHSUNDEEP
javascriptiosangulargoogle-mapsagm-map
N.Sam
N.Sam

Reputation: 1

agm-map angular6 on iphone(safari and chrome) rendering problem after zoom or marker position change

I am using agm-map in my angualr 6 web application. it works fine on android devices also on pc. but on iphone i get this problem when zooming or when the marker change its position. if i touch the map the "not rendered" spots will be rendered and the map shows correctly again. i tried to trigger this.agmMap.triggerResize() on (zoomChange)(centerChange)(boundsChange) but did not help.

.html
<div *ngIf="isDelivery" style="margin-bottom: 25px">
   <agm-map #AgmMap  (zoomChange) ="triggerResize()" (centerChange)="triggerResize()" (boundsChange)="triggerResize()"
     [latitude]="lat" [longitude]="lng" [zoom]= 14 [streetViewControl]=false [disableDefaultUI]=true
     [disableDoubleClickZoom]=true [fullscreenControl]=true [zoomControl]=true [gestureHandling]="cooperative"
     [clickableIcons]=false>
     <agm-marker [visible]="dsService.isMarkerVisible" [latitude]="lat" [longitude]="lng"></agm-marker>
   </agm-map>
</div>



.ts
import { AgmMap } from '@agm/core';
@ViewChild('AgmMap') public agmMap: AgmMap;
triggerResize(){
    this.agmMap.triggerResize().then(x=>{console.log(x)}).catch();
  }
  private trackMe() {
    if (navigator.geolocation) {
      this.watchID = navigator.geolocation.watchPosition((position) => {
        this.dsService.isMarkerVisible = true;
        this.currPosition = position;
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
        this.agmMap.triggerResize().then().catch();
      }
        , (error) => {}
        , { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true }
      );
    }
  }

.css
agm-map {
  height:250px!important;;
  width: 100%;
}

Upvotes: 0

Views: 817

Answers (1)

Akhilesh Sehgal
Akhilesh Sehgal

Reputation: 186

Instead of using Lat, Lng separately. Create an object say UserObj = { Lat : 0, Lng: 0 } Most of the time this fixed the issues for me.

Upvotes: 0

Related Questions