Changing the labelClass of MarkerWithLabel

GoogleCodeExporter commented 9 years ago

Hi,

I am having an issue with the MarkerWithLabel class where I am changing the 
labelClass after the marker is created and the change is only taking effect 
when I zoom in or out the google map.
Can anyone help me with this issue?

Jon

Original issue reported on code.google.com by jbusutti...@gmail.com on 20 Feb 2013 at 3:33

GoogleCodeExporter commented 9 years ago

Similar issue for me.. I am trying to change the labelStyle property (just want 
to change the color) and changes won't apply to the label until the zoom level 
has been changed.

Regards,
Kostas

Original comment by kot...@gmail.com on 4 Mar 2013 at 9:39

GoogleCodeExporter commented 9 years ago

[deleted comment]

GoogleCodeExporter commented 9 years ago

Got this workaround to make it work. After applying the new style I use the 
following statement:

      try {
          myMarker.label.setStyles();
      }
      catch (e) {
          // Ignore any exceptions
      }

Cheers,
Kostas

Original comment by kot...@gmail.com on 6 May 2013 at 10:55

GoogleCodeExporter commented 9 years ago

I had to add draw() too
try {
      myMarker.label.setStyles();
      myMarker.label.draw();
}
catch (e) {
          // Ignore any exceptions
}
Regards,
H

Original comment by harol...@gmail.com on 4 Sep 2013 at 7:08

GoogleCodeExporter commented 9 years ago

A sample of Using and Changing the labelClass of MarkerWithLabel. Change the 
map type to effect:

<!DOCTYPE html>
<html>
<head>
<style>
  html, body, #googleMap {height:100%; margin:0px}
  .label1 {color:white; font-size:50px;}  
  .label2 {color:black; font-size:25px}  
</style>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<script 
src='http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlab
el/1.1.5/src/markerwithlabel_packed.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', dsv);
function dsv() {
  var mySite = new google.maps.LatLng(14.5713, 121.0723);
  var map = new google.maps.Map(document.getElementById('googleMap'), {center:mySite, zoom: 12});
  var siteInfo = new MarkerWithLabel({
    position: new google.maps.LatLng(0,0),
    labelAnchor: new google.maps.Point(50, 60),
    labelClass: 'label2',
    map: map,
  });
  for (var i = 1; i < 8; i++) {
    mySite = new google.maps.LatLng(mySite.lat()+0.01, mySite.lng()+0.01);
    var siteMarker = new google.maps.Marker({position:mySite, title:'This is site'+i, map:map});
    google.maps.event.addListener(siteMarker, 'mouseout', function(event) {siteInfo.setVisible(false)});
    google.maps.event.addListener(siteMarker, 'mouseover', function(event) {
      siteInfo.setOptions({visible:true, labelContent:this.getTitle(), position:this.getPosition()})
    });
  }
  google.maps.event.addListener(map,'maptypeid_changed',function(event){   
    if (map.getMapTypeId() == 'hybrid') {
      siteInfo.setOptions({labelClass:'label1'});
    } else {
      siteInfo.setOptions({labelClass:'label2'});
    }
  });
}
</script>
</head>
<body>
<div id='googleMap'></div>
</body>
</html>

Original comment by dsvalenz...@yahoo.com on 10 Oct 2014 at 7:23

kaplan / google-maps-utility-library-v3

Changing the labelClass of MarkerWithLabel #229