how to show start point to end point route on leaflet map with all marker which lat long commung from api in agular13

user_17730160 0
Viewed 140

for example we have one bus the route is fix in that route all Bus stand covered by marker how can we do in angular with leaflet map which is show in imageenter image description here

angular12 angular13 angular
1 Answers

u can use @angular/google-maps

html

 <google-map [center]="center"
              [zoom]="zoom">

    <map-marker *ngFor="let markerPosition of markerPositions"
                [position]="markerPosition"
                [options]="markerOptions"></map-marker>

    <map-polyline [path]="vertices"></map-polyline>

  </google-map>

ts

public center: google.maps.LatLngLiteral = { lat: 13, lng: 13 };
  public zoom = 4;
  public markerPositions: google.maps.LatLngLiteral[] = [
    { lat: 13, lng: 13 },
    { lat: 13, lng: 12 },
    { lat: 13, lng: 11 },
    { lat: 13, lng: 10 },
    { lat: 13, lng: 9 },
    { lat: -13, lng: 0 },
    { lat: 13, lng: -13 },
  ];
  public markerOptions: google.maps.MarkerOptions = { draggable: false };

  public vertices: google.maps.LatLngLiteral[] = [
    { lat: 13, lng: 13 },
    { lat: 13, lng: 12 },
    { lat: 13, lng: 11 },
    { lat: 13, lng: 10 },
    { lat: 13, lng: 9 },
    { lat: -13, lng: 0 },
    { lat: 13, lng: -13 },
  ];

check this link Use Google Maps to see how u create a Key and load the maps API

user_70325790
Related