All geek questions in one place

Google Map APIs - Multiple Icons In The Wrong Place

I have a very strange problem that seems to have appeared recently. I have not made any major changes to the code in the project for some time, and none of the functions in question have been around for a long time.

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

Google Screen Capture from project web site

It is strange that the labels are all correctly located, but they use the same coordinates as the icons.

Here is the line 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

Function

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 really got lost to explain this, since the labels are correct, I checked the latitude and longitude and every time every time the function is called. Plus it worked, only yesterday they noticed that it wasn’t.

Here is the API that I use

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

, , , !

+4
2

MarkerWithLabel. Issue.

+8

MarkerWithLabel v1.1.10 , Google Maps Api v3.18. API "... maps/api/js? V3 &...", ( v3.18). v3.17, MarkerWithLabel .

+1

Source: https://habr.com/ru/post/1530272/

More articles:


All Articles