[Resolved] How can I add Custom JS Code to a View, when I use AJAX Search?

[Author]

Posts

[michaelA-13]

Tell us what you are trying to do?

Hi, I have a map with several markers coming from a views loop. I would like to have all info windows open by default. Or if that is not possible add a title to each marker.

Is there any documentation that you are following?

https://toolset.com/forums/topic/auto-open-the-infowindow-of-marker-on-map-load/

[Beda]

The Title appears on hover and the Content on Click.
This cannot be changed in the Toolset Maps Plugin.

I can file a request to allow that, but I think it's not a good idea for reasons of accessibility and readability.

This may make sense on a Big map with few posts, but on a map with several close locations, this becomes a mess.
Hence I think we will stick to the default behaviour.

Once you add more posts, this will be welcome to you as well, I suppose.

Let me know if you wish to add the request.

[michaelA-13]

Hi Beda,

I can agree with you that having all info windows open might not be such a good idea.

If you could think of or request a solution where. E.g. a custom field is added as a title above the marker that would be awesome.

I tried myself with some jQuery. Taking the information from the marker title and trying to apply it to a new div but was not successful.

Michael

[Beda]

The thing is, even just the title is too much, on a map.
On hover, this is something else.

But just loading all titles of all available posts by default is something I have A) never seen, and B) I do not suggest, as it clutters the visual experience.

People, after all, also like to "discover", and a hidden hover popup can lighten a few hearts here and there 😛
(I am serious, sometimes, it's better to let the user find the information - it makes them interact more).

And, the real stopper here is the look.

With one or 2 posts this can look good, but not with 200, clustered and spyderfired.

I will file a request, but I do not see a good way to implement this.

For now, I suggest to rely fully on the hover - this is the smoothest and visually most controllable.

Also think of mobile screens, where such constantly popped up info windows can just me a showstopper.

[michaelA-13]

Hi Beda,

thanks for the thought you are putting in the user experience 🙂

I attached an image to illustrate my case to you. At now time would there be more then 6 markers on the map. And they would always be far enough apart as well.

It is however necessary to title/mark them in some fashion, so the user does not have to click/hover.

In my case the user already knows the name of the location he is looking for but not necessarily the location and I don't want him having to click trough 5 locations only to find the last is the one he is looking for.

As mentioned I was looking into a jQuery solution to append a title div before the marker image but was not successful.

Best, Michael

[Beda]

It seems you will not have many different titles right?

Have you thought about using the marker itself as the "title"?
For example, you can have 5 marker images, and call them dynamically. let's say you upload those images with the exact slug as the title has, then you can later conditionally load the right marker for the right title.

Since you do not have many titles, this could be an easy, fast and visually appealing solution.

Like a marker with the title in it (you would need to edit your marker images previously).

Not sure if that fits the needs.

A solution using Custom JS would be subject to the custom code, as the GUI does simply not allow any other pop up than on hover.
You would need to display the pop-ups already on the load of the map, not on hover of the mouse.
There are also some online discussions about this:
https://stackoverflow.com/questions/8239372/google-maps-open-info-window-by-default

[michaelA-13]

Hi Beda, that is a good solution except that I have around 30 possible locations. And they also change quite frequently.

I will check into the discussion you linked me.

I am good for now, but I would just like to keep it open for another day or two if I need any more help.

I would then close it 🙂

thx

[Beda]

OK, I will await your news here.

Please acknowledge that related to Custom Code I will not be able to fully craft this for you, as that would fall under the custom code.
Of course if you need related details from Toolset - I am here to help.

[michaelA-13]

Hi Beda,

I was able to figure out the jQuery I needed:

$('.gmnoprint').each(function(){
$(this).prepend('<div class="markertitle">' + $(this).attr( "title" ) + '</div');
});

And it works fine.

Except for the fact that it runs before maps is loaded.

Now my question is how can I fire this after the map is fully loaded.

I believe that the answer lies here but I can't figure out where to put what.

https://toolset.com/forums/topic/auto-open-the-infowindow-of-marker-on-map-load/

Best Michael

[Beda]

You can put that in the JS editor of the Filter of that View, for example.
Or in the JS section of the Loop editor.

You need to hook it to the event "js_event_wpv_addon_maps_init_map_completed".
That is why I suggest trying that first in the Filter JS Editor, as there you will have a button that says "JS Front End Events".

If you insert such an event you will see the syntax used.
Now you just need to use this with the right action name:
"js_event_wpv_addon_maps_init_map_completed" and hook your JS to it.

I wonder what kept us from publishing that instruction there - our ticket here is practically obsolete due to the info there, and I did not know about it.

Thanks for the hint, I will try to make this appear in DOC or similar in future.

[michaelA-13]

Hi Beda,

I am afraid I need to bother you again. :/

Although I was able to follow you instructions, it does not quite work because the event fires before the map is loaded.

Please check this video: hidden link

I also tried with jQuery( window ).on( "load", function() { }); but no luck.

Michael

[Beda]

Could I log In to your system, and try to adjust this?

Please share as well the links where I see this in the FrontEnd and edit in the backend.

Thanks!

[Beda]

Where is the View and the Edit Screen for this View?
For reference:
https://toolset.com/forums/topic/open-all-infowindows-by-default-or-add-title-to-markers/#post-620929

[michaelA-13]

Sorry I overlooked that.

The map is set directly on the page:

hidden link

The view that creates the markers can be found here:

hidden link

And here is the JS.

hidden link

Michael

[Beda]

Why is this JS in the theme?

I thought you are adding this as a function of your JS Section in Views?
Logically the JS loads always if you load it thru the theme.

That will probably be enqueued somewhere, and load in the header, for example, hence be uncontrollable.

Please remove the script there, and place it in the view you need/want it.
They all have a JS Editor.

Then, you should not use $ but use jQuery namespace instead.
This is a WordPress rule.

After, if all the JS you need to be fired is this:

$('.gmnoprint').each(function(){
$(this).prepend('<div class="markertitle">' + $(this).attr( "title" ) + '</div');
});

and you want that only fired after all posts are printed (not when the page is loaded, but when the results are finished loading), you would add it like this to the View JS:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed', function( event, data ) {
	jQuery('.gmnoprint').each(function(){
        jQuery(this).prepend('<div class="markertitle">' + $(this).attr( "title" ) + '</div');
});

This will fire your Custom Code exactly when the map is finished loading the results, inclusive markers.
The GUI, as you will see, also offers some earlier or later hooks.

I cannot assist debugging the code within the hook.
I can only assist how to fire to code at the right moments.