label - Can't prevent all marker overlays from overlapping markers google maps api v3 -



label - Can't prevent all marker overlays from overlapping markers google maps api v3 -

i have google map using api version 3. want create markers custom icon , numbered labels. i've been trying utilize seems accepted method this, "labels.js" solution i've provided below. however, no matter try, numbered overlays overlap of markers (despite me setting marker , label same zindex). see screenshot provided see i'm talking about. if take @ markers 14 , 15 in screen, you'll see 15 label overlaps 14 marker, shouldn't, should underneath 14 marker.

http://i.imgur.com/qoyqchj.jpg

many discussions overlapping custom overlays revolve around line of code:

var pane = this.getpanes().overlayimage;

however, have in place. i'm setting each label overlay , marker pair same zindex, , overlapping markers proves zindex increment working. i've provided of code below, , have run brick wall. i've tried possible no luck. assume variables have been declared.

label.js:

/* start label.js */ // define overlay, derived google.maps.overlayview function label(opt_options) { // initialization this.setvalues(opt_options); // here go label styles var span = this.span_ = document.createelement('span'); span.style.csstext = 'position: relative;' + 'white-space: nowrap;color:#666666;' + 'font-family: arial; font-weight: bold;' + 'font-size: 11px;'; var div = this.div_ = document.createelement('div'); div.appendchild(span); div.style.csstext = 'position: absolute; display: none;'; }; label.prototype = new google.maps.overlayview; label.prototype.onadd = function () { var pane = this.getpanes().overlayimage; pane.appendchild(this.div_); // ensures label redrawn if text or position changed. var me = this; this.listeners_ = [ google.maps.event.addlistener(this, 'position_changed', function () { me.draw(); }), google.maps.event.addlistener(this, 'text_changed', function () { me.draw(); }), google.maps.event.addlistener(this, 'zindex_changed', function () { me.draw(); }) ]; }; // implement onremove label.prototype.onremove = function () { this.div_.parentnode.removechild(this.div_); // label removed map, stop updating position/text. (var = 0, = this.listeners_.length; < i; ++i) { google.maps.event.removelistener(this.listeners_[i]); } }; // implement draw label.prototype.draw = function () { var projection = this.getprojection(); var div = this.div_; // custom code offset numbered label each marker var labeloffset; if (parseint(this.get('text').tostring()) < 10) labeloffset = new google.maps.point(6, -35); else labeloffset = new google.maps.point(9, -35); var point1 = this.map.getprojection().fromlatlngtopoint( (this.get('position') instanceof google.maps.latlng) ? this.get('position') : this.map.getcenter() ); var point2 = new google.maps.point( ((typeof (labeloffset.x) == 'number' ? labeloffset.x : 0) / math.pow(2, map.getzoom())) || 0, ((typeof (labeloffset.y) == 'number' ? labeloffset.y : 0) / math.pow(2, map.getzoom())) || 0 ); var offsetposition = this.map.getprojection().frompointtolatlng(new google.maps.point( point1.x - point2.x, point1.y + point2.y )); var position = projection.fromlatlngtodivpixel(offsetposition); // end custom code div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.display = 'block'; div.style.zindex = this.get('zindex'); //allow label overlay marker this.span_.innerhtml = this.get('text').tostring(); }; /* end label.js */

code create map markers:

var mapoptions = { zoom: myzoom, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap, streetviewcontrol: false }; map = new google.maps.map(document.getelementbyid("gmap"), mapoptions); /* insert logic here iterate , add together each marker */ // function called every marker, increases 1 each phone call function addmarker(latlng, mylabel, isshowroom, data, type, i) { var markerimage; var labelcolor = '#666666'; if (isshowroom) { markerimage = 'http://www.subzero-wolf.com/common/images/locator/pin-showroom.png'; } else { if (type == 'service') { markerimage = '/common/images/locator/pin-dealer.png'; } else if (type == 'parts') { markerimage = '/common/images/locator/pin-parts.png'; } else { markerimage = '/common/images/locator/pin-dealer.png'; } } var mymarker = new google.maps.marker({ position: latlng, draggable: false, clickable: true, map: map, icon: markerimage, zindex: isshowroom ? 9999 : }); var html = "test content" mymarker['isshowroom'] = isshowroom; mymarker['infowindow'] = new google.maps.infowindow({ content: html }); google.maps.event.addlistener(mymarker, 'click', function() { this['infowindow'].open(map, this); }); // dont show label showroom because marker star icon, no number needed if (!isshowroom) { var label = new label({ map: map }); label.set('zindex', i); label.bindto('position', mymarker, 'position'); label.set('text', mylabel); } markerarray.push(mymarker); }

google-maps label overlays

Comments

Post a Comment

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer - when trying request rest service @ time of response getting exception.. feb 21, 2013 2:34:49 pm com.sun.jersey.spi.container.containerresponse mapmappablecontainerexception severe: exception contained within mappablecontainerexception not mapped response, re-throwing http container java.lang.noclassdeffounderror: not initialize class net.sf.cglib.proxy.enhancer @ org.hibernate.proxy.pojo.cglib.cgliblazyinitializer.getproxyfactory(cgliblazyinitializer.java:117) @ org.hibernate.proxy.pojo.cglib.cglibproxyfactory.postinstantiate(cglibproxyfactory.java:43) @ org.hibernate.tuple.entity.pojoentitytuplizer.buildproxyfactory(pojoentitytuplizer.java:162) @ org.hibernate.tuple.entity.abstractentitytuplizer.<init>(abstractentitytuplizer.java:135) @ org.hibernate.tuple.entity.pojoentitytuplizer.<init>(pojoentitytuplizer.java:55) @ org.hibernate.tuple.e...
Read more

Accessing MATLAB's unicode strings from C -

Accessing MATLAB's unicode strings from C - how can access underlying unicode info of matlab strings through matlab engine or mex c interfaces? here's example. let's set unicode characters in utf-8 encoded file test.txt, read as fid=fopen('test.txt','r','l','utf-8'); s=fscanf(fid, '%s') in matlab. now if first feature('defaultcharacterset', 'utf-8') , c engevalstring(ep, "s") , output text file utf-8. proves matlab stores unicode internally. if mxarraytostring(enggetvariable(ep, "s")) , unicode2native(s, 'latin-1') give me in matlab: non-latin-1 characters replaced character code 26. need getting access underlying unicode info c string in unicode format (utf-8, utf-16, etc.), , preserving non-latin-1 characters. is possible? my platform os x, matlab r2012b. addendum: documentation explicitly states "[mxarraytostring()] supports multibyte encoded characters...
Read more

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more