How can I display multiple longitude/latitude on google maps using Angular 4

Question

I want to display multiple locations on a google map at the same time using json.

I am not sure how to do that. I have displayed a map but with only one position

Here is the json:

{
    "post_country": "Vietnam",
    "post_latitude": 10.4452129,
    "post_longitude": 106.4729811
},

{
    "post_country": "Kyrgyzstan",
    "post_latitude": 41.1694718,
    "post_longitude": 75.8098141
},

{
    "post_country": "China",
    "post_latitude": 34.2456501,
    "post_longitude": 108.9877602
},

I have used some values randomly in the below example

Here is my code:

<agm-map [latitude]="latitude" [longitude]="longitude" >

</agm-map>

latitude: number = 51.678418;
longitude: number = 7.809007;

<agm-map [latitude]="latitude" [longitude]="longitude" > </agm-map> — surbhiGoel
– surbhiGoel, Commented Apr 11, 2018 at 4:16
in the google maps library there is markers, add marker, remove marker, and so on, check the docs of the library you are using for this thing — Hussein
– Hussein, Commented Apr 11, 2018 at 6:18

Narendra Jadhav · Accepted Answer · 2018-06-07 12:56:51Z

2

You can try this, works for me:

HTML:

<agm-map  [latitude]="lat" [longitude]="lng" >        
    <agm-marker  *ngFor = "let post of positions" [latitude]="post.post_latitude" [longitude]="post.post_longitude"></agm-marker>
</agm-map>

.ts:

lat = 6.05246325;
log = 9.01555559;

positions = [{
    "post_country": "Vietnam",
    "post_latitude": 10.4452129,
    "post_longitude": 106.4729811
}, {
    "post_country": "Kyrgyzstan",
    "post_latitude": 41.1694718,
    "post_longitude": 75.8098141
}, {
    "post_country": "China",
    "post_latitude": 34.2456501,
    "post_longitude": 108.9877602
}]

edited Jun 7, 2018 at 12:56

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

answered Jun 7, 2018 at 12:33

DevFest Douala Wilfried11

2561 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kapcash · Accepted Answer · 2018-04-11 11:50:41Z

0

You can add some <agm-marker></agm-marker> into the <agm-map></agm-map>, according to the official documentation.

<agm-map [latitude]="latitude" [longitude]="longitude">
   <agm-marker [latitude]="lat1" [longitude]="long1"></agm-marker>
   <agm-marker [latitude]="lat2" [longitude]="long2"></agm-marker>
</agm-map>

Just replace the latitude et longitude attributes by values from your json.

See this example.

answered Apr 11, 2018 at 11:50

Kapcash

6,9902 gold badges22 silver badges47 bronze badges

Collectives™ on Stack Overflow

How can I display multiple longitude/latitude on google maps using Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related