Google maps dragging marker adds border to another marker

  google-maps, javascript

I’ve just tried adding a main draggable marker on to the map. The issue I’m facing is that as soon as you drag that marker in black it creates a blue outline to one of the existing markers that are already placed on the map. I have no idea why it does this. I’ve isolated the bit of code where it’s actually doing this, which is the click event listener that I’ve added to each marker, as soon as I remove this little snippet of code, it doesn’t add a blue outline to any marker anymore. It’s important to note, I’ve also tried commenting out the calls to the two inner function on this click handler however that doesn’t seem to fix the issue, so it can’t be those functions that are the cause.

It’s also not a browser issue as the blue outline appears on both safari and chrome.

                    marker.addListener('click',
                            function() {
                                openCloseNav(true);
                                car_park_details(marker);
                            }); 

You can see the blue outline on the marker here (On the rightmost marker)

Most of the javascript I’ve added below.

        var markers = [];
        var geocoder;
        var map;
        var mainMarker;

        function initMap() {
            geocoder = new google.maps.Geocoder();

            var defaultCoord = {
                lat : 51.600960,
                lng : -0.275770
            };

            map = new google.maps.Map(document.getElementById('map'), {
                zoom : 15,
                center : defaultCoord,
                minZoom : 14,
                streetViewControl : false,
                controlSize : 33,
                gestureHandling : 'greedy',
                mapTypeControlOptions : {
                    mapTypeIds : []
                },
                styles : [ {
                    "featureType" : "all",
                    "elementType" : "all",
                    "stylers" : [ {
                        "hue" : "#008eff"
                    } ]
                }, {
                    "featureType" : "road",
                    "elementType" : "all",
                    "stylers" : [ {
                        "saturation" : "0"
                    }, {
                        "lightness" : "0"
                    } ]
                }, {
                    "featureType" : "transit",
                    "elementType" : "all",
                    "stylers" : [ {
                        "visibility" : "off"
                    } ]
                }, {
                    "featureType" : "water",
                    "elementType" : "all",
                    "stylers" : [ {
                        "visibility" : "simplified"
                    }, {
                        "saturation" : "-60"
                    }, {
                        "lightness" : "-20"
                    } ]
                } ]

            });

            mainMarker = new google.maps.Marker({
                    map,
                 position: defaultCoord,
                 draggable: true,
                 icon : {
                        url : 'mainmarker.png',
                        scaledSize : new google.maps.Size(30, 30),
                        origin : new google.maps.Point(0, 0),
                    }  
                
             });
            
            google.maps.event.addListener(map, 'tilesloaded',
                    find_closest_markers);
            google.maps.event.addListener(mainMarker, 'dragend',
                    find_closest_markers);

        }


        function geocodeEncapsulation(i) {

            return (function(results, status) {

                if (status == 'OK') {
                
                    var marker = new MarkerWithLabel({
                        map : map,
                        position : results[0].geometry.location,
                        icon : {
                            url : 'pin.png',
                            scaledSize : new google.maps.Size(40, 30),
                            //origin : new google.maps.Point(0, 0),
                        },
                        clickable: true,

                        labelContent : '£' + i.price.toFixed(2),
                        labelAnchor : new google.maps.Point(30, 35),
                        labelClass : "markerdesign",
                        labelInBackground : false,
                        title : i.name
                    });
                    marker.set("carpark", i);
                    


                    marker.addListener('mouseover',
                            function() {
                                marker.set("labelClass",
                                        "markerdesignhover");
                            });
                    marker.addListener('mouseout',
                            function() {
                                marker.set("labelClass", "markerdesign");
                            }); 
                    marker.addListener('click',
                            function() {
                                openCloseNav(true);
                                car_park_details(marker);
                            }); 
                    markers.push(marker);

                } else {
                    //console.log(status);
                }

            });
        }

Source: Ask Javascript Questions

LEAVE A COMMENT