New home › Forums › Pro Add-on › v8: Zoom on marker click, zoom out on infowindow close.
Tagged: infoWindow, Zoom
- This topic has 9 replies, 5 voices, and was last updated 3 months, 2 weeks ago by Brittany.
-
AuthorPosts
-
February 9, 2021 at 1:27 pm #67570figaroMember
In version 7, I previously got my markers to zoom and centre on click/opening of markers infwWindow, and then zoom back out to the maps initial zoom level and centre point when the infowindow was closed. This was largely thanks to the help of the community and the help of the support team here.
Now I’m using the latest v8 version of the plugins for a new project, but the code I have no longer works to achieve the above.
The code I was using is:
//zoom on marker click if(typeof WPGMZA !== 'undefined' && typeof WPGMZA.maps !== 'undefined'){ for(var mapid in WPGMZA.maps){ var modMap = WPGMZA.maps[mapid]; for(var i in modMap.markers){ var mark = modMap.markers[i]; mark.on('click', function(){ modMap.panTo(this.position); modMap.setZoom(6); }); } } } //reset to initial zoom/centre on infowindow close $(document.body).on("infowindowclose.wpgmza", function(event) { var map = WPGMZA.maps[0]; map.setZoom(3); map.setCenter({lat: 31.327621, lng: 9.750692999999956}); });
(please note, I’ve had to leave out the ‘function’ opening and closing lines as the forum wouldn’t let me post them).
Does anyone have some code that will achieve the same effects, in version 8?
February 9, 2021 at 1:49 pm #67571figaroMemberActually, I’ve just realised that v8 has a zoom on marker click function already in place.
I guess all I need now is some code to zoom map back out to initial map zoom and centre.
TIA
February 9, 2021 at 2:44 pm #67573StevenModeratorHi there,
Thank you so much for getting in touch, we really appreciate your time.
Could I kindly ask you to provide us with a link to your map page so that we might take a closer look?
I look forward to hearing back from you.
Kindest Regards,
Steven De BeerFebruary 9, 2021 at 3:03 pm #67577figaroMemberThanks for the quick reply Steven,
It seems that my code posted above does actually work, and another JS function on the page was causing it not to.
All fixed for now.
February 9, 2021 at 3:07 pm #67578StevenModeratorHi again,
Thank you so much for getting back to me.
Not a problem at all, I am glad to hear you managed to find the culprit. 🙂
If you ever have two minutes spare, please consider reviewing the plugin on https://wordpress.org/support/plugin/wp-google-maps/reviews/#new-post it would mean the world to me! (If possible, could I ask you to mention both your name and mine in the review for administrative purposes, this would be a tremendous help!)
Do have a fantastic week further.
Kindest Regards,
Steven De BeerMay 11, 2021 at 10:58 pm #68833PatrickSParticipantHi,
This is exactly what I need. But please let me know what exactly I have to add as ‘function opening and closing lines’ and where to insert the code.- This reply was modified 2 years, 4 months ago by PatrickS.
May 12, 2021 at 9:02 am #68839StevenModeratorHi @PatrickS,
Thank you so much for getting in touch.
You can add any custom JavaScript via the custom JS field found in Maps -> Settings -> Advanced.
The opening and closing lines previously referred to are simply the jQuery method used when the document is ready.
Kindly see an example attached via the gist link below:
– https://gist.github.com/StevenDeBeer/cbf05157b090979e99c9a574f967c78dKindest Regards,
StevenMay 27, 2021 at 1:54 pm #69139PatrickSParticipantThank you Steven, this was very helpful.
There is just one other wish that I could not manage to fulfill myself: How to change the behaviour of a click on an entry in the table to be just like a click on a marker in the map? (Zooming in is necessary here, because some places in the default zoom of the map are too crowded with markers). Hope you can help me out.May 27, 2021 at 2:22 pm #69140StevenModeratorHi Patrick,
Thank you so much for getting back to me.
Might I kindly ask you to perhaps provide me with a link to your map page?
The default functionality when clicking on a marker listing, the map will zoom into the marker and open the info window?
I look forward to hearing back from you.
Kindest Regards,
Steven De BeerMay 27, 2021 at 5:06 pm #69142PatrickSParticipantHi Steven,
Thank you for your prompt response. I just found the perfect solution on this forum (#69084 from your colleague Dylan). It’s working now. The problem was that clicking on the table item did not cause a zoom-in but a zoom-out to the defaut zoom level. I assume that has to do with the already high default zoom level of our application (we have a city map with a lot of shop markers).
So thanks again, the support is great,
PatrickMay 28, 2021 at 9:51 am #69149StevenModeratorHi Patrick,
Thank you so much for getting back to me.
I am glad to hear you managed to find a solution to achieve the desired need.
Please do let us know if you have any other questions as we are always eager to assist.
Do have a great weekend ahead!
Kindest Regards,
Steven De BeerAugust 28, 2022 at 11:47 pm #74512KellyParticipantI have used the github code and it’s great. How can I modify it to have different snap back lat/lng’s for 2 different maps?
August 31, 2022 at 8:49 am #74535StevenModeratorHi @kelly,
Thank you so much for getting in touch.
Might I kindly ask you to provide us with a link to each map page?
I look forward to hearing back from you.
June 5, 2023 at 4:52 am #77400BrittanyParticipantHi @Steven,
Thank you for providing this code! This works perfectly if I am using the default infowindow, but it looks like “infowindowclose.wpgmza” doesn’t get triggered if the style is set to “panel”. Do you know what I can use to trigger off of when I have it as a panel infowindow?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.