-
Posts
-
Hi,
On the Google Maps element, currently by default the marker tooltip will open when the user clicks on the marker. is it possible for the tooltip to open on mouse hover instead?
Thank you,
GeorgeHi sdbroker!
Thank you for using Enfold.
Yes, it is possible but you need to modify shortcode.js. Look for the AVIA MAPS API > _infoWindow.
Cheers!
IsmaelHi Ismael,
Thank you! On shortcode.js – line 616, I replaced ‘click’ with ‘mouseover’ and the tooltip now opens on hover as I wanted.
However now, when I hover to another marker a new tooltip opens and the tooltip on the previous marker remains open which is fine on a map with just a couple markers. On a map with a bunch of markers however it makes it impossible to look at the info of all markers when all those tooltips remain open.
What is the code that I can add to have the previous tooltip automatically close once I hover to a another marker? I’m pretty bad when it comes to java.
Thank you for your help,
GeorgeHey!
Please replace the code with this:
google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,marker); }); google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close(map,marker); });Cheers!
IsmaelThank you very much for the code. It works as it should!
The only problem I have with this code now is that as soon as I move the mouse from the marker the tooltip closes right away before it allows to click on the links inside the tooltip, so basically this solution makes the tooltip unusable if there are links in it. Sorry, my bad I didn’t think about this.
Is there an option for the tooltip on a marker to stay open until another marker (not just moving the mouse away) is hovered or clicked to allow time to click on the tooltip’s links? Although I’ve seen this done, especially on sites with home listings on a map, I realize that this option requires a lot of additional code. So I guess the easiest option would be for to use the “click” option to open a tooltip on a marker and then when another marker is clicked and the new tooltip opens the previous one closes.
So far I use the code below which allows for the tooltip to open on click and then when the map is clicked it closes all open tooltips.
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.addListener(map, 'click', function() { infowindow.close(map,marker); });What code can I use instead so when a new marker is clicked and a new tooltip opens the previous tooltip closes?
Thank you so much for your help,
GeorgeHey!
Try this:
google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,marker); }); google.maps.event.addListener(marker, 'click', function() { infowindow.close(map,marker); });You’ll have to click on the marker again if you want to close the infowindow.
Regards,
IsmaelHi Ismael,
Thank you again! This last code works fine if you only have 2-3 markers on the map. Currently having 20 markers with plans to add at least 50 more, it makes it the worst solution as it opens many infoWindows on hove which cover the markers and it’s impossible to click on them to close the open infoWindows.
Reading the Google suggestions and best practice on infoWindows here: https://developers.google.com/maps/documentation/javascript/infowindows#add as well as seeing several other solutions on github, only one infoWindow shall be open at any given time when having multiple markers. This is achieved by creating the infoWindow before creating the marker. in other words the
var infowindow = new google.maps.InfoWindow({ content: info });code must be outside and before the code that creates the marker that the infoWindow will open upon an event as it is shown on the Google suggestions and on several other sites. Here’s the simplest example: http://stackoverflow.com/questions/1875596/have-just-one-infowindow-open-in-google-maps-api-v3
I tried moving it but since it is coded a bit different on the theme and I’m really bad coding java, I’m not sure where to move that infoWindow code so I break the element.
By looking at the Google example and the other site’s code example above, do you have any suggestions on what to replace on the theme’s code to make it work by opening just one infoWindow at a time?
Thank you very much for your help!
GeorgeHey!
Unfortunately the customisation you’re requesting will take a while to implement and therefore falls outside the scope of our theme support.
You can try http://studio.envato.com or http://www.peopleperhour.com for further customization. You can also vote for or post a feature request on our feature request page https://kriesi.at/support/enfold-feature-requests/.
If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries. Thank you for your understanding.
Cheers!
ArvishHey Arvish,
If you take the time to read this thread from the beginning you might realize that the “customization” that I wanted was just to replace the ‘click’ with ‘mouseover’ code.
However after some reading and research on the Google maps implementation, it turns out that this simple “customization doesn’t work because the map element is NOT coded according to the Google best practice suggestion guidelines as it can be seen at the Google Maps – Developers section here: https://developers.google.com/maps/documentation/javascript/infowindows#add
Best practices: For the best user experience, only one info window should be open on the map at any one time. Multiple info windows make the map appear cluttered. If you only need one info window at a time, you can create just one InfoWindow object and open it at different locations or markers upon map events, such as user clicks. If you do need more than one info window, you can display multiple InfoWindow objects at the same time.
Suggesting that I hire an outside coder to fix the map element so it is coded according to Google’s best practices is not a customization but a fix for the element that was not properly coded.
I hope that the above link makes it clear that this is no longer a help for customization request but a request to code the element based on best practices.
Best regards,
GeorgeHey!
Thank you for your reply. We put a lot of effort in making sure that we our code is up to the highest standard. I shall gladly pass on your request to Kriesi.
You can also vote for or post a feature request on our feature request page https://kriesi.at/support/enfold-feature-requests/.
If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.
Regards,
ArvishHey Arvish,
Thank you for the reply. Please, don’t get me wrong… the theme and the support here is 10 out of 5 stars. I’m extremely pleased with both.
In this case, I was only using the Map element to display a single address with a single infoWindow in several pages on my site and it was working great for my needs. A few days ago I needed to put a Map element in one of the pages that includes several location addresses with several infoWindows. That is when after trying some solutions supplied by Ismael and doing some research on the issue I found out that having several locations with several infoWindows on the Map is not working because it is not coded according to the Google’s best practices suggestions.
To make it work according to best practices, all is needed is to move the infowindow creation code outside the marker creation function. This is not a feature request, just a suggestion on how to make the element work according to best practices. A feature request would be something like to include an SEO friendly nfoWindow list under the Map element. :)
Thanks again,
George
- The topic ‘Google Maps Element’ is closed to new replies.