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