Marker Coordinates – Different View Options

New home Forums Pro Add-on General queries Marker Coordinates – Different View Options

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #75415
    nikolay_zhelev
    Participant

    Hi,

    I’m using the pro version. First I would like marker coordinates to be shown in Degrees Minutes Seconds. Is it possible?

    Secondly, can I remove the “,” between marker coordinates longtitude and latitude separation?
    Example:
    Currently I see: 42.06, 27.98
    I would like to make it without comma: 42.06 27.98

    Is there any way to add N and E, respectively S and W in front of each coordinate?

    Thank you.

    Sincerely yours,
    Nikolay

    #75429
    Matthew
    Moderator

    Hi Nikolay,

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

    Unfortunately we do not support adding markers with their coordinates being in DMS format, however, you could add the marker using normal lat/lng coordinates and then add a DMS custom field in which you add the DMS value accordingly.

    With regards to removing the comma in the coordinates, yes this is possible using some custom JS code to dynamically remove the comma when the marker is viewed on the front end, thus please may I ask if you may provide me with the link to your map so that I may take a closer look and write the respective code?

    Lastly regarding adding the N/E/S/W to the coordinates, this is possible, however you will need to use custom fields and custom JS code to do this as we do not do this by default. The idea would be to do the following:
    – Create a custom field for latitude direction where you enter a direction when creating a marker(NESW)
    – Create a custom field for longitude direction where you enter a direction when creating a marker(NESW)
    – These fields will be hidden on the page
    – Use custom JS code to use these fields to add the respective direction to each coordinate when viewing the marker.

    Please do let me know if this would help?

    Kindest Regards,
    Matthew

    #75443
    nikolay_zhelev
    Participant
    This reply has been marked as private.
    #75481
    Matthew
    Moderator

    Hi Nikolay,

    Thank you for your response and time on this, I really appreciate it!

    Thank you for link to your map, it appears that you currently have 2 markers that display the title, address and description.

    With that said, please may you confirm create those direction custom fields mentioned in my previous response and edit and save the direction to those markers? Once this has been done, this will allow me to write the custom JS code needed to add the direction onto the end of the address coordinates.

    Should you need, is our documentation on using custom fields here: https://docs.wpgmaps.com/oYnu-adding-custom-fields-to-your-marker

    With regards to the custom JS code to pull the coordinates of each marker on the frontend, you may use the following code:

    let map = WPGMZA.maps[0];
    let markers = map.markers;
    
    for(let marker of markers){
        let lat = marker.lat;
        let lng = marker.lng;
    
        // Your code here
    }

    I hope this helps?

    Kindest Regards,
    Matthew

    #75585
    nikolay_zhelev
    Participant
    This reply has been marked as private.
    #75618
    Matthew
    Moderator

    Hi Nikolay,

    Thank you for your response, I really appreciate it!

    Thank you for the confirmation, thus please may you save the below JS code into the “Custom JS” setting block (Maps -> Settings -> Advanced Settings):

    jQuery(function($){
        $(document).on('infowindowopen.wpgmza', function(){
            let infowindow = $('.wpgmza-infowindow');
    
            let addressEl = infowindow.find('.wpgmza_infowindow_address');
            let address = addressEl.text();
            let nsDir = infowindow.find('p[data-custom-field-id="7"]').text();
            let ewDir = infowindow.find('p[data-custom-field-id="8"]').text();
    
            address = address.split(',');
    
            addressEl.html(<code>${nsDir} ${address[0]} ${ewDir} ${address[1]}</code>);
        })
    })

    Once this has been done, please may you also save the below CSS code into the “Custom CSS” setting block (Maps -> Settings -> Advanced Settings):

    p[data-custom-field-id="7"], p[data-custom-field-id="8"]{
        display: none;
    }

    Please clear your browser cache and confirm if this helps?

    I look forward to hearing back from you.

    Kindest Regards,
    Matthew

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