<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Erics Tech Blog &#187; ym4r</title>
	<atom:link href="http://eric.lubow.org/tag/ym4r/feed/" rel="self" type="application/rss+xml" />
	<link>http://eric.lubow.org</link>
	<description>Thoughts, musings, and other idealistic (sometimes useful) systems and development hoopla.</description>
	<lastBuildDate>Fri, 18 Nov 2011 14:56:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Custom Google Maps Marker With YM4R_GM</title>
		<link>http://eric.lubow.org/2009/ruby/rails/custom-google-maps-marker-with-ym4r_gm/</link>
		<comments>http://eric.lubow.org/2009/ruby/rails/custom-google-maps-marker-with-ym4r_gm/#comments</comments>
		<pubDate>Mon, 14 Dec 2009 13:00:29 +0000</pubDate>
		<dc:creator>eric</dc:creator>
				<category><![CDATA[Rails]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[maps]]></category>
		<category><![CDATA[ym4r]]></category>

		<guid isPermaLink="false">http://eric.lubow.org/?p=466</guid>
		<description><![CDATA[In one my Rails applications, I allow the user to search for surrounding businesses from their current location. I always showed them a You Are Here marker. The issue I had with this was that the marker was always the icon as the search results. Differentiating these markers is actually extremely easy with ym4r_gm plugin. [...]]]></description>
			<content:encoded><![CDATA[<p>In one my Rails applications, I allow the user to search for surrounding businesses from their current location.  I always showed them a <em>You Are Here</em> marker.  The issue I had with this was that the marker was always the icon as the search results.  Differentiating these markers is actually extremely easy with <a href="http://ym4r.rubyforge.org/">ym4r_gm plugin</a>.</p>
<p>First thing is to find a custom icon that you want to use.  You can just Google for custom Google maps icons.  I chose to use their default icon, just in a different blue. (You can download it <a href="http://eric.lubow.org/wp-content/uploads/2009/12/gmap_blue_icon.png">here</a> so you are working with what I am working with for this example).  The next thing I did was to use the Google <a href="http://www.powerhut.co.uk/googlemaps/custom_markers.php">custom markers web site</a> to find the proper config options for the icon.<br />
<span id="more-466"></span><br />
The Rails code is just used to create Javascript.  That is why it&#8217;s a good idea to run the image through custom markers website to get the Javascript output.  Ym4r_gm just turns the Ruby options specified into Javascript.  There are more options available, but this is the bare minimum necessary to create a separate icon.  All you need to do is use the option names given to you by the custom markers site and &#8220;Rubyify&#8221; them in <em>GIcon.new</em> (note: this is slightly harder than it sounds).</p>
<div class="codecolorer-container rails default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="rails codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#0066ff; font-weight:bold;">@map</span>.<span style="color:#9900CC;">icon_global_init</span><span style="color:#006600; font-weight:bold;">&#40;</span><br />
&nbsp; GIcon.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span> &nbsp;<span style="color:#ff3333; font-weight:bold;">:image</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;/images/gmap_blue_icon.png&quot;</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#ff3333; font-weight:bold;">:icon_size</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> GSize.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">32</span>, <span style="color:#006666;">32</span><span style="color:#006600; font-weight:bold;">&#41;</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#ff3333; font-weight:bold;">:icon_anchor</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> GPoint.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">16</span>, <span style="color:#006666;">32</span><span style="color:#006600; font-weight:bold;">&#41;</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#ff3333; font-weight:bold;">:info_window_anchor</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> GPoint.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">16</span>, <span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#996600;">'youarehere_icon'</span><span style="color:#006600; font-weight:bold;">&#41;</span><br />
youarehere_icon = Variable.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'youarehere_icon'</span><span style="color:#006600; font-weight:bold;">&#41;</span> &nbsp; &nbsp;<br />
<span style="color:#0066ff; font-weight:bold;">@map</span>.<span style="color:#9900CC;">center_zoom_init</span><span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#006600; font-weight:bold;">&#91;</span> <span style="color:#0066ff; font-weight:bold;">@location</span>.<span style="color:#9900CC;">lat</span>, <span style="color:#0066ff; font-weight:bold;">@location</span>.<span style="color:#9900CC;">lng</span> <span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#006666;">15</span> <span style="color:#006600; font-weight:bold;">&#41;</span><br />
youarehere = GMarker.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#006600; font-weight:bold;">&#91;</span> <span style="color:#0066ff; font-weight:bold;">@location</span>.<span style="color:#9900CC;">lat</span>, <span style="color:#0066ff; font-weight:bold;">@location</span>.<span style="color:#9900CC;">lng</span> <span style="color:#006600; font-weight:bold;">&#93;</span>,<br />
&nbsp; <span style="color:#ff3333; font-weight:bold;">:title</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;You Are Here&quot;</span>,<br />
&nbsp; <span style="color:#ff3333; font-weight:bold;">:info_window</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;You Are Here&quot;</span>,<br />
&nbsp; <span style="color:#ff3333; font-weight:bold;">:icon</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> youarehere_icon,<br />
&nbsp; :<span style="color:#5A0A0A; font-weight:bold;">draggable</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">false</span><br />
<span style="color:#006600; font-weight:bold;">&#41;</span><br />
<br />
<span style="color:#0066ff; font-weight:bold;">@map</span>.<span style="color:#9900CC;">declare_init</span><span style="color:#006600; font-weight:bold;">&#40;</span> youarehere, <span style="color:#996600;">'youarehere'</span> <span style="color:#006600; font-weight:bold;">&#41;</span><br />
<span style="color:#0066ff; font-weight:bold;">@map</span>.<span style="color:#9900CC;">overlay_init</span><span style="color:#006600; font-weight:bold;">&#40;</span> youarehere <span style="color:#006600; font-weight:bold;">&#41;</span></div></div>
<p>A few things worth nothing about this code in order to better understand what it&#8217;s doing.</p>
<p>If you don&#8217;t have the <strong>icon_size</strong> set properly, then your icon will look funny when the map renders.  The <strong>icon_anchor</strong> and <strong>info_window_anchor</strong> are just coincidentally half of 32, this is not always the case.  And that last item in <em>GIcon.new</em> is what is going to be the Javascript variable name.  For sanity&#8217;s sake, I chose to keep the Ruby variable name and Javascript variable names consistent.  The <em>Variable.new</em> line creates a ym4r_gm icon object in Ruby to be  passed to the <em>:icon</em> parameter of the <em>youarehere</em> marker.</p>
<p>The rest of the code is similar to your regular ym4r_gm map icon stuff.</p>


<p>Related posts:<ol><li><a href='http://eric.lubow.org/2009/ruby/rails/one-time-modal-windows-with-rails-and-fancybox/' rel='bookmark' title='One Time Modal Windows With Rails and Fancybox'>One Time Modal Windows With Rails and Fancybox</a></li>
<li><a href='http://eric.lubow.org/2011/security/google-securing-the-web-one-discrete-monopolizing-push-at-a-time/' rel='bookmark' title='Google Securing The Web One Discrete Monopolizing Push At A Time'>Google Securing The Web One Discrete Monopolizing Push At A Time</a></li>
<li><a href='http://eric.lubow.org/2010/databases/mongodb/getting-a-random-record-from-a-mongodb-collection/' rel='bookmark' title='Getting a Random Record From a MongoDB Collection'>Getting a Random Record From a MongoDB Collection</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://eric.lubow.org/2009/ruby/rails/custom-google-maps-marker-with-ym4r_gm/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

