[Resolved] Map with position from custom post type in a divi site

[Author]

Posts

[cristianoT]

Hello,

I have a Custom Post Type called "experiences" I'd like to give to it a geo localization: I used custom field of type ADDRESS (is it correct?)

In my homepage I need a map with all the positions of the experiences (from the address custom field)

The thing is that I need all of this in a site with Divi theme, so I'd need a shortcode or a way to put the map in the divi homepage.

Can you help?
Thanks

[Shane]

Hi Christiano,

Thank you for getting in touch.

This is going to be a bit tricky to achieve given that you don't want to display a list of posts as well. However the methods are the same.

Will you be using the Block builder to create the view or are you using the classic editor.

Please let me know.

Thanks,
Shane

[cristianoT]

Hi shane thanks for fast answering.
I'd like to use the classic view editor and not the block builder.

usually I created a view and put the shortcode in a Divi Module.

Thanks.

PS there is not problem to show a list of post as well

[Shane]

Hi Cristiano,

In this case you can create your view to list the post.

On your divi template you can add the map shortcode like this .

[wpv-map-render map_id="my-map" map_width="400px" map_height="200px" fitbounds="off" general_zoom="6" single_zoom="15" cluster="on"]

Not the ID of the map "my-map"

Then in your view that is listing the post all you need to add within the loop tag is.

<wpv-loop>

[wpv-map-marker map_id="my-map" marker_id="my-marker" marker_title="This is a marker" marker_field="wpcf-my-marker"]This is the content of the marker popup.[/wpv-map-marker]
</wpv-loop>

Notice the use of the map_id as this must match the [wpv-map-render] shortcode for it to work. Also the marker_field is where you will add the slug of the custom field that holds the address value.

Please let me know if this helps.
Thanks,
Shane

[cristianoT]

Thanks Shane!
actually it's not working...

A few queastions to understand where I did wrong:

- the name of address field is 'location' so I made the shortcode like below. Is it correct? or do I have to modify the "marker_id" too?
- Also in marker_field do I have to put "wpcf-" before the name of the address field?

here the code inside my view loop

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="1" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-12">[wpv-post-body view_template="loop-item-in-lista-experiences"]</div>
		</div>
		[wpv-item index=other]
			<div class="col-md-12">[wpv-post-body view_template="loop-item-in-lista-experiences"]</div>
		[wpv-item index=pad]
			<div class="col-md-12"></div>
		[wpv-item index=pad-last]
			<div class="col-md-12"></div>
      [wpv-map-marker map_id="my-map" marker_id="my-marker" marker_title="This is a marker" marker_field="location"]This is the content of the marker popup.[/wpv-map-marker]
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Thanks a lot
Cristiano

[Shane]

Hi Cristiano,

Everything seems correct except that you will need to add the wpcf- prefix to the location slug. So it should be "wpcf-location"

Also you can give each marker its own ID by doing this marker_id = "marker-[wpv-post-id]". This way each marker will have its own specific ID.

Please let me know if the markers show on the map now.

Thank,
Shane

[cristianoT]

Sorry Shane but it doesn't work...
Can I gve you an access to the site so you can take a look?

Thanks

[Shane]

Hi Cristiano,

Sure i've enabled the private fields for your next response.

Thanks,
Shane

[cristianoT]

I found the solution,
the position of the wpv-map-marker must be at the beninning of the <wpv-loop> tag and not in the index=pad-last

[cristianoT]

Sorry Shane
I need more help cause it shows only one mark on the map.
Also Howw can I customize the popup?

[Shane]

Hi Cristiano,

You will need to add the marker shortcode within each of your Loop indexes.

Add it below index=1 and index=other

Also Howw can I customize the popup?

The content within the marker can be customized with HTML and CSS so if you are to add some HTML elements here with some classes then you can write some css to design the marker's popup.

Thanks,
Shane

[cristianoT]

Hi Shane, thanks a lot, everything wors fine!

Last thing.: how can I center the map in a specific place?

Thanks
Cristiano

[Shane]

Hi Cristiano,

The map should automatically center to show all the markers however you can center it to a specific coordinates like below.

[wpv-map-render map_id="map-3" fitbounds="off" general_center_lat="123" general_center_lon="123"][/wpv-map-render]

If you provide the general_center_lat="123" general_center_lon="123" parameters with the longitude and latitude that you want to center the map over then you can center it over that specific location.

Thanks,
Shane