Map Widgets for Your Web Page or Blog
One of the cool new features that we’ve been working on is the option to add travel maps to your own web page or blog. This post is intended as a “quick start” guide for embedding travel maps, and to showcase the new functionality.
TripTracker map widgets can be used to display any publicly accessible trip. They come in three flavors:
- Animated badge – Displays a small map which is animated to emphasize your journey.
- Mini map – Displays your trip on a static map, linking back to your TripTracker journal.
- Interactive map – A large, fully interactive map for viewing your travel journal.
The following sections cover each type of travel maps separately, but before we continue, a note for those of you who might find this guide just a little bit too technical… We’re working on a wizard which will make the process of embedding travel maps even easier, and will also allow basic customizations of their appearance.
Animated badge
Below is a sample badge displaying Voranc’s trip to New Zeland. By default, the size of the animated badge is 175 pixels (width) by 250 pixels (height). The full area of the badge links to your TripTracker travel journal.
To embed an animated badge, copy the code below and paste it at the desired location in your web page or blog. Replace the [TRIP_ID] tag with the numeric identifier of your trip (*).
<script type="text/javascript" src="http://triptracker.net/trip/[TRIP_ID]/badge"> </script>
Mini map
An example of the mini map widget displaying braco’s trip to SE Asia is shown below. The default size of the mini map is 320 pixels (width) by 240 pixels (height). The full area of the mini map links to your TripTracker travel journal.
To embed a mini map, copy the code below and paste it at the desired location in your web page or blog. Replace the [TRIP_ID] tag with the numeric identifier of your trip (*).
<script type="text/javascript" src="http://triptracker.net/trip/[TRIP_ID]/minimap"> </script>
Interactive map
The interactive map widget allows you to embed a large map of your trip on your web page or blog. An example of an interactive map embedded in a web page can be found here. Your visitors can use the interactive map to explore your journey, read journal entries and view photos from your trip. At 800 pixels (width) by 620 pixels (height), the interactive map requires quite a bit of real estate on your web page in order to be displayed properly.
To embed an interactive map, copy the code below and paste it at the desired location in your web page or blog. Don’t forget to replace the [TRIP_ID] tag with the numeric identifier of your trip (*).
<script type="text/javascript" src="http://triptracker.net/trip/[TRIP_ID]/embmap"> </script>
—
(*) How do I determine the numeric identifier of my trip?
You can find the numeric identifier of your trip in your browser’s address bar when viewing your trip on TripTracker.net. For example, if the address of your trip is http://triptracker.net/trip/263/, the [TRIP_ID] tag should be replaced by 263.