Embed Map with Filter Bar on other site pages

[simoncarr]

Hi,

I am using the map on the /events/map/ page.. The map shows with the listing of events beneath.

However – I also need to be able to display the same map + filterbar on the website homepage. Is there a way to accomplish this with a shortcode, or PHP echo. Or possibly using an iFrame?

Secondly – the homepage map should not show the events list beneath the map. As a last resort, I could potentially remove this data by targeting the div with display:none.

Any help would be greatly appreciated! Thanks.

-Simon

[Barry]

Hi Simon,

There’s no built in mechanism for this, I’m afraid, and so you’d really need to get creative when building your solution.

Unsupported, third party plugin Event Rocket allows you to place your main events page on the front page of your blog – so potentially you could leverage that (and customize your map view template so that – when viewed on the homepage only – the list of events is removed).

If that doesn’t quite fit your needs it may still be worth exploring how it works and then modify/repurpose code to suit.

Otherwise I’m not sure there’s too much we can do to help with such a specific customization, but do remember we’re always open to new ideas and feature requests if you think this is something that would benefit others generally 🙂

I hope that helps!

[simoncarr]

Hmm. I would rather not load the entire events page on the homepage if possible.

Is it possible to have the Events Calendar MAP setup in a widget? If so, I could then load the widget on the homepage.

Thanks.

[Barry]

I’m afraid not, again that isn’t currently supported out of the box and would need to be built as a further customization if you need this in the short term.

[simoncarr]

After doing a bit of research I found a jQuery method for pulling in a DIV from a specific page. Code below:

<script> 
	$(document).ready(function(){
		$('#mydiv').load('http://mysite.com/ div#tribe-geo-map-wrapper');
	})
 </script>

In my testing this worked well for any kind of informational div.. But the Google Map in particular would not get pulled in using this technique. Any ideas why this might be? I’m not sure if its because the map hasn’t loaded prior to getting pulled in with this JS code.

Thanks.

[simoncarr]

Looks like my code got mangled on submission.. Here’s the example:

[simoncarr]

trying this again.. pastebin.com/bywLQgfL

[Barry]

I’m not sure if its because the map hasn’t loaded prior to getting pulled in with this JS code.

That sounds like a fair guess to me 🙂

Even if the markup used to house the map is obtained via a get request, it will do nothing without the supporting scripts (and data such as the locations of the pinmarkers, etc) that bring it to life.

As this is very much custom development territory I’m afraid we’re not going to be able to assist further on this occasion – and I will now go ahead and close out this topic. Of course if any other issues arise that we might be able to assist with please don’t hesitate to post fresh forum topics and one of the team will be only too happy to help.

Thanks again!

[Author]

Posts