[Resolved] Google Maps marker not showing on single post

[Author]

Posts

[gavinS-2]

I am trying to:
Display my post with a Google Map & Marker

Link to a page where the issue can be seen:
hidden link

I expected to see:
A marker for the Party Address field

Instead, I got:
Map doesn't appear to have a marker, just somewhere in the ocean.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Gavin

This issue is almost always due to the URL referrer restrictions on your Google API key.

Edit you key and remove any URL referrer restrictions.

If you re-visit your sample page I expect that you will see the map displayed correctly.

If that's the case then you can try and re-set URL referrer restrictions on your API key. I would expect something like *.site.com to work but it is not something we have control over.

Let me know if that works.

[gavinS-2]

Hi Nigel

Thanks man. I should have checked that. Sorry.

It is now showing markers. However, if you go to this page: hidden link, you can see now the markers for both posts on the page on the first map and nothing on the second?

Can you see what I've done wrong?

Thanks

Gavin

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Gavin

You are doing something atypical here.

Normally you would have one map and display all the markers on a single map.

The wpv-map-render shortcode would come before the Loop (so is rendered only once) and the wpv-map-marker shortcode comes inside the Loop, so is output for each matching post. The map has an id, and the markers use that id.

Your problem is that you have the wpv-map-render shortcode inside the Loop, so you have multiple maps, but your markers are all set to use the same map id.

So you need to generate unique ids for each map and make sure the marker uses the correct unique id.

You can do this by adding the number of the loop iteration to the map id. This is not something you can do directly with Views, but I have a general purpose custom shortcode which will achieve that.

So, add the following to your theme's functions.php file (or use a plugin such as Code Snippets) to register the custom shortcode loop-iteration:

/**
 * Add loop-iteration shortcode
 * 
 * Attributes
 * 'n' (optional) : test for nth iteration
 */
add_shortcode( 'loop-iteration', function( $atts ){

	global $loop_n;

	if ( !isset( $loop_n ) ) {
		$loop_n = 0;
		return $loop_n;
	}

	$loop_n++;

	if ( !isset( $atts['n'] ) ) {
		// no nth parameter, just return the current index
		return $loop_n;
	}
	else {
		$remainder = ( $loop_n + 1 ) % $atts['n'];
		return ( $remainder == 0 );
	}

});

To be able to use that inside a Views shortcode you need to register it at Toolset > Settings > Front-end Content in the section "Third-party shortcode arguments".

Now edit your Loop output to generate unique map IDs, something like this:

	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [wpv-map-render map_id="map-[loop-iteration]"]
          [wpv-map-marker map_id="map-[loop-iteration]" marker_id="marker-[wpv-post-id]" marker_field="wpcf-home-address"][/wpv-map-marker]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]

Your markers will then appear on the correct maps.