How do I embed a tracking map
-
Hi, I want to embed a tracking map into my WordPress site (https://wordpress.com/page/flyingfishsail.wordpress.com/419) showing the progress of my sailboat on its transoceanic journey. The map I want to embed is: https://forecast.predictwind.com/tracking/display/Flyingfish
Thank you, Jeffrey Cardenas s/v Flying Fish http://www.FlyingFishSail.comThe blog I need help with is: (visible only to logged in users)
-
Ability to embed content on WordPress.com posts and pages depends on the type of code. What kind of code are you embedding?
If it’s JavaScript, flash and other types of embed that use; frame, iframe, form, input, object, textarea, these are not allowed on WordPress.com Premium plans and below. They are allowed only on WordPress.com Business plan. Learn more about it here.
Also, here is a list of embedded content supported on WordPress.com.
Let me know what your code type is and I can answer further if you have questions.
-
Thank you Strikebuys.
I don’t know code (I will learn it, I promise). Here are the instructions that I have been given by the tracking map company PredictWind:
You can use the link below to insert your tracking link into your Blogspot account.
<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”INSERT YOUR TRACKING LINK HERE (https://maps.google.com/maps/ms?hl=en&ie=UTF8&t=p&source=embed&msa=0&msid=202560162611586008199.00046d23b9b927da437d4&ll=13.923404,-159.609375&spn=142.912602,210.9375&z=1&output=embed)”></iframe> Users will need to adjust the width and height according to their needs.The map I want to embed is: https://forecast.predictwind.com/tracking/display/Flyingfish
-
Alternatively, the tracking map company suggested this:
Please see the Codepen example at http://codepen.io/anon/pen/BoPbXp with a few options of how you can add the iframe.
You can use a simple iframe embed, the styled one (no border and specific sizes), or a responsive one, that will scale up and down for mobile/desktop:
Please paste any of these options into the WordPress editor (click on the ‘html’ tab at the top of the wysiwig editor).Codepen is like hieroglyphics to me. Any help to get that map on my site would be greatly appreciated.
-
Thanks for sharing the code. It’s a iframe code.
As mentioned on this section, you will need to get the WordPress.com Business plan to use iframe codes on your WordPress.com site.
Alternatively, you can embed the Pen itself from CodePen. As mentioned on this page, copy the URL of your Pen and paste it on a line by itself in your Visual editor. Make sure that it is not hyperlinked.
In your case, the Pen link is “https://codepen.io/anon/pen/BoPbXp”
Paste this on your WordPress.com post or page, and you will be able to see the Pen embedded there.
This will not look like a native embed though. It would rather be a CodePen playground embedded.
If you need to natively embed the actual iframe code though, you should upgrade your plan to WordPress.com Business plan which you can do on this page.
Hope this helps. Feel free to get back if you questions and I will be keen on helping through it!
-
Thank you so much Strikebuys. You are the first person who has explained this to me in a way that I can understand it.
Happy New Year.
Jeffrey -
- The topic ‘How do I embed a tracking map’ is closed to new replies.
WordPress.com Forums 