title: Google Map API - multiple icons in wrong spot
body: <p>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.</p>
  
  <p>So the problem, when I add more than one icon to Google Map using API, the icons are appearig on top of each other.</p>
  
  <p><img src="https://i.stack.imgur.com/9gNM8.png" alt="Google Screen Capture from project web site"></p>
  
  <p>The strange thing is the labels are all correctly located but those use the same coordinates as the icons.</p>
  
  <p>Here is the string that is passed to the function</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The function is </p>
  
  <pre><code>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: '&amp;nbsp;&amp;nbsp;' + ID + '&amp;nbsp;&amp;nbsp;',
          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 = '&lt;div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;"&gt;'
              var htmlstring = '&lt;table&gt;' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;"&gt;'
              htmlstring = htmlstring + '&lt;tr&gt;&lt;td style="width: 100px;"&gt;&lt;strong&gt;ID&lt;/strong&gt;&lt;/td&gt;&lt;td style="width: 200px;"&gt;' + ID + '&lt;/td&gt;&lt;/tr&gt;';
              htmlstring = htmlstring + '&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Date/Time&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;' + DateStamp + '&lt;/td&gt;&lt;/tr&gt;';
              htmlstring = htmlstring + '&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Location&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;' + Location + '&lt;/td&gt;&lt;/tr&gt;';
              htmlstring = htmlstring + '&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Event&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;' + Event + '&lt;/td&gt;&lt;/tr&gt;';
              htmlstring = htmlstring + '&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Speed&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;' + Speed + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
              // htmlstring = htmlstring + '&lt;/div&gt;';
  
              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() + '&amp;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;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The function that would call this would be</p>
  
  <pre><code>        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 &lt; 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;
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's the API that I use</p>
  
  <pre><code>&lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Thank you for reading the question, hopefully you be able to help!
  Jim</p>