javascript - Google Map API - multiple icons in wrong spot -
i have strange issue seems have appeared recently. haven't done major code changes project in while , none function in question in long while.
so problem, when add more 1 icon google map using api, icons appearig on top of each other.
the strange thing labels correctly located use same coordinates icons.
here string passed 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
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, // css class label labelstyle: { opacity: 1.0 } }); // add maker array objmakersarray.push(objmarker); // wrap event listener inside anonymous function // invoke , passes variables (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 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 hold var masterdiv = document.createelement('div'); // name of div has atlas var objdiv = objmap.getdiv(); var divname = objdiv.id; // bind 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 div contain detail map var detaildiv = document.createelement('div'); infodiv.style.float = 'right'; detaildiv.style.width = '200px'; detaildiv.style.height = '200px'; masterdiv.appendchild(detaildiv) // setting small map // creating mapoptions 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 marker show in detail map var objdetailmarker = new google.maps.marker({ position: objmarker.getposition(), map: objdetailmap, icon: adjustedicon, clickable: false }); // setting content of infowindow objinfowindows.setcontent(masterdiv); // tying infowindow marker objinfowindows.open(objmap, objmarker); }); })(id, datestamp, location, event, speed, icon); objmarker = null; } }
the function call be
function oncurrentposition(arg) { if (arg == null) { parent.location = '../security/login.aspx'; } if (arg) { var latitude, longitude var arraylist = arg.split(";"); alert(arg); (i = 0; < 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 @ lost explain labels correct, i've checked latitude , longitude , different each time function called. plus working, spotted customer yesterday wasn't.
here's api use
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> thank reading question, able help! jim
there issue markerwithlabel library. issue.
Comments
Post a Comment