Google map does not appear in post preview

Hi, Stefan:

You should probably post your question on the Clean Retina support page (scroll down to the bottom of that page to post a question).

I’m not familiar with the Clean Retina theme, but most themes will strip off HTML tags/code before it displays the excerpt of a post. That is, for most themes, for any page that displays more than one post, like the index (blog) page or the category page, it will only display a short snippet of the post called the excerpt. By default, the excerpt is the first 55 words of the post. This is actually a feature of WordPress; the documentation for the_excerpt() function, which is used to retrieve an excerpt of the post, states:

If you do not provide an explicit excerpt to a post (in the post editor’s optional excerpt field), it will display an automatic excerpt which refers to the first 55 words of the post’s content. Also in the latter case, HTML tags and graphics are stripped from the excerpt’s content.

The stripping of HTML is to prevent unclosed tags from accidentally being output in the excerpt. For example, if a post contained an opening DIV tag within the first 55 words, but the closing DIV tag were somewhere after the 55th word, then you would have a DIV that extended past where it was supposed to end, which will usually cause a site to appear very screwed up. Same thing with an anchor (link) tag, if the opening anchor tag were contained in the first 55 words, but the closing anchor tag were not, then the link would unintentionally run on for much, much longer, until it came across another closing anchor tag. So that’s what I think is happening with your Google maps code, it’s being stripped out from the excerpt.

Note, though, that the first part of the quote says that HTML code is stripped off only if you do not provide an explicit excerpt. That is, if you look at your post editor, underneath the field where you enter a post should be another field labeled Excerpt. If you don’t see one, then click on the Screen Options tab in the upper right corner of the post editor window (right under where it says Howdy, yourname), then check the box that’s labeled Excerpt. In the excerpt field, you can create your own post excerpt complete with HTML tags, and it should output correctly if the theme developer makes use of that field.

So what I would try is to create an excerpt that contains your shortcode into the Excerpt field of a post and see if it works.

Hi “CrouchingBruin”,

Thanks for your quick reply. I’ve been on vacation and therefore my answer is pretty late. Apologize for that. I’ve tried using the “EXCERPT” field as you’ve described but unfortunately when entering the following piece of code in the excerpt field it will be displayed as pure text and the map won’t be shown as a map in the preview:

[map style="width: auto; height:400px; margin:20px 0px 20px 0px; border: 1px solid black;" maptype="OSM" gpx="https://www.mysite.com/wp-content/uploads/2013-10-15_16-56-07-1.gpx"]

Furthermore I’ve tried to move this topic to the correct category as proposed by yourself. Unfortunately I do not seem to be able to change the forum category. Am I right in saying that I need to delete this one and create a new one in the correct category?

Best Regards,
Stefan

I am also new to WordPress and have installed the Google Maps plug in. I get the short code for the map but when I copy it into my blog page there is no HTML tag only Text. How can I post the code in?

Thanks so much for someones help

@jackiemcavoy – the TEXT editor is the same as the HTML editor – it was renamed in WP3.5.

Please start your own thread if you need further help.

OK, I installed the Clean Retina theme and the Google Maps GPX Viewer, I created a post with a Google maps page, and this is how I got the maps to display on excerpts. This may or may not be too much trouble for you; I don’t know how skilled a coder you are, it took me about 20 minutes to put together.

1) Create a child theme of Clear Retina.

This is because the plugin’s code libraries are only included when the shortcode is inserted in a post or page. When it’s not used, the libraries don’t get included. For the child theme, I created a style.css file (which only imports in the style.css file from the parent theme, Clear Retina) and I copied over the header.php file.

In the child theme’s copy of header.php, I copied in these libraries for the viewer just before the closing /head tag:

<!-- start google maps gpx plugin api loader -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("maps", "3", {other_params:"sensor=false&libraries=places,panoramio"});</script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/js/gmap_v3_size.js"></script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/js/gmap_v3_gpx_overlay.js"></script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/js/gmap_v3_wms_overlay.js"></script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/js/gmap_v3_init.js"></script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/editor/gmap_v3_edit.js"></script>
<link rel="stylesheet" href="/wp-content/plugins/google-maps-gpx-viewer/editor/editor.css" type="text/css" />
<link rel="stylesheet" href="/wp-content/plugins/google-maps-gpx-viewer/css/gmap_v3.css" type="text/css" />
<!-- end google maps gpx plugin api loader -->
<script type="text/javascript" id="script">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript" src="/wp-content/plugins/google-maps-gpx-viewer/js/gmap_v3_elevation.js"></script>

Once you’ve created your child theme, activate it.

2) View the source of the post which contains your map.

The idea is to copy the HTML that was created by the shortcode and put it into your excerpt instead of the shortcode itself. You want to copy the code starting with the DIV with an ID of holder_map_x and continuing through until the closing script tag. You have to make sure to delete any blank lines inside the script tags, or lines with closing paragraph (/p) tags. This is what the code looks like that I copied into my excerpt field (I used a pastebin instead of copying into this post since there was so much code).

That’s pretty much it. It sounds a bit complicated, but it’s not too bad, unless you have a lot of excerpts that you need to create.

Am I right in saying that I need to delete this one and create a new one in the correct category?

You do not need to delete this thread. Go here, scroll down to the bottom of the page, and enter your question there.

If #1 above seems too complicated (making a child theme), then instead you can add the scripts to the head section of your pages using a plugin like Header and Footer. You only need to copy the script code into the plugin’s option field once (Settings > Header and Footer > Code to be added on HEAD section of every page).