Recently a customer needed a map with custom icons rather than the regular map maker icons that come with Google maps. He wanted it to look something like this so each icon represented a different type of store.
To do this you’ll need 3 things:
1) A custom post type with Toolset Custom Fields set up
2) A View that calls this info
3) A page to display it on.
To find out the basics about creating a map in Toolset with multiple markers, read my post here. I’ll assume that you’ve already read that article about the custom fields and I’ll move right on to creating the View.
Creating the View
1) Toolset > Views > Add New and then name your view something descriptive
2) As per the image below, select your CPT.
3) Next you’ll choose how you want the pagination of your CPT to work and then scroll down and add your filters. You can see from the image above that I only chose the text search, per your mock up, but you can choose other filters in the Query Filter area as well. In the screenshot below, you can see that I added the search and button, and I did this by clicking on the buttons at the top which automatically generated the shortcode below.
4. The next part is the loop editor, and you’ll use the loop wizard to automatically generate part of this.
When you use the Loop Wizard, let it make a Template for the loop. This helps keep things separated and a little easier to understand what is where. The Template will be shown below the Loop Editor. You can see the template below and you will notice that you see there everything listed on the right hand side. This is where you put in the custom fields like the shop name, phone, website, etc. You can add more or take away from here anytime by using that Fields and Views button. Also use your own CSS here.
5. Next you will use the Fields and Views button to add a map (shown in the screenshot of the Loop Editor). Make note of the map # You’ll notice that I added the map BEFORE the <!– wpv-loop-start –> code. This is important.
6. Then you will use the Fields and Views button to add a map maker (shown in the screenshot of the Loop Editor). Be sure to use the same map # you used above. Have the shortcode handy for your custom field where you added your icon. (Find this before by using the Fields and Views button to place it temporarily.)
- The marker id will be the [wpv-post-id] shotcode to tie it to the CPT
- The marker title will be the post title (or you can change it to the shop name) *This should really be the same thing
- The marker field should be the address so that it will show on the map in the correct place
- Then you will list everything that you want to show in the popup.
See all this below.
Note that all this should be within the <wpv-loop> code and should be before the shortcode that calls the Template Loop that was automatically generated with the Loop Wizard above.
7. Once this is done, you’ll be ready to create your page with beaver builder. I placed the filter section in one row with BB, and then the results in another section within BB, to keep them separated.
As a side note, this is the CSS I added in the Loop Editor CSS section:
.one-third {
width: 30%;
float:left;
margin: 0 2.5%;
}
.two-thirds {
width: 60%;
float:left;
margin: 0 2.5%;
}
@media only screen and (max-width: 760px) {
.one-third, .two-thirds {
width: 95%;
float:none;
}
.one-third .fl-post .fl-post-content-beside, .two-thirds .fl-post .fl-post-content-beside {
padding: 0;
}
}
Leave a Reply