change zoom level of marker

[verewhittome]

This reply has been marked as private.

[Dylan]

Hi Vere,

Only a pleasure, happy to help wherever possible.

I believe the following code snippet should function as intended:

jQuery(document.body).on('infowindowopen.wpgmza', function(e){
	var tmarkid = e.target.mapObject.id;
    var tmapid = e.target.mapObject.map_id;

    WPGMZA.getMapByID(tmapid).setZoom(13);

    var newC = WPGMZA.getMapByID(tmapid).getMarkerByID(tmarkid).getPosition();
	WPGMZA.getMapByID(tmapid).setCenter(newC);
});

This can be added directly to the custom JavaScript section found under Maps -> Settings -> Advanced.

Adding the code here means it will not be removed by future updates.

I hope this helps?

• This reply was modified 3 years, 8 months ago by Dylan.

[verewhittome]

Sorry Dylan – it seems like I can’t see your private reply. Am I doing something wrong?

Thanks!
Vere

[Dylan]

Hi Vere,

My sincerest apologies, it was not supposed to be flagged as a private reply.

This was an oversight on my part, please refresh the thread and the reply should be public. 🙂

[verewhittome]

That’s perfect! Thanks so much Dylan 🙂

[Dylan]

Hi Vere,

Only a pleasure, glad to hear that helped!

Please do let me know if you need anything else in the future.

🙂

[figaro]

So I previously got my markers to zoom and centre on click, and then zoom back out to the maps initial zoom level and centre point. This was largely thanks to this thread, the help of the community and the help of the support team here.

Now I’m using the latest 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)

Plugin versions I’m using on the new project are:

WPGMAPS: v8.0.19
Pro add-on: v5.80

Any help greatly appreciated!

• This reply was modified 3 years, 7 months ago by figaro.

[figaro]

Please ignore the above request. I’ve realised that support had sent me the wrong version of Pro. I should be using v7. Once I updated to v7 the code that I’d previously been using works again.

[caleb1]

[quote quote=23831]Hi there,

Not a problem at all. Please follow the steps below to make this change:

1. Open the core.js file (wp-google-maps-pro/js/core.js) and look for the following segment of code:

if (click_from_list) {
   MYMAP[map_id].map.panTo(marker.position);
   MYMAP[map_id].map.setZoom(13);
}
click_from_list = false;

2. There will be more than on instance of the code above (the second instance will be relatively close to the first and should be easy to fine) – I would suggest looking at lines 2756 to 2779 Approx.
3. Within all instances of this code, you will need to alter the following line of code:

MYMAP[map_id].map.setZoom(13);

Where 13 is the zoom level
4. Once this is done, remember to save the file.

I hope this helps?[/quote]

I am also trying to adjust the zoom level when an item is clicked in the marker listing below the map, the core.js file you mentioned is empty and contains a comment saying “NB: Redundant as of 8.1.”
It would be great if you could point me in the right direction as to where I can make this change in the newer version.
Thanks.

[caleb1]

[quote quote=57643]Hi Vere,

Only a pleasure, happy to help wherever possible.

I believe the following code snippet should function as intended:

jQuery(document.body).on('infowindowopen.wpgmza', function(e){
	var tmarkid = e.target.mapObject.id;
    var tmapid = e.target.mapObject.map_id;

    WPGMZA.getMapByID(tmapid).setZoom(13);

    var newC = WPGMZA.getMapByID(tmapid).getMarkerByID(tmarkid).getPosition();
	WPGMZA.getMapByID(tmapid).setCenter(newC);
});

This can be added directly to the custom JavaScript section found under Maps -> Settings -> Advanced.

Adding the code here means it will not be removed by future updates.

I hope this helps?[/quote]

Also tried this code in quote above, does not seem to do anything….

[Dylan]

Hi there,

Thank you for reaching out, we do appreciate your time.

Unfortunately, most of the code provided in this thread is no longer relevant as our core code has been restructured and the samples within this thread are al about a year old now.

With that said, our architecture changes now support changing functionality without editing any core code, this means it is possible to change functionality, without losing access to updates or needing to reapply changes after each update.

To alter the behaviour within marker listing specifically, we can override the following function:
WPGMZA.MarkerListing.prototype.onItemClick

Within this override, we can change the zoom level as preferred. Would you be open to sharing a link to your site (map page) with me so that I ca prepare an override for you?

I look forward hearing back from you.

[caleb1]

That sounds like a good solution.

Here is the link:

http://2021.airfieldmats.com/customers/

[caleb1]

Forgot to mention if it asks for a password to view the site its “ams2021”

[Dylan]

Hi Caleb,

Thank you for getting back to me, I do appreciate your time.

I have gone ahead and prepared the override extension I mentioned earlier.

Please find the snippet below:

jQuery(function($){
	var _markerListingOnItemClick = WPGMZA.MarkerListing.prototype.onItemClick;

	WPGMZA.MarkerListing.prototype.onItemClick = function(event) {
		_markerListingOnItemClick.apply(this, arguments);

		var zoomLevelOnClick = 18;
		this.map.setZoom(zoomLevelOnClick);
	}
});

Please note you can change the zoomLevelOnClick value to any whole number between 1 and 21 to adjust your zoom level as preferred.

This can be added directly to Maps -> Settings -> Advanced -> Custom JavaScript.

I hope this helps?

[caleb1]

Really appriciate your time on this.
That does not seem to work for me.
After adding the code it still zooms to the same point it did before, does not matter where I set the zoomLevelOnClick

Here is a video so you can see what I am doing and the result, in case I did something wrong.:

Thanks again.

[Author]

Posts