Google Map API - multiple icons in wrong spot

Question

I have a very strange issue that seems to have appeared only recently. I haven't done any major code changes to the project in a while and none to the function in question in a long while.

So the problem, when I add more than one icon to Google Map using API, the icons are appearig on top of each other.

The strange thing is the labels are all correctly located but those use the same coordinates as the icons.

Here is the string that is passed to the function

1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0

The function is

function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) {
if (objMap) {

    var cssName = 'MarkerIgnitionOff';

    switch (IgnitionStatus) {
        case '1':
            cssName = 'MarkerIgnitionOn';
            break;
        default:
            cssName = 'MarkerIgnitionOff';
    }

    var adjustedIcon = new google.maps.MarkerImage(
        Icon,
        new google.maps.Size(32, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(16, 16)
        );

    var objMarker = new MarkerWithLabel({
        position: new google.maps.LatLng(latitude, longitude),
        draggable: false,
        raiseOnDrag: false,
        icon: adjustedIcon,
        map: objMap,
        labelContent: '  ' + ID + '  ',
        labelAnchor: new google.maps.Point(-8, -8),
        labelClass: cssName, // the CSS class for the label
        labelStyle: { opacity: 1.0 }
    });


    // Add Maker to array
    objMakersArray.push(objMarker);

    // Wrap the event listener inside an anonymous function
    // then we immediately invoke and passes the variables to
    (function (ID, DateStamp, Location, Event, Speed, Icon) {
        google.maps.event.addListener(objMarker, 'click', function () {
            if (!objInfoWindows) {
                objInfoWindows = new google.maps.InfoWindow();
            }

            // Create Paragraph
            var para1 = document.createElement('p');
            var adiv = document.createElement('div');
            adiv.style.cssText = 'width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 10pt; color: #000000;';

            // var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
            var htmlstring = '<table>' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">'
            htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">' + ID + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Date/Time</strong></td><td>' + DateStamp + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Location</strong></td><td>' + Location + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Event</strong></td><td>' + Event + '</td></tr>';
            htmlstring = htmlstring + '<tr><td><strong>Speed</strong></td><td>' + Speed + '</td></tr></table>'
            // htmlstring = htmlstring + '</div>';

            adiv.innerHTML = htmlstring;

            // para1.innerHTML = htmlstring;
            para1.appendChild(adiv);

            // Zoom In DIV
            var aDiv = document.createElement('div');
            aDiv.style.width = "100px";
            aDiv.style.float = 'left';

            // Zoom In
            var alink = document.createElement('a');
            alink.innerHTML = 'Zoom In';
            alink.href = '#';
            alink.onclick = function () {
                objMap.setCenter(objMarker.getPosition());
                zoomLevel = objMap.getZoom();
                if (zoomLevel != 21) {
                    objMap.setZoom(zoomLevel + 1);
                }
                return false;
            };

            aDiv.appendChild(alink);

            // Zoom OUT DIV
            var bDiv = document.createElement('div');
            bDiv.style.width = '100px';
            bDiv.style.float = 'left';

            // Zoom In
            var blink = document.createElement('a');
            blink.innerHTML = 'Zoom Out';
            blink.href = '#';
            blink.onclick = function () {
                objMap.setCenter(objMarker.getPosition());
                zoomLevel = objMap.getZoom();
                if (zoomLevel != 0) {
                    objMap.setZoom(zoomLevel - 1);
                }
                return false;
            };

            bDiv.appendChild(blink);

            // Add Favourite Div
            var cDiv = document.createElement('div');
            cDiv.style.float = 'right';
            cDiv.style.width = '150px';

            // Add Favourite
            var clink = document.createElement('a');
            clink.innerHTML = 'Add to Favourite';
            clink.href = '#';
            clink.onclick = function () {
                position = objMarker.getPosition();
                Pane = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay');
                if (Pane) {
                    Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true);
                }
                return false;
            };
            cDiv.appendChild(clink);

            var para2 = document.createElement('p');
            para2.appendChild(aDiv);
            para2.appendChild(bDiv);
            para2.appendChild(cDiv);

            // Create Master Div to hold everything
            var masterDiv = document.createElement('div');

            // Get name of DIV that has Atlas
            var objDiv = objMap.getDiv();
            var divName = objDiv.id;

            // Bind to mapping Div
            document.getElementById(divName).appendChild(masterDiv);

            // Info Div
            var infoDiv = document.createElement('div');
            infoDiv.style.float = 'left';
            infoDiv.style.width = '350px';
            infoDiv.appendChild(para1);
            infoDiv.appendChild(para2);
            masterDiv.appendChild(infoDiv);

            // Creating the div that will contain the detail map
            var detailDiv = document.createElement('div');
            infoDiv.style.float = 'right';
            detailDiv.style.width = '200px';
            detailDiv.style.height = '200px';
            masterDiv.appendChild(detailDiv)

            // Setting up small map

            // Creating MapOptions for the overview map
            var overviewOpts = {
                zoom: 14,
                icon: adjustedIcon,
                center: objMarker.getPosition(),
                mapTypeId: google.maps.MapTypeId.HYBRID,
                disableDefaultUI: true
            };

            var objdetailMap = new google.maps.Map(detailDiv, overviewOpts);

            // Create a marker that will show in the detail map
            var objdetailMarker = new google.maps.Marker({
                position: objMarker.getPosition(),
                map: objdetailMap,
                icon: adjustedIcon,
                clickable: false
            });

            // Setting the content of the InfoWindow
            objInfoWindows.setContent(masterDiv);

            // Tying the InfoWindow to the marker
            objInfoWindows.open(objMap, objMarker);

        });
    })(ID, DateStamp, Location, Event, Speed, Icon);
    objMarker = null;
}

}

