Angular-google-maps: рдПрдЬреАрдПрдо рдореЗрдВ рдереАрдо рдХреИрд╕реЗ рдЬреЛрдбрд╝реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 17 рдлрд╝рд░ре░ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: SebastianM/angular-google-maps

рдПрдЬреАрдПрдо рдореЗрдВ рдХрд╕реНрдЯрдо рд╕реНрдЯрд╛рдЗрд▓ рдХреИрд╕реЗ рдЬреЛрдбрд╝реЗрдВ
рдореБрдЭреЗ рдпрд╣ рдкрд╕рдВрдж рдерд╛
рдЯреАрдПрд╕ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ

markers: any[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    },
    {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false
    },
    {
      lat: 51.323858,
      lng: 7.255982,
      label: 'D',
      draggable: false
    },
    {
      lat: 51.293858,
      lng: 7.285982,
      label: 'E',
      draggable: false
    },
    {
      lat: 51.353858,
      lng: 7.305982,
      label: 'F',
      draggable: false
    },
    {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true
    }
  ]



  styles: [
    {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
    {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
    {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
    {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{color: '#263c3f'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{color: '#6b9a76'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{color: '#38414e'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry.stroke',
      stylers: [{color: '#212a37'}]
    },
    {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{color: '#9ca5b3'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [{color: '#746855'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{color: '#1f2835'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{color: '#f3d19c'}]
    },
    {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{color: '#2f3948'}]
    },
    {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{color: '#17263c'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{color: '#515c6d'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{color: '#17263c'}]
    }
  ]

рдФрд░ рдЗрд╕ рддрд░рд╣ рдХреЗ рдЯреЗрдореНрдкрд▓реЗрдЯ рдореЗрдВ

<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [styles]="styles">
  <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">

    <agm-marker *ngFor="let m of markers; let i = index"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label">
    </agm-marker><!-- multiple markers -->

  </agm-marker-cluster>
</agm-map>

рд▓реЗрдХрд┐рди рдирдХреНрд╢рд╛ рдереАрдо рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред рдХреНрдпрд╛ рдЖрдк рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддрд╛рдХрд┐ рдореИрдВ https://mapstyle.withgoogle.com/ рд╕реЗ рднрд┐рдиреНрди рд╕реНрдЯрд╛рдЗрд▓рд┐рдВрдЧ рдорд╛рдирдЪрд┐рддреНрд░реЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХреВрдВ

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛:

рд╢реИрд▓рд┐рдпрд╛рдБ: [] = [
{
"рдПрд▓рд┐рдореЗрдВрдЯ рдЯрд╛рдЗрдк": "рдЬреНрдпрд╛рдорд┐рддрд┐",
"рд╕реНрдЯрд╛рдЗрд▓рд░реНрд╕": [
{
"рд░рдВрдЧ": "#212121"
}
]
}

рдореИрдВрдиреЗ рдЬреЛрдбрд╝рд╛ рд╣реИ [] =

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдХрд┐рд╕реА рднреА рдЙрддреНрддрд░

рдорд╛рдирдЪрд┐рддреНрд░ рдШрдЯрдХ рдкрд░ style рдЗрдирдкреБрдЯ MapTypeStyle рдкреНрд░рдХрд╛рд░ рдХреА рд╡рд╕реНрддреБрдУрдВ рдХреА рдПрдХ рд╕рд░рдгреА рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВрдиреЗ рдЗрд╕реЗ рдкрд╣рд▓реЗ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рд╣реИред

рдХреГрдкрдпрд╛ рдЕрдкрдиреЗ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЛ рдЫреЛрдЯрд╛ рдХрд░реЗрдВ, рдЗрди рд╕рднреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреА рдХреЛрдИ рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИред рд╕рдВрднрд╛рд╡рд┐рдд рддреНрд░реБрдЯрд┐рдпреЛрдВ рдХреЛ рдкрд╛рд░реНрд╕ рдХрд░рдирд╛ рдФрд░ рдЬрд╛рдВрдЪрдирд╛ рдЖрд╕рд╛рди рд╣реИред рд╕рд╛рде рд╣реА, рдПрдЬреАрдПрдо рдореЗрдВ рд╕рдВрднрд╛рд╡рд┐рдд рдмрдЧ рдХреА рдЬрд╛рдВрдЪ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреБрдирд░реБрддреНрдкрд╛рджрди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдореИрдВ рдЗрд╕реЗ рдмрдВрдж рдХрд░ рджреВрдВрдЧрд╛ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдХреЛрдИ рдореБрджреНрджрд╛ рдирд╣реАрдВ рд╣реИ рдФрд░/рдпрд╛ рдкреНрд░рдЬрдирди рдХреА рдХрдореА рд╣реИред

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛:

рд╢реИрд▓рд┐рдпрд╛рдБ: [] = [
{
"рдПрд▓рд┐рдореЗрдВрдЯ рдЯрд╛рдЗрдк": "рдЬреНрдпрд╛рдорд┐рддрд┐",
"рд╕реНрдЯрд╛рдЗрд▓рд░реНрд╕": [
{
"рд░рдВрдЧ": "#212121"
}
]
}

рдореИрдВрдиреЗ рдЬреЛрдбрд╝рд╛ рд╣реИ [] =

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

dineshkumar20 picture dineshkumar20  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ChrisDevinePimss picture ChrisDevinePimss  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

alexweber picture alexweber  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Halynsky picture Halynsky  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

DeveloperAdd007 picture DeveloperAdd007  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