[Resolved] Customizing the POP-UP on a map

[Author]

Posts

[perryA]

Tell us what you are trying to do?
I'm trying to format the pop-up box on the map on this page

Is there any documentation that you are following?
Yes -- this page, step nine shows a customized pop-up... but the documentation doesn't really show how it was done
https://toolset.com/learn/how-to-build-a-real-estate-website-on-wordpress/
What I really want to do is change the color of the pop-up box, add some padding and maybe a picture. I see how the information gets added to the loop -- but not how to change the look of the pop-up.

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello and thank you for contacting the Toolset support.

Check the second screenshot on this article, it shows how to customize the content of the popup https://toolset.com/documentation/user-guides/maps/display-on-google-maps/displaying-markers-on-google-maps/

You may also want to download the example of the tutorial, it is https://toolset.com/reference-site/toolset-real-estate/
In this example, we have use a content template and inserted it inside the marker with:

[wpv-post-body view_template="Part - Marker info popup"]

"Part - Marker info popup" being the name of the content template.

More info: https://toolset.com/documentation/user-guides/maps/maps-shortcodes/#wpv-map-marker

I hope this helps. Let me know if you have any doubts.

[perryA]

So here is the loop for the map view where I add the content marker with an image and description-- I gather that I did not add the content template (Marker-Info_Popup) correctly into the loop. Can you tell me what I did wrong?

[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id="map-1" map_height="400px" marker_icon="//dev.rileypalmerconstruction.com/wp-content/plugins/toolset-maps/resources/images/markers/Hospital-1.png"][/wpv-map-render]
<!-- wpv-loop-start -->
<wpv-loop>[wpv-map-marker map_id='map-1' marker_id='marker-2' marker_title="Name: [wpv-post-title]" marker_field='wpcf-commercial-address'][wpv-post-body view_template="Marker-Info-Popup"][/wpv-map-marker]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

I believe your code is correct and the popup is defined in the content template "Marker-Info-Popup".

Please allow me temporary access to your admin area, specify which page and view your working on and let me get a closer look. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Currently, you have created a View called "Marker-Info-Popup" for the marker popup instead of Content Template.

You will need to delete this view and its loop content template "Loop item in Marker-Info-Popup".
Then, create a new content template, and do not assign it to any post type. Add the following to its content:

[wpv-post-title]
[wpv-post-featured-image]
[wpv-post-excerpt]

Then update your "Map View" to use this content template:

[wpv-post-body view_template="Marker-Info-Popup"]

If this map view will show multiple items, update your marker_id on the map view so it can be unique:

marker_id='marker-[wpv-post-id]'

Let me know if this helps.

[perryA]

Thanks for the help! A few more questions--

1) Can I change the color of the background of the pop-up? If I add a div around the content it doesn't change the color of the whole pop-up box -- just the interior where the content is.

2) Now the the content appears in the marker (it pulls from the "Commercial Projects" posts), I had the title link to the post page. I set up a template (using Elementor) -- and when I set up the template I can get the fields from the post to populate the template from the one post that exists in Commercial Project (Albrigo House). But when I click on the title in the marker pop-up I get a blank page. How do I link to the post page that uses the template?

3) Now that I have the "Commercial Projects" set up -- I need another post for "Residential Projects". Do I need to duplicate everything I did for the Commercial Projects -- or is there a way I can change the post type to just "Projects" and maybe have a category set up for both Commercial Projects and Residential Projects? I need to be able to have 2 makers types on the map.

New threads created by Jamal and linked to this one are listed below:

https://toolset.com/forums/topic/custom-post-page-is-empty/

https://toolset.com/forums/topic/should-i-add-another-custom-post-type-to-distinguish-maps-markers/

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

I believe that you should style the following classes to style all the popup ".gm-style .gm-style-iw-c". Something like:

.gm-style.gm-style-iw-c {
    background: #f1f1f1;
}

You may need to play with different CSS classes. If you think that this should be customized within Toolset, please suggest it here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

However, for support rules, we are able to handle only one issue at the time. This helps us to bring you a better service and also helps other users to find all the information here exposed.
For that reason, I have split your last questions into different forum tickets, I'll be relying on each ticket.
- Single Custom post type empty: https://toolset.com/forums/topic/custom-post-page-is-empty/
- Should I add another custom post type to distinguish maps markers: https://toolset.com/forums/topic/should-i-add-another-custom-post-type-to-distinguish-maps-markers/