change zoom level of marker

New home Forums Pro Add-on General queries change zoom level of marker

Tagged: ,

This topic contains 36 replies, has 7 voices, and was last updated by  sawmri 6 months, 1 week ago.

Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • #48094

    sawmri
    Member

    Hi Dylan,
    Thanks for the js code snippet. That works great for when we click on the links in the locations list. Is there a way to add a js snippet to set the zoom level when clicking on a pin in the map?
    Thanks!

    #48096

    sawmri
    Member

    Hi,
    Thanks for that js code snippet! It works great for the locations list links.
    Is there also a way for us to add a js snippet to the advanced settings to have the marker zoom in when the marker is clicked on the map?
    Thanks you!

    #48107

    Dylan
    Moderator

    Hi there,

    Only a pleasure, happy to help!

    Yes, this is definitely possible. Please attempt to add the following JavaScript to your custom JavaScript textbox:

    
    var modMap = WPGMZA.getMapByID(1);
    for(var i in modMap.markers){
    	var mark = modMap.markers[i];
    	mark.on('click', function(){
    		modMap.setZoom(18);
    	});
    }
    

    Please note, you will need to change the 1 within the getMapByID to your preferred map ID. As seen in the previous solution you can also change the value 18 to your preferred zoom level.

    I hope this helps?

    Kind Regards,
    Dylan Auty

    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    #48138

    sawmri
    Member

    Thanks, Dylan-

    The script you provided works in terms of zooming in at a variable level to a table entry. What we are trying to do is to also allow clicking on a marker, with the same pan and zoom functions.

    The response from Anthony, October 20, 2017 at 5:09 pm, appears to have solved the issue for him. I am just not sure how to translate that to our situation. Here is my current custom script:

    jQuery(function($) {

    $(window).on(“load”, function(event) {
    WPGMZA.settings.marker_listing_item_click_scroll_offset = 150;

    });

    });

    jQuery(“body”).on(“click”, “.wpgmaps_mlist_row, .wpgmaps_blist_row”, function(event) {
    var wpgmza_mapid = jQuery(this).attr(“mapid”);
    setTimeout(function(){
    WPGMZA.getMapByID(wpgmza_mapid).setZoom(13);
    }, 300);
    });

    Thanks for your help!

    #48141

    Dylan
    Moderator

    Hi there,

    My apologies, I had omitted an important segment of code in my last snippet, which waits for the map to initialize properly.

    Please alter the previous code with the following instead:

    
    window.onload = function(){
    var modMap = WPGMZA.getMapByID(1);
    for(var i in modMap.markers){
    var mark = modMap.markers[i];
    mark.on('click', function(){
    modMap.setZoom(18);
    });
    }
    };
    

    Once again, you would need to set the map ID accordingly, along with the zoom level you prefer. If you wanted to achieve this for all maps, we could alter this a bit more.

    I look forward to hearing back from you.

    Kind Regards,
    Dylan Auty

    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    #48170

    sawmri
    Member

    Thanks, Dylan, but I am lost here.

    I don’t know what script to replace. Would you please look at what is currently present, and please clarify what script to replace, and what to replace it with? Thank you.

    Current script:

    jQuery(function($) {

    $(window).on(“load”, function(event) {
    WPGMZA.settings.marker_listing_item_click_scroll_offset = 150;

    });

    });

    jQuery(“body”).on(“click”, “.wpgmaps_mlist_row, .wpgmaps_blist_row”, function(event) {
    var wpgmza_mapid = jQuery(this).attr(“8”);
    setTimeout(function(){
    WPGMZA.getMapByID(wpgmza_8).setZoom(13);
    }, 300);
    });

    #48171

    sawmri
    Member

    And, also, what would I need to alter this for each map separately, if you would?

    #48179

    Dylan
    Moderator

    Hi there,

    My apologies for not clarifying this a bit further.

    Instead of replacing any code in your custom script area, simply add the code I have added in this response below all current JavaScript. Each one of these code snippets serves different purposes, so they will not conflict in any way.

    The modified code below should work for all maps on the site:

    
    window.onload = function(){
    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.setZoom(18);
    			});
            }
        }
    }
    };
    

    Meaning at the end of this addition your entire custom JavaScript content will look like this:

    
    jQuery(function($) {
    $(window).on("load", function(event) {
    WPGMZA.settings.marker_listing_item_click_scroll_offset = 150;
    });
    });
    jQuery("body").on("click", ".wpgmaps_mlist_row, .wpgmaps_blist_row", function(event) {
    var wpgmza_mapid = jQuery(this).attr("8");
    setTimeout(function(){
    WPGMZA.getMapByID(wpgmza_8).setZoom(13);
    }, 300);
    });
    
    window.onload = function(){
    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.setZoom(18);
    			});
            }
        }
    }
    };
    

    I hope this helps?

    Kind Regards,
    Dylan Auty

    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    #48208

    sawmri
    Member

    Hi, Dylan-

    Thank you very much. I copied your total script and pasted it into my ‘Advanced’ tab, Custom JS window.

    The map works fine on desktop in terms of scrolling, and if I click on a table entry it pans and zooms as planned. However, nothing happens if I click on a map marker.

    Thanks,

    Scott

    #48209

    sawmri
    Member

    Hi Dylan,
    Just to clarify, everything in the js you sent works great. We would like the map to zoom in when the markers are clicked in the map container too. Previously, we achieved this by editing the core.js file in the pro plugin folder. Those changes get overwritten when we update. Is it possible to also add some js in the advanced settings for this too?
    Thanks!

    #48231

    Dylan
    Moderator

    Hi there,

    My apologies, yes, the code supplied should achieve the desired result without editing core.

    I believe it may require a bit of adjustment. Would it be possible for you to share a link to one of your maps with me? I can then run a few tests and provide you with new snippets of code.

    I look forward to hearing back from you.

    Kind Regards,
    Dylan Auty

    #48238

    sawmri
    Member

    Thank you. Link:

    Click on map marker

    #48256

    Dylan
    Moderator

    Hi there,

    My apologies, it appears I made a mistake in my previous snippet.

    Please could you replace this line (near the bottom of the file):
    var mark = modMap.markers;

    With this instead:
    var mark = modMap.markers [ i ] ; (Please remove the spaces seen here, so that the code is formatted as seen in my screenshot.

    If I am not mistaken, this should resolve the issue and allow the markers to be clicked to perform a zoom task.

    I hope this helps?

    Kind Regards,
    Dylan Auty

    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    • This reply was modified 8 months, 3 weeks ago by  Dylan.
    Attachments:
    You must be logged in to view attached files.
    #48274

    sawmri
    Member

    Hi Dylan,
    Thanks for that! It worked. The only remaining issue is having the marker centered when clicking on the map. Is there another variable I can add to this function to get that to happen?
    Thanks!

    #48306

    figaro
    Member

    Hi sawmri,

    I’ve been using this thread to get my own markers to zoom and centre on click.

    To get the marker centered on click use the following snippet – it has just one extra line of code:

    window.onload = function(){
    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(){
    //add the following line to centre marker
    				modMap.panTo(this.position); 
    				modMap.setZoom(10);
    			});
            }
        }
    }
    };	
    • This reply was modified 8 months, 2 weeks ago by  figaro.
    • This reply was modified 8 months, 2 weeks ago by  figaro.
Viewing 15 posts - 16 through 30 (of 38 total)

You must be logged in to reply to this topic.