StyledMarker Examples

This library is used to create Markers that can be styled in different ways, such as changing the color or shape, or adding text labels. Below are examples of how to use this library. For more details see the reference.

Simple Example

A StyledMarker is a Marker with an additional option passed to the MarkerOptions. Specify styleIcon in the options to create a styled Marker. This option takes a StyledIcon and applies it to the Marker to style it. 

     var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});

The StyledIcon constructor takes a StyledIconType and StyledIconOptions. There's two types of StyledIconTypes specified in the StyledIconTypes enum: MARKER and BUBBLE. MARKER creates a traditional looking Marker while BUBBLE creates a speech bubble that can be labeled with text. 

     var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"I'm a marker!"}),position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});

Each StyledIconType has a different set of properties that can define its look. These properties are found in the reference and can be passed to the StyledIconOptions in the StyledIcon constructor. Set these properties to change the Marker color, text, and any other properties defined for that type. 

     var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

View example

Changing Style Properties Example

Properties for the StyledIcon can be changed by using the set method. Pass the name of the property you want to change and the value. 

    styleIcon.set("text","Elevation: " + results[0].elevation + "m");

View example

Changing Multiple Marker Style Properties Example

A StyledIcon can be created and passed to more than one StyledMarker to style many markers the same way. 

    var styleIcon = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#ff0000",text:"Stop"});
    var styleMaker1 = new StyledMarker({styleIcon:styleIcon,position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
    var styleMaker2 = new StyledMarker({styleIcon:styleIcon,position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Changing the property on a StyledIcon will change the style of every StyledMarker that StyledIcon is associated with. 

    google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
      styleIcon.set("color","#00ff00");
      styleIcon.set("text","Go");
    });

View example

Using Classes Example

A StyledIcon can be passed as a class to StyledIconOptions to set global properties on multiple StyledIcons. When creating a class use StyledIconType.CLASS. 

    var styleIconClass = new StyledIcon(StyledIconTypes.CLASS,{color:"#ff0000"});
    var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:text:"A"},styleIconClass);,position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
    var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:text:"B"},styleIconClass);,position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

This can be useful, for instance, when you want to change the color of multiple StyledMarkers that have different text.

View example