Add lines connecting Markers in a Google Map

This thread is resolved. Here is a description of the problem and solution.

Problem:

I want to connect Google Map markers in a sequential line (A → B → C) without closing the loop back to the starting point (A).

Solution:

The issue arises when the last coordinate duplicates the first one, which closes the loop. The updated JavaScript provided ensures that if the first and last coordinates are identical, the last coordinate is removed to prevent the path from closing.

Here’s the corrected code snippet:

jQuery(document).ready(function($){
    function initMap() {
        var mapid = 'map-2';
        var map = WPViews.view_addon_maps.get_map(mapid);
        var markers = WPViews.view_addon_maps.markers[mapid];
        if (markers.length === 0) return;
 
        var tripCoordinates = [];
        var latLng;
 
        // Loop over all the markers and create an array of lat/lng objects
        for (var marker in markers) {
            if (markers.hasOwnProperty(marker)) { 
                latLng = {
                    'lat': markers[marker].position.lat(),
                    'lng': markers[marker].position.lng()
                };
                tripCoordinates.push(latLng);
            }
        }

        // Remove the last coordinate if it duplicates the first coordinate
        if (tripCoordinates.length > 1) {
            var firstCoord = tripCoordinates[0];
            var lastCoord = tripCoordinates[tripCoordinates.length - 1];
            if (firstCoord.lat === lastCoord.lat && firstCoord.lng === lastCoord

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by pierre-yvesC 6 days, 7 hours ago.

Assisted by: Christopher Amirian.

Author

Posts

December 13, 2024 at 1:49 pm #2788082

pierre-yvesC

Hi,

I tried this solution and it works perfectly, thx to Christian Cox: https://toolset.com/forums/topic/add-lines-connecting-markers-in-a-google-map/

I'm wonder if there is a way to not close the path. I want the lines goes to point A, to BB, to C but NOT going back to A.

Thx

December 15, 2024 at 3:23 pm #2788408

Christopher Amirian

Supporter

Languages: English (English )

Hi,

Welcome to Toolset support. The code my colleague suggest does not close the loop between the last coordinate and the first one.

The problem you are experiencing maybe is because you have one coordinate added with the same Lat and long which causes that loop.

I modified the JS to try to avoid that, but if my modified JS does not work you need to check your coordinates to see if you have the first and last ones repeated somewhere in the array that causes the loop.

jQuery(document).ready(function($){
    function initMap() {
        var mapid = 'map-2';
        var map = WPViews.view_addon_maps.get_map(mapid);
        var markers = WPViews.view_addon_maps.markers[mapid];
        if (markers.length === 0) return;

        var tripCoordinates = [];
        var latLng;

        // Loop over all the markers and create an array of lat/lng objects
        for (var marker in markers) {
            if (markers.hasOwnProperty(marker)) { // Ensure we only process valid properties
                latLng = {
                    'lat': markers[marker].position.lat(),
                    'lng': markers[marker].position.lng()
                };
                tripCoordinates.push(latLng);
            }
        }

        // Remove the last coordinate if it is the same as the first coordinate
        if (tripCoordinates.length > 1) {
            var firstCoord = tripCoordinates[0];
            var lastCoord = tripCoordinates[tripCoordinates.length - 1];
            if (firstCoord.lat === lastCoord.lat && firstCoord.lng === lastCoord.lng) {
                tripCoordinates.pop();
            }
        }

        // Create a new polyline using the coordinates array, and add it to the map
        var tripPath = new google.maps.Polyline({
            path: tripCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        tripPath.setMap(map);
    }

    $(document).on('js_event_wpv_addon_maps_init_map_completed', function(event, event_settings) {
        initMap();
    });
});

It is important to note that this is outside of our support scope and goes to the realm of custom development.

If you need additional help and fine-tuning the code you need to consider hiring a developer:

https://toolset.com/contractors/

Thanks.

December 16, 2024 at 4:51 pm #2788535

pierre-yvesC

Thank you very uch for your help