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
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.
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]
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. **
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.
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.
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/
