How to Embed a Trip Map on Your Website

Embedding a trip mapped with TripHappy is a great way to add rich content to your travel blog or website. Show your readers where you've traveled and the routes you've taken. Embed your itinerary directly into your blog posts! You don't even need an account, but if you do create one there are other ways to promote your blog to our thousands of users.

Creating a Travel Map

First things first, you have to Map a Trip before you can embed it! Check out our how to guide on creating a trip.

Embedding Step 1: Get the Javascript

From any trip on our site, not just your own, head over to the upper right corner.

Map your trip on TripHappy

Click on 'More'

Click more in the upper right corner to embed your trip on TripHappy

Click on 'Embed'

Click embed to embed your trip on TripHappy

Set the dimensions of the embeddable map as it will appear on your travel blog or website. Set the width and height in pixels, or click "100% Width" to have the map fully fit the width of your page. Note that you'll still have to set the height in pixels if you select the 100% width option.

Set the dimensions of your embeddable map on TripHappy

Finally, click "Generate Code" to reveal the Javascript code of your embeddable map.

Copy the JavaScript code of your embeddable map on TripHappy

Embedding Step 2: Copy the Javascript into Your Blog

Embedding with Wordpress

Go to your Wordpress dashboard and either create a new post or edit an existing one.

Start with your Wordpress blog post to embed your trip on TripHappy

Edit your blog post and copy the embeddable map Javascript into your post. Where you paste the code determines where it will appear within your blog post.

Add the embed map JavaScript to your Wordpress blog post to embed your trip on TripHappy

Your map will now be embedded into your blog post.

Your TripHappy travel map is now embedded in your Wordpress blog post

Wordpress Video Tutorial

Prefer watching a video? Check out our video below on how to embed a trip with Wordpress

Embedding with Blogger

Go to your Blogger homepage and either create a new post or edit an existing one.

Start with your Blogger blog post to embed your trip on TripHappy

Switch to the 'HTML' view and copy the embeddable map Javascript into your post. Where you paste the code determines where it will appear within your blog post.

Add the embed map JavaScript to your Blogger blog post to embed your trip on TripHappy

Your map will now be embedded into your blog post.

Your TripHappy travel map is now embedded in your Blogger blog post

Blogger Video Tutorial

Prefer watching a video? Check out our video below on how to embed a trip with Blogger

Embedding with Weebly

Go to your Weebly blog and either create a blog post or edit an existing one.

Start with your Weebly blog post to embed your trip on TripHappy

Drag the 'Embed Code' button from the 'Basics' section into your blog post. Copy the embeddable map Javascript into the 'Embed Code' section in your blog post. The map will be placed in your blog post where you place the 'Embed Code' button.

Add the embed map JavaScript to your Weebly blog post to embed your trip on TripHappy

Your map will now be embedded into your blog post.

Your TripHappy travel map is now embedded in your Weebly blog post

Weebly Video Tutorial

Prefer watching a video? Check out our video below on how to embed a trip with Weebly

Embedding with Wix

Go to your Wix blog and either create a blog post or edit an existing one.

Start with your Wix blog post to embed your trip on TripHappy

Go to the 'HTML' section and copy the embeddable map Javascript into your post. Where you paste the code determines where it will appear within your blog post.

Add the embed map JavaScript to your Wix blog post to embed your trip on TripHappy

Your map will now be embedded into your blog post.

Your TripHappy travel map is now embedded in your Wix blog post

Wix Video Tutorial

Prefer watching a video? Check out our video below on how to embed a trip with Wix

Looking for Other Ways to Promote Your Travel Blog?

Learn how to promote your blog with TripHappy

Check out our guide on promoting your blog with TripHappy for more information.

Sound Good? Sign Up Below and Start Mapping Your Trips Now!


← Back to Blog