# Map element multiple locations

**URL:** <https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452>\
**Category:** How To\
**Created:** [August 19, 2024, 10:14pm UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452 "2024-08-19T22:14:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![endre](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/endre/32/16740_2.png) [@endre](https://forum.bricksbuilder.io/u/endre)\
**Post date:** [August 19, 2024, 10:14pm UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452/1 "2024-08-19T22:14:06Z")

</div>

I am playing with the map element and it has support to add multiple locations into the element it self. It also have the support for dynamic data, but I can not figure out how to get this data from a custom post type using a query loop.  
Or to be correct I can add a query loop, but then I get multiple maps.

Am I missing something?

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [August 20, 2024, 8:30am UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452/2 "2024-08-20T08:30:33Z")

</div>

are you imagining something like this?

![image](https://forum.bricksbuilder.io/uploads/default/original/3X/1/6/16db4d9ae62d6454c4e4b205534acfbbb7445ccc.jpeg)

you cant make it with bricks no  
you need plugins or custom codes for that.

and if you are going to that I would recommend [osm.org](http://osm.org) not google.

you can make maps like this with umap easily [uMap](https://umap.openstreetmap.fr/en/user/sinanisler/)

---

<div class="post-metadata">

**Author:** ![endre](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/endre/32/16740_2.png) [@endre](https://forum.bricksbuilder.io/u/endre)\
**Post date:** [August 20, 2024, 11:15am UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452/3 "2024-08-20T11:15:38Z")

</div>

Hello @sinanisler Thanks for the reply.

I am trying to reduce the number of extra plugins I use, so I will look at the custom code route.  
If anyone have example code, feel free to share 🙂

Endre

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [August 20, 2024, 11:38am UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452/4 "2024-08-20T11:38:31Z")

</div>

[https://leafletjs.com/examples.html](https://leafletjs.com/examples.html)

---

<div class="post-metadata">

**Author:** ![endre](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/endre/32/16740_2.png) [@endre](https://forum.bricksbuilder.io/u/endre)\
**Post date:** [August 20, 2024, 12:08pm UTC](https://forum.bricksbuilder.io/t/map-element-multiple-locations/25452/5 "2024-08-20T12:08:56Z")

</div>

I made this prototype for a custom function that loads the data from a CPT called locations.

```auto
add_filter( 'bricks/element/settings', 'add_locations_to_map', 10, 2);
function add_locations_to_map( $settings, $element ) {
    if ( $element->name === 'map' ) {
        
        $args = [ 
            'post_type' => 'locations',
			'posts_per_page' => '-1',
			'post_status' => 'publish'
        ];  
        $posts_query = new WP_Query( $args );
        $posts = $posts_query->posts;
        
        $output = [];
        
        foreach ($posts as $key=>$p) {
            $location = [
                'id' => $p->ID,
                'address' => $p->google_address,
                'infoTitle' => $p->post_title
            ];
            $output[] = $location;
        }

        $settings['addresses'] = $output;
    }
    return $settings;
};

```

Not pretty and you will have to add more of the parameters to the addresses array, but it works.