change zoom level of marker

[amandsim]

Hi,

I would like to be able to change the zoom level when I click one of the markers. Currently it’s to close and I need it to show more area.

Is it possible to do that? I don’t mind modifying the code if necessary.

Thanks!

[Dylan]

Hi there,

Thank you so much for getting in touch with us.

Are you referring to the zoom level set when you click on a marker listing below the map?

If so, yes it is possible to change the zoom level within the code.

If you are however talking about the zoom level when a marker is clicked within the map, we do not set the zoom level by default. Meaning there may be something else going on with the map causing it to zoom. If this is the case, please send me a link to your map so that I can run a few tests from my side?

[amandsim]

Hi dylan,

Yes, what i’m trying to do is to change the zoom level when a marker is clicked from the marker listing.

Could you please let me know which code should i modify and how to change the zoom level?

Thanks!

[Dylan]

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?

[fadilla.wahyudi]

Hi Dylan.

I’ve tried changing the zoom level to 20 on both of them but nothing changed.

• This reply was modified 6 years ago by fadilla.wahyudi.

[fadilla.wahyudi]

[quote quote=30701]Hi Dylan.

I’ve tried changing the zoom level to 20 on both of them but nothing changed.

[/quote]

** Sorry, but it somehow worked now. Thank you!

[Dylan]

This reply has been marked as private.

[aforshaw]

Hi – I have exactly the same problem, but clicking on a marker (as opposed to one from the list below the map) will not zoom in and pan.

Where do I need to change in order to zoom the map when clicking on a marker? (Please note that I do not mean clicking on the carousel entries below the map). Clicking on a marker usually opens the info-window, so I’m guessing it should be modified somewhere there.. but I don’t know where that is.

Many thanks

• This reply was modified 5 years, 11 months ago by aforshaw.

[Dylan]

Hi there,

Thank you so much for getting in touch.

Unfortunately marker clicks do not trigger a zoom event currently.

However this could be achieved by making some code changes if you are open to this?

[aforshaw]

Absolutely yes – I don’t mind modifying the code 🙂 Please point me in the right direction and I’ll make the changes.

Many thanks

[Dylan]

Hi there,

Thank you so much for your time on this one.

You will need to edit the core.js file of the plugin (wp-content/plugins/wp-google-maps-pro/js/core.js), and find the “wpgmza_open_marker_func” function within the file.

Once you have found this function, please find all instances of the following segment of code:

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

There should be 2 instances of this code, which should be replaced with this instead:

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

These code changes can be made via FTP, or alternatively this could also be made from within the WordPress code editor.

This should zoom in on the marker regardless of whether it is clicked within the map or the marker listing.

I hope this helps? 🙂

[aforshaw]

Hi Dylan,

Thanks for that. I’ve made the changes but also needed it to pan to center the marker once clicked before zooming in, so I’ve changed it to:

if (click_from_list) {
MYMAP[map_id].map.panTo(marker.position);
MYMAP[map_id].map.setZoom(18);
} else { // if clicked on a marker
MYMAP[map_id].map.panTo(marker.position);
MYMAP[map_id].map.setZoom(18);
}

I’ll be using different zoom levels eventually hence the duplication of zooms but this works.

Thanks again,

Anthony

[Dylan]

Hi Anthony,

So glad to hear the code helped in some way, and thank you so much for sharing your solution with us!

Is there anything else I can assist you with? 🙂

[verewhittome]

Hey! I’m trying to achieve the same thing as Anthony. That is, I want the map to zoom in when an in-map marker is clicked. I tried following the instructions mentioned above but I couldn’t seem to find the relevant code snippet:

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

in wp-content/plugins/wp-google-maps-pro/js/core.js

Has the code changed since?
Thanks,
Vere

[Dylan]

Hi Vere,

Thank you for getting in touch, we do appreciate your time.

Depending on which major version of the Pro version you are making use of, the code may need to change slightly from the original solution you have found.

This is due to recent changes we have made to our core code to allow for external custom functionality to be developed. It also allows us to scale the system better in the future.

Would you be open to sharing a link to your map with me so that I can confirm the core codebase and provide you with a new snippet?

[Author]

Posts