Create interactive blog post thanks to a map moving along your trip's steps while user reads. The map can be customized to fit your theme.
This plugin will help you to produce more interactive blog posts thanks to a map, moving along your trip’s steps while user is reading the post.
The map can show your trip pictures, the steps name and is fully customizable to your needs:
You can either include a map thanks to a widget, that will be expandable on the screen depending on the options you specify, or
thanks to a map that can be “sticky”, i.e it will stay at the top of the screen while user reads the article.
By creating your trip on TraveledMap, you will be
able to create a brand new type of blog post in a few minutes !
A short demonstration video is worth a thousand words:
As explained above, this plugin aims to improve user experience by placing a map of your trip on your blog posts.
Once the plugin installed, you will have a new section on the right of the post editor, as explained in the
This section contains two fields:
– User id: This is your TraveledMap user id
– Trip id: This is the id of your trip, created on TraveledMap
To get this data, go to the map edition page of TraveledMap, and click the link button, under the name of the trip you want to embed
in your post. It will lead you to the “Embed a trip” page with the needed information.
Once you filled the two field, you need to validate in order to save and to check if the data is valid.
Then don’t forget to save the draft.
Once this step done, you will be able to have a map using either a widget or a standard map.
To use the widget, go to your admin widget management section and add the “TraveledMap Trip” widget.
The widget will include a map showing all the steps of your trip at first, then it will show the different cities or steps
along user’s reading.
You can customise the widget using different options:
Note that the widget won’t show if your blog post doesn’t contain a trip id information (filled in the post editor).
If you don’t want to use widget, that is the recommanded way to use this plugin for a better user experience, you can use the standard map.
You can place this map everywhere in your article thanks to a Block or a Shortcode. Its behavior is the same as the widget, it will move along the
location you visited while users is reading your article.
There are multiple options to customise it.
In the “Map content” section:
– Show steps name: You can decide if the name of your trip’s steps will be shown by default or not. If not checked, steps will be shown only when the mouse
is over the step marker, or the step currently scrolled.
– Show pictures: You can decide that pictures will never be visible. If this option is not checked, the pictures will be visible only if users decide
to expand the pictures panel, at the bottom of the map.
– Show overview pictures: Overview pictures are the pictures you choose as the best pictures of your trip. You can decide to show them or not with this option.
In the “Map settings” section:
– Map height can be defined in pixels (px) or percentage (%) of the screen’s height. It will define the height of the map when it’s not sticky.
– Map is sticky will decide if the map sticks to the top of the screen while user scroll to read the blog post.
– Show on phones will decide if the map will appear when a user is visiting the website with a mobile (width <= 576px).
– Show on tablets will decide if the map will appear when a user is visiting the website with a tablet (576px > width <= 768px).
– Show on larger screens will decide if the map will appear when a user is visiting the website with a larger screen than phone or tablet (> 768px).
– Height of the map in its standard height: This is the height the map will take. Either you can specify a fixed height with pixels (e.g 300px)
or you can specify a percentage relative to the screen height (e.g 40%).
– Height of the map in its extended height: Users will be able to choose whether the map is hidden, in standard height or extended height. This option
corresponds to the size of the expanded height, in pixels or percentage.
– Top margin: As the widget margins, you may want to see space between the map and the top of the screen. This is the way to configure a space.
The value is in pixels, but you have to omit the “px”. For example use “18”, NOT “18px”
[embedded_trip show_popup=”0″ show_pictures=”1″ show_pictures_at_start=”0″ map_height=”60%” is_sticky=”1″ show_on_phones=”1″ show_on_tablets=”1″ show_on_large_screens=”1″ standard_map_height=”35%” extended_map_height=”70%” margin_top=”10″]
This step explains how the magic happens…
A you can see in the video above, the map moves from step to step while scrolling the video.
In order to achieve these moves, you have to specify where your steps stands along your article. Don’t worry it’s easy to do.
Just include a Embedded Trip step Block (search for Embedded trip step) or a Shortcode and choose the step in the list.
If you don’t see any step in the list, please check that your trip has steps and that you pressed the “Validate” button in the editor’s right column.
If you’re not using block but shortcode, you will have to use locations specified on the “Embed a trip” page, where you found
your user id and trip id.
The WordPress plugin is free but to embed the map on your posts, I ask for from $0 to $49.99 by month depending on the number
of visits on your site.
You can learn more at Embed page
To create a trip, go to traveledmap.com trip editor and follow the steps.
It’s easy and it won’t take time !
If you have a lot of trips to add and you don’t want to spend time creating a map, contact me at [email protected]
To get the steps in this block, you have to validate your user id an trip id in the right column of the post edit, then save draft
and finally add an Embedded trip step block. If you still have issues, please contact me.
Embedding trips on frequently visited sites and blogs has a cost. TraveledMap tool is totally free, that’s why it seems
reasonable to charge for those fees.
If you think you can’t handle this pricing, contact me at [email protected]