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

[figaro]

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?

[figaro]

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

[Steven]

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

[figaro]

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.

[Steven]

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

[PatrickS]

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.

[Steven]

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

[PatrickS]

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.

[Steven]

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

[PatrickS]

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

[Steven]

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

[Kelly]

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?

[Steven]

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.

[Brittany]

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!

[Author]

Posts