Title: TraveledMap Trip itinerary: Embedded map Author: traveledmap Published: غشت 8, 2019 Last modified: مارس 28, 2026 --- Search plugins ![](https://ps.w.org/traveledmap-trip-itinerary-embedded-map/assets/banner-772x250. png?rev=3494268) ![](https://ps.w.org/traveledmap-trip-itinerary-embedded-map/assets/icon-256x256. png?rev=2136955) # TraveledMap Trip itinerary: Embedded map By [traveledmap](https://profiles.wordpress.org/traveledmap/) [Download](https://downloads.wordpress.org/plugin/traveledmap-trip-itinerary-embedded-map.1.3.0.zip) * [Details](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/#description) * [Reviews](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/#reviews) * [Development](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/#developers) [Support](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/) ## Description 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](https://www.traveledmap.com/builder), you will be able to create a brand new type of blog post in a few minutes ! The plugin is connected to [TraveledMap Trip Itinerary](https://www.traveledmap.com/services/trip-itinerary), which includes a **free version for bloggers**. A short demonstration video is worth a thousand words: ### How does it work ? 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 [Configuration video](https://youtu.be/8ksArmSB-ug) This section contains four fields: – **User id**: This is your TraveledMap user id – **Trip id**: This is the id of your trip, created on [TraveledMap](https://www.traveledmap.com)–** Disable widget**: It allows to disable the widget on a specific page – **Show markers customization**: It allows to see the marker’s icon, color and size instead of steps numbers 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. ### Use the widget 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: * **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). * **Map height**: The default map’s height when it’s not expanded. * **Widget is sticky**: If checked, the widget will be sticky to the top of the screen even if he’s not expanded. This way, it will follow the user scroll even in reduced size. * **Show roads duration or distance**: Displays extra information on roads between steps when available for your account. * **Show focused roads duration or distance**: Displays road duration or distance only for the currently focused road. * **When the map is not extended, show steps**: 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. * **Can be expanded**: Choose whether the widget will keep its default size, or if user will be able to expand its size by clicking a button (like a youtube video) * **When the map is extended, show steps**: This is the same option that you can configure for the extended map. * **When the map is extended, 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. * **Extend to top, right, bottom or left**: First, note that those options will work only if you checked the previous one. Choosing extend to top, will resize the map to fit the top of the screen when the user click the “extend” button. Moreover, as soon as the button is clicked, the map will be sticky in order to be close to the user when he reads the article. With 4 options, you can decide to expand the map whereever you want. For example, if the widget is in a sidebar on the right, you can check extend top, right and bottom. This way, the map will be “half full sized” on the right and you don’t have to change anything to your layout ! * **Margin top, right, bottom and left**: Margins are used to let some space between the map and the borders of the screen when the map is extended. Most of the time expand a map to the borders of the screen will be ugly, that’s why you can use margin and make the map fit the spacing of your theme. **Note** that the widget won’t show if your blog post doesn’t contain a trip id information (filled in the post editor). ### use the Standard map 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 customize 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. – **Show roads duration or distance**: Displays extra information on roads between steps when available for your account.–** Show focused roads duration or distance**: Displays road duration or distance only for the currently focused road. 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” When using shortcodes, make sure you use **standard straight double quotes** (`"`) around attributes. Some editors or copy/paste flows replace them with typographic quotes, which breaks shortcode parsing. **Shortcode example** [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″ show_road_duration_or_distance =”0″ show_only_focused_road_duration_or_distance=”0″] ### Define when a step should show 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. **Shortcode example** [embedded_trip_step location=”vancouver”] 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. **Note**: If your trip’s steps are not well ordered, you can edit the order on the trip edition page. You can access this page from the [Share page](https://www.traveledmap.com/share) too. ### Pricing The plugin connects to [TraveledMap Trip Itinerary](https://www.traveledmap.com/services/trip-itinerary), which includes a **free version for bloggers**. If you need more advanced usage or higher traffic limits, you can learn more on the service page. ## Screenshots [⌊Example - Gutenberg Block or shortcode / global itinerary view: /assets/example- 1-block-global-map.png⌉⌊Example - Gutenberg Block or shortcode / global itinerary view: /assets/example-1-block-global-map.png⌉[ Example – Gutenberg Block or shortcode / global itinerary view: `/assets/example- 1-block-global-map.png` [⌊Example - Gutenberg Block or shortcode / sticky map while reading: /assets/example- 2-block-sticky-map.png⌉⌊Example - Gutenberg Block or shortcode / sticky map while reading: /assets/example-2-block-sticky-map.png⌉[ Example – Gutenberg Block or shortcode / sticky map while reading: `/assets/example- 2-block-sticky-map.png` [⌊Example - Gutenberg Block or shortcode / pictures panel opened: /assets/example- 3-block-show-pictures.png⌉⌊Example - Gutenberg Block or shortcode / pictures panel opened: /assets/example-3-block-show-pictures.png⌉[ Example – Gutenberg Block or shortcode / pictures panel opened: `/assets/example- 3-block-show-pictures.png` [⌊Example - Gutenberg Block or shortcode / lock on the full itinerary: /assets/example- 4-lock-global-itinerary.png⌉⌊Example - Gutenberg Block or shortcode / lock on the full itinerary: /assets/example-4-lock-global-itinerary.png⌉[ Example – Gutenberg Block or shortcode / lock on the full itinerary: `/assets/example- 4-lock-global-itinerary.png` [⌊Example - Widget / default extendable state: /assets/example-5-extandable-widget. png⌉⌊Example - Widget / default extendable state: /assets/example-5-extandable-widget. png⌉[ Example – Widget / default extendable state: `/assets/example-5-extandable-widget. png` [⌊Example - Widget / extended state: /assets/example-6-extended-widget.png⌉⌊Example- Widget / extended state: /assets/example-6-extended-widget.png⌉[ Example – Widget / extended state: `/assets/example-6-extended-widget.png` [⌊Example - Widget / extended state with pictures: /assets/example-7-extended-widget- with-pictures.png⌉⌊Example - Widget / extended state with pictures: /assets/example- 7-extended-widget-with-pictures.png⌉[ Example – Widget / extended state with pictures: `/assets/example-7-extended-widget- with-pictures.png` [⌊How to use - metabox: /assets/metabox.png⌉⌊How to use - metabox: /assets/metabox. png⌉[ How to use – metabox: `/assets/metabox.png` [⌊How to use - Standard map block: /assets/trip-block.png⌉⌊How to use - Standard map block: /assets/trip-block.png⌉[ How to use – Standard map block: `/assets/trip-block.png` [⌊How to use - Widget configuration: /assets/widget-config.png⌉⌊How to use - Widget configuration: /assets/widget-config.png⌉[ How to use – Widget configuration: `/assets/widget-config.png` ## Blocks This plugin provides 2 blocks. * Step scroll anchor * Embedded Trip ## FAQ ### How to create a trip? To create a trip, go to [traveledmap.com trip editor](https://www.traveledmap.com/builder) 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 us at [contact@traveledmap.com](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/contact@traveledmap.com?output_format=md) ### I don’t see steps in the Embedded trip step block, what’s wrong? 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 us. ### My shortcode does not work after copy/paste, why? The most common cause is quote characters. WordPress shortcodes require standard straight double quotes (`"`) around attributes. If your editor replaced them with typographic quotes, retype them manually and the shortcode should work again. ### Why do I have to pay? 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. There is still a free version for bloggers on [TraveledMap Trip Itinerary](https://www.traveledmap.com/services/trip-itinerary). If you think you can’t handle this pricing, contact us at [contact@traveledmap.com](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/contact@traveledmap.com?output_format=md) ## Reviews ![](https://secure.gravatar.com/avatar/ca17b908edc5f6b3958709e55852fc8846aa751d0a54c09a28de3de222a4c643? s=60&d=retro&r=g) ### 󠀁[Awesome!](https://wordpress.org/support/topic/awesome-9944/)󠁿 [michalnovak](https://profiles.wordpress.org/michalnovak/) ماي 15, 2023 Great idea and excellent communication. Thank you, I'm very happy with the map! ![](https://secure.gravatar.com/avatar/6cdeab4d5cd46aa09f03abaaad812d8b1d822699400abe35fd3973d66aab7cd2? s=60&d=retro&r=g) ### 󠀁[Easy to use & good support](https://wordpress.org/support/topic/easy-to-use-good-support-8/)󠁿 [bearstudiofr](https://profiles.wordpress.org/bearstudiofr/) مارس 31, 2020 Thanks for this plugin, it works exactly as expected. Good support, now we can have nice maps to detail our company's trips ![](https://secure.gravatar.com/avatar/29155c3b16bf7288e9a5aa2972035a5581a1ff41d0288aaa8359b121e083c7bf? s=60&d=retro&r=g) ### 󠀁[Le rendu est cool et personnalisable](https://wordpress.org/support/topic/le-rendu-est-cool-et-personnalisable/)󠁿 [edgardth](https://profiles.wordpress.org/edgardth/) مارس 18, 2020 Beaucoup d'options et de paramètres qui permettent de personnaliser à se guise ![](https://secure.gravatar.com/avatar/12b1a2bba01c7be3e70bd824399e837b61fb8013fbefcc23c8df825b84ae0191? s=60&d=retro&r=g) ### 󠀁[Amazing Plugin & Support](https://wordpress.org/support/topic/amazing-plugin-support-24/)󠁿 [sambruce](https://profiles.wordpress.org/sambruce/) مارس 16, 2020 The plugin simply works perfectly. Had a few minor bugs and it was solved immediately. Hats off to the support. [ Read all 4 reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/) ## Contributors & Developers “TraveledMap Trip itinerary: Embedded map” is open source software. The following people have contributed to this plugin. Contributors * [ traveledmap ](https://profiles.wordpress.org/traveledmap/) [Translate “TraveledMap Trip itinerary: Embedded map” into your language.](https://translate.wordpress.org/projects/wp-plugins/traveledmap-trip-itinerary-embedded-map) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/traveledmap-trip-itinerary-embedded-map/), check out the [SVN repository](https://plugins.svn.wordpress.org/traveledmap-trip-itinerary-embedded-map/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/traveledmap-trip-itinerary-embedded-map/) by [RSS](https://plugins.trac.wordpress.org/log/traveledmap-trip-itinerary-embedded-map/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Creation of the plugin #### 1.0.1 * New pictures slider #### 1.0.2 * Allow fullscreen #### 1.0.3 * Fix bugs #### 1.0.4 * Disable widget on specific posts #### 1.0.5 * Fix jumping content #### 1.0.6 * Improve scrolling with map #### 1.0.7 * Improved transitions and zooming. This plugin can now be used on pages #### 1.0.8 * Released new version #### 1.0.9 * Added an option to show markers customization and fixed a bug concerning loading state #### 1.0.10 * Update to latest WordPress version #### 1.0.10 * Update to latest WordPress version #### 1.0.11 * Update to latest WordPress version #### 1.1.0 * Technical rework of the library to be compatible with the TripEmbedderJS SDK. * Improvements to handle more use cases and options * Made compatible with the latest WordPress version #### 1.1.1 * Update version and fixes #### 1.1.1 * Handle retro-compatibility with 1.0.11 #### 1.2.0 Conformed to WordPress best practices for developing blocks. Made it compatible with newer WordPress versions. #### 1.2.1 Added options for road duration and distance #### 1.3.0 Updated the embedded SDK to 1.0.8 which adds visual improvements and better UX Improved compatibility with newer WordPress versions Updated the public documentation and shortcode guidance ## Meta * Version **1.3.0** * Last updated **6 شهور ago** * Active installations **80+** * WordPress version ** 3.0.1 or higher ** * Tested up to **6.9.9** * PHP version ** 5.6 or higher ** * Language * [English (US)](https://wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/) * Tags * [map](https://ary.wordpress.org/plugins/tags/map/)[pictures](https://ary.wordpress.org/plugins/tags/pictures/) [travel](https://ary.wordpress.org/plugins/tags/travel/)[Trip](https://ary.wordpress.org/plugins/tags/trip/) * [Advanced View](https://ary.wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/advanced/) ## Ratings 5 out of 5 stars. * [ 4 5-star reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/reviews/) ## Contributors * [ traveledmap ](https://profiles.wordpress.org/traveledmap/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/traveledmap-trip-itinerary-embedded-map/)