Embed Routes on Your Blog or WebsiteFORUMS HOME SEARCH FORUMS

We're excited to announce another fantastic new feature that we've just launched today. If you run a blog or any other type of website, you can now embed route maps from plotaroute.com directly into your web pages, in the same way that you can  embed YouTube videos. The embedded map has full animation capabilities in both 2D and 3D (for browsers with the Google Earth plugin) and gives visitors to your website direct access to detailed directions, elevation profiles and route statistics for your route. They can also print, download and share the route directly from your website.

You can embed any route that you've saved publically on plotaroute.com. Just click the SHARE icon in the Action Bar in the bottom right corner of the route planner and then copy and paste the provided HTML code into your webpage. You can choose from a variety of sizes and a full screen option is available in most browsers (requires version 11 for Internet Explorer).

Here's an example.

Thanks!

I love this feature - is it possible to autoplay when a user vists a page tried using, &autoplay=1 (as with Youtube).

Thanks again 

Ron

Thanks Ron - glad you like this.  I'm afraid there isn't an autoplay option at the moment.  I'll put it on the list to consider.

John

Hi and thanks again for this tool!

I've have Embeded some routes on my website, but find the elevation profile does not display - (Pls have a look at www.RonsSpot.uk ), it's fine if I click the route profile tool within the box and visit plotaroute.com, any advice?

Secondly - is there a list of atributes that can be used? I would like 'tweek' the default settings.

Thanks

Ron

www.RonsSpot.uk

Hi Ron - I've had a look at the maps you've embedded on your site and didn't have any problems viewing the elevation profiles.  Can you let me know what browser you were using please and I'll try it with that browser here to see if that makes any difference.

There aren't any attributes to customise the embedded maps I'm afraid other than the map type, which is set according the map you are viewing when you generate the embed code.  What sort of settings did you have in mind?

John

Hi John,

Thanks for taking the time to look at this. Just checked using my tablet (Chrome), home PC (firefox), and server (firefox and IE) all are fine. Problem occurs when using my Chromebook. A screenshot can be found here.

Re. customising

Thinking about different coloured routes for walking, cycling etc. or possibly showing route extentions, again in a different colour. I was also wondering about adding KML layers (possibly a photo layer created from my flickr acct).

Thanks Again 

Ron

I think this must be a Chromebook bug.  Thre are one or two known problems with the current version of Chrome that Google has said will be fixed in the next release, so hopefully it will right itself soon.  I don't think there is anything much we can do if it's a bug in Chrome.

Thanks for the suggestions regarding new settings.  I'll add those to the list of feature requests to consider.

John

Hi John

I agree with you, the problem does appear to be with Chrome or ChromeOS - Was on the latest stable version (43.0.2357.81) now on Beta (44.0.2403.25), problem not resolved.

Thanks for your time and effort - I rate Plotaroute very highly, and look forward to using it on a regular basis.

Ron

Great 

Is it possible to information and functions like download and just have the animation?

BR

Thomas

The embedded maps features all all included by default - there is no option to change this at present I'm afraid.  If you want to include a simple map on your blog without all the features offered by the embedded maps, your best option is to download an image of the route and use this instead.

John

Thank you John

Another question. How can i get the coordinates for the starting point on a route?

Thomas

The easiest way to do this is to download the route as a GPX Track file.  You can open this in any text editor and see all the coordinates.

John

Hi, great site.

I found a syntax to display the embedded animation in kilometers and to choose a particular map type. What other options are supported? The playback speed is a bit to fast for what i would like to do, and I would like to add the time (set the start time with a set pace, default pace of 6 is fine). Is it possible to set the playback speed in the embedded html? Is it possible to have the time of day also shown. 

/John

Hi John - glad you like ths site.  At present I'm afraid there are only two options to override the default embedded maps settings - the units and map type.  I've added your suggestion to our feature request list though (number 51), so anyone interested in this can vote for it there.

John

Thanks for the response. /John

Hello, I've embedded maps on my website https://bikingwithkidsadventure.wordpress.com/2016/05/28/wonder-filled-washington-our-route-part-1/ and the map doesn't show when I load it.  It just shows a hyperlink.  I'm on a laptop using Google Chrome.  Thanks for any help!

Derek

Hi Derek - It looks like you've just got the link to the route map on your website rather than the full HTML code needed to embed the map.  Maybe the content management system you are using has stripped out the iframe code?  You'll need to copy and paste the full embed code we provide and ensure that this unchnaged when you publish your web page. 

John

hi there

i've got the same problem as Derek H. and the map doesn't show on my wordpress blog. only the links below, even that the full html code has been inserted. any advise?

 https://www.plotaroute.com/embedmap/347539

View route map for First Try on plotaroute.com

<iframe name="plotaroute_map_347539" src="https://www.plotaroute.com/embedmap/347539" frameborder="0" scrolling="no" width="640" height="425" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe><p style="margin-top:8px;"><a href="https://www.plotaroute.com/route/347539" target="_blank" title="View this route map on plotaroute.com" style="font-family:Helvetica Neue,Helvetica,arial;font-size:11px;">View route map for First Try on plotaroute.com</a></p>

Hi - can you share the link to your blog page and I have a look at it?

John

Thanks John. Problem is, I having published it because the preview shows it doesn't work. 

Once I save it, it doesn't show on visual the map anymore only the two links,  which I've pasted below. I think WordPress is not allowing this embed map. Because once it's passed into HTML version it change the whole link, and shorten it.

Do you know WordPress blogs which could embed your map without problem?