v8: Zoom on marker click, zoom out on infowindow close.

New home Forums Pro Add-on v8: Zoom on marker click, zoom out on infowindow close.

Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #67570
    figaro
    Member

    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?

    #67571
    figaro
    Member

    Actually, 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

    #67573
    Steven
    Moderator

    Hi 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 Beer

    #67577
    figaro
    Member

    Thanks 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.

    #67578
    Steven
    Moderator

    Hi 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 Beer

    #68833
    PatrickS
    Participant

    Hi,
    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.
    #68839
    Steven
    Moderator

    Hi @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/cbf05157b090979e99c9a574f967c78d

    Kindest Regards,
    Steven

    #69139
    PatrickS
    Participant

    Thank 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.

    #69140
    Steven
    Moderator

    Hi 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 Beer

    #69142
    PatrickS
    Participant

    Hi 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,
    Patrick

    #69149
    Steven
    Moderator

    Hi 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 Beer

    #74512
    Kelly
    Participant

    I 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?

    #74535
    Steven
    Moderator

    Hi @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.

    #77400
    Brittany
    Participant

    Hi @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!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.