Map element multiple locations

How To
1

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?

2

are you imagining something like this?

image

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 not google.

you can make maps like this with umap easily uMap

3

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 :slight_smile:

Endre

4

https://leafletjs.com/examples.html

5

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

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.