google map markers - same location

Question

over laying markers on a google map when the locations are the same.

using google maps to display the journey of a customer. if the journey is A -> B -> C but A and C are the same location then the C marker overlays the A marker and I need them to cluster or add some sort of marker padding so we can see both markers.

function initMap(){
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 7
  });

  directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
}





function calculateAndDisplayRoute(directionsService, directionsDisplay) {


    var waypts = [];
            var waypoints = $('#waypoints > li');
            for (var i = 0; i < waypoints.length; i++) {
              if( i == 0 || i == waypoints.length - 1){
                continue;
              }
              var temp = waypoints[i];
                waypts.push({
                  location: waypoints[i].innerHTML,
                  stopover: true
                });

            }


        directionsService.route({
                                    origin: $('#origin').text(),
                                    destination: $('#destination').text(),
                  waypoints: waypts,
                                    travelMode: google.maps.TravelMode.DRIVING
                                    }, function (response, status) {
                                    if (status === google.maps.DirectionsStatus.OK) {
                                        directionsDisplay.setDirections(response);
                                    }
                  else{
                            $("#map").html( "<img src='/images/error.png' id='maperror'/>" );
                                    }
                                });
}

function update_counts() {
    var url = base_url + '/ajax/FDM_global_booking/getcounts/';
  $.ajax({
        url:    url,
                    dataType: "text json",
                    data: { bookings_type: $('#current-filter-type').val() },
                    type: 'POST',
                    beforeSend: function(xhr){
                        xhr.setRequestHeader( 'agent_id', agentId );
                        xhr.setRequestHeader( 'account_ref', accountRef);
                        xhr.setRequestHeader( 'agent_token', agentToken );
                    },
                    success: function(data) {
                        // We are on the booking list page
                        if(data != '') {
              $('.left-panel').html(data);
                        }
                    }
    });
}

I'd like to implement the google cluster, however after testing this it doesn't look to solve my issue, instead it creates the cluster and then when zoomed in the cluster stays and never opens as the markers are still in the same place.

Answer 1

Okay so in order to get passed the google API issues with markers and locations Ive had to create custom markers. I first made the markers so that there is a starting marker, a via and an end marker. when making the markers I found that the google markers are centered by image width. so while making the markers I made sure that the center of the image was the same for all three.

The center was taken from the middle of the yellow marker, when exporting the green and red markers I made sure to include the full space of the three markers which means the center is always the same and therefore the markers will never overlap and hide each other.

The reason for the custom markers is because we use Google maps to plot routes, pickups, drop offs and track drivers. sometime a journey will be a wait and return meaning that the start of the job is also the finish. and on a Google map this is displayed with the CB in the original post image.

this is the resulting map:

I've setup a however I've removed the google key, just add your own or the google dev key to test it.
codepen <-click here

here is another as I had to implement my code into our customer booker sites and its slightly different.
codepen <-click there

I hope that this is of help to someone as its been a slog to get this all working.