Hot to get populated markers from an array in appery IONIC5 application

Question

I need to populate markers on the map based on a database items. So, an amount of these items can be different.

In a map component i can add markers manually, but i need it to be dynamically. How can i add markers manally

I know how to control 1 marker (lat, lng, other parameters), so i can add xx markers(manually) and then populate them with data from database. But, i know this way is to nowhere, becuase need to hide extra and what to do if need to add more then xx.

Any help is very appritiated.

Answer 1

1 Add a variable "markers" with default value empty array []. How to do it

2 Add a variable "map_center" with default value {"lat": 40, "lng": 40}.

3 Activate a map and set a "View point" for it as "map_center.lat" and "map_center.lng" accordingly. How to do it

4 Activate a marker and set for it:

• attribute "*ngFor" with value "let marker of markers".
• attribute "Latitude" with value "marker.lat".
• attribute "Longitude" with value "marker.lng". How to do it

5 On a button click use a following TS code: How to do it

//This is, actually, creates new markers on a map.
this.markers = [{"lat": 51.509865, "lng": -0.118092, "name": "London"}, {"lat": 51.481583, "lng": -3.179090, "name": "Wales"}, {"lat": 51.454514, "lng": -2.587910, "name": "Bristol"}];

//This is to change map center.
this.map_center = {"lat": 51.509865, "lng": -0.118092};