<?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>cotsweb.com Blog &#187; Google Maps</title>
	<atom:link href="http://www.cotsweb.com/blog/category/web-design/google-maps/feed" rel="self" type="application/rss+xml" />
	<link>http://www.cotsweb.com/blog</link>
	<description>Web design, Website development and life in the Cotswolds</description>
	<lastBuildDate>Mon, 06 Sep 2010 09:38:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Adding custom icons to Google Maps</title>
		<link>http://www.cotsweb.com/blog/adding-custom-icons-to-google-maps-20.html</link>
		<comments>http://www.cotsweb.com/blog/adding-custom-icons-to-google-maps-20.html#comments</comments>
		<pubDate>Sun, 01 Feb 2009 16:42:34 +0000</pubDate>
		<dc:creator>cotsweb</dc:creator>
				<category><![CDATA[Google Maps]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[shadows]]></category>
		<category><![CDATA[titles]]></category>

		<guid isPermaLink="false">http://cotsweb.com/blog/?p=20</guid>
		<description><![CDATA[I have just been putting together a website  for Stow-on-the-Wold&#8217;s Cotswold Festival in September 2009.  One of the pages includes a map of Stow showing the Town Square and the various parking options for the festival.  I used Google Maps for this page. Now Google Maps is a wonderful product, very powerful and well documented, [...]]]></description>
			<content:encoded><![CDATA[<p>I have just been putting together a website  for<a title="The Cotswold Festival in Stow on the Wold" href="http://www.cotswoldfestival.com" target="_blank"> Stow-on-the-Wold&#8217;s Cotswold Festival</a> in September 2009.  One of the pages includes a map of Stow showing the Town Square and the various parking options for the festival.  I used Google Maps for this page.</p>
<p>Now Google Maps is a wonderful product, very powerful and well documented, but I don&#8217;t always find it easy to figure out how to do what I want to do.  So I thought I&#8217;d try to make it easier for next time by documenting the issues I came across.</p>
<p>My first problem was creating custom icons for the carparks, I found a suitable graphic but Google Maps has a very smart shadow associated with each icon.  Fortunately I found <a title="Google Maps API icon shadowmaker" href="http://www.cycloloco.com/shadowmaker/" target="_blank">shadowmaker</a> which made creating the shadow effect very simple indeed, it even provided the code to be included in my webpage.  Thank you very much to Erwin Bolwidt!</p>
<p>Next I wanted to display the custom icon but with a tooltip type title which would give some descriptive text when a mouse rolled over the icon.  Both the icon and the title are options for GMarker, but I had some trouble figuring out how to include more than one option (I&#8217;m not very bright really).  The solution is quite straight forward really, just create a new variable which contains all the options (I could also have listed the options in the new GMarker call but that would have been messy).  As you can see I took the opportunity to add a 3rd option to make the icon non-clickable.<br />
<pre><code>
// Place parking icon for Maugersbury Road
var Parking3Opts = {title: &quot;Pay and display car parking on Maugersbury Road&quot;,
clickable: false,
icon: Picon};
var Parking3Coordinates = new GLatLng(51.927500, -1.718300);     /* position of carpark */
map.addOverlay(new GMarker(Parking3Coordinates, Parking3Opts)); </code></pre></p>
<p>That was the map sorted out but I wanted to add a little legend outside the map.  Obviously putting in my</p>
<p><img class="size-full wp-image-23" title="carparkicon1" src="http://cotsweb.com/blog/wp-content/uploads/2009/02/carparkicon1.jpg" alt="Icon for car parks on my Google Map" width="24" height="24" /> icon on the page wasn&#8217;t a problem, I had a copy of that.  But the default GMarker for Google Maps was more elusive, I had real trouble finding a copy of it.  Eventually I did find one <a title="Google Maps default icon image" href="http://www.korben.info/ajouter-google-maps-a-votre-site-en-moins-de-10-min.html" target="_blank">here</a> , thank you Korben. So I include a copy of Korben&#8217;s image here so others can download it <img class="alignnone size-full wp-image-24" title="gmarker" src="http://cotsweb.com/blog/wp-content/uploads/2009/02/gmarker.png" alt="gmarker" width="24" height="38" />I&#8217;m sure the icon is available from Google somewhere but I couldn&#8217;t find it.</p>
<p>That was it for my map (so far), I hope that this makes the process a little easier for the next person who is mystified by the Google Maps API.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cotsweb.com/blog/adding-custom-icons-to-google-maps-20.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
