googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
79 lines • 6.31 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>StyledMarker Examples</title>
<link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"/>
<link rel="stylesheet" type="text/css" href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/util/docs/template/local_extensions.css"/>
<script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div>
<a name="Top"></a>
<h1><a></a><span lang="en-us">StyledMarker</span> Examples</h1>
</div>
<p>This library is used to create <code><span lang="en-us">Markers</span></code> 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 <a href="reference.html">reference</a>.</p>
<div>
<h2><a name="simple"></a>Simple Example</h2>
<p>
A <code><span lang="en-us">StyledMarker</span></code> is a <code><span lang="en-us">Marker</span></code> with an additional option passed to the <code><span lang="en-us">MarkerOptions</span></code>. Specify <code><span lang="en-us">styleIcon</span></code> in the options to create a styled <code><span lang="en-us">Marker</span></code>. This option takes a <code><span lang="en-us">StyledIcon</span></code> and applies it to the <code><span lang="en-us">Marker</span></code> to style it.
</p>
<pre class="prettyprint"> var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});</pre>
<p>
The <code><span lang="en-us">StyledIcon</span></code> constructor takes a <code><span lang="en-us">StyledIconType</span></code> and <code><span lang="en-us">StyledIconOptions</span></code>. There's two types of <code><span lang="en-us">StyledIconType</span></code>s specified in the <code><span lang="en-us">StyledIconTypes</span></code> enum: MARKER and BUBBLE. MARKER creates a traditional looking <code><span lang="en-us">Marker</span></code> while BUBBLE creates a speech bubble that can be labeled with text.
</p>
<pre class="prettyprint"> 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});</pre>
<p>
Each <code><span lang="en-us">StyledIconType</span></code> has a different set of properties that can define its look. These properties are found in the <a href="reference.html">reference</a> and can be passed to the <code><span lang="en-us">StyledIconOptions</span></code> in the <code><span lang="en-us">StyledIcon</span></code> constructor. Set these properties to change the <code><span lang="en-us">Marker</span></code> color, text, and any other properties defined for that type.
</p>
<pre class="prettyprint"> var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});</pre>
<p>
<a target="_blank" href="../examples/simple.htm">View example </a>
</p>
</div>
<div>
<h2><a name="simple"></a>Changing Style Properties Example</h2>
<p>
Properties for the <code><span lang="en-us">StyledIcon</span></code> can be changed by using the <code><span lang="en-us">set</span></code> method. Pass the name of the property you want to change and the value.
</p>
<pre class="prettyprint"> styleIcon.set("text","Elevation: " + results[0].elevation + "m");</pre>
<p>
<a target="_blank" href="../examples/elevation.htm">View example </a>
</p>
</div>
<div>
<h2><a name="simple"></a>Changing Multiple Marker Style Properties Example</h2>
<p>
A <code><span lang="en-us">StyledIcon</span></code> can be created and passed to more than one <code><span lang="en-us">StyledMarker</span></code> to style many markers the same way.
</p>
<pre class="prettyprint"> 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});</pre>
<p>
Changing the property on a <code><span lang="en-us">StyledIcon</span></code> will change the style of every <code><span lang="en-us">StyledMarker</span></code> that <code><span lang="en-us">StyledIcon</span></code> is associated with.
</p>
<pre class="prettyprint"> google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});</pre>
<p>
<a target="_blank" href="../examples/change_color.htm">View example </a>
</p>
</div>
<div>
<h2><a name="simple"></a>Using Classes Example</h2>
<p>
A <code><span lang="en-us">StyledIcon</span></code> can be passed as a class to <code><span lang="en-us">StyledIconOptions</span></code> to set global properties on multiple <code><span lang="en-us">StyledIcons</span></code>. When creating a class use <code><span lang="en-us">StyledIconType.CLASS</span></code>.
</p>
<pre class="prettyprint"> 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});</pre>
<p>
This can be useful, for instance, when you want to change the color of multiple <code><span lang="en-us">StyledMarkers</span></code> that have different text.
</p>
<p>
<a target="_blank" href="../examples/class_use.htm">View example </a>
</p>
</div>
</body>
</html>