The function that would call this would be

        function OnCurrentPosition(arg) {
        if (arg == null) {
            parent.location = '../Security/Login.aspx';
        }

        if (arg) {
            var latitude, longitude
            var arrayList = arg.split(";");
            alert(arg);
            for (i = 0; i < arrayList.length; i++) {
                if (arrayList[i].length) {
                    var arrLocation = arrayList[i].split("$")
                    AddClusterLocation(arrLocation[0], arrLocation[1], arrLocation[2], arrLocation[3], arrLocation[4], arrLocation[5], arrLocation[6], arrLocation[7], arrLocation[8], arrLocation[9]);
                    SetBounds(arrLocation[1], arrLocation[2]);
                    latitude = arrLocation[1];
                    longitude = arrLocation[2];
                }
            }
            CreateClusterer();

            if (flgLockMapToBounds == false) {
                if (objMakersArray.length == 1) {
                    SetMapCentre(latitude, longitude, 14);
                }
                else {
                    ZoomToExtend();
                }
            }
        }
    }

arg = 1344$52.65665917$-2.49004717$../Images/Icons/Direction/container_blueN.ico$Galahad$2014 Mar 05 Wednesday, 14:00$Wellington Road, Horsehay, Hollybank$RESERVED$0 KPH$0$0.00000000$0.00000000$0;1342$52.65582367$-2.48958417$../Images/Icons/Direction/container_yellowN.ico$Gwinevere$2014 Mar 05 Wednesday, 14:00$Woodlands Lane, Horsehay, Coalbrookdale$RESERVED$0 KPH$0$0.00000000$0.00000000$0;

I'm really at a lost to explain this as the labels are correct, I've checked the latitude and longitude and its different each time the function is called. Plus this was working, only spotted by customer yesterday that it wasn't.

Here's the API that I use

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Thank you for reading the question, hopefully you be able to help! Jim

Answer 1

There is an issue with the MarkerWithLabel library. Issue.

Answer 2

MarkerWithLabel v1.1.10 stopped working for me recently after Google Maps Api's experimental version became v3.18. I had Maps API set to "...maps/api/js?v3&..." which by default picks latest experimental version (currently v3.18). By fixing the version to v3.17 MarkerWithLabel worked fine.