{"id":20,"date":"2009-02-01T16:42:34","date_gmt":"2009-02-01T16:42:34","guid":{"rendered":"http:\/\/cotsweb.com\/blog\/?p=20"},"modified":"2009-09-09T11:01:34","modified_gmt":"2009-09-09T10:01:34","slug":"adding-custom-icons-to-google-maps","status":"publish","type":"post","link":"https:\/\/www.cotsweb.com\/blog\/adding-custom-icons-to-google-maps-20.html","title":{"rendered":"Adding custom icons to Google Maps"},"content":{"rendered":"<p>I have just been putting together a website\u00a0 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.\u00a0 One of the pages includes a map of Stow showing the Town Square and the various parking options for the festival.\u00a0 I used Google Maps for this page.<\/p>\n<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.\u00a0 So I thought I&#8217;d try to make it easier for next time by documenting the issues I came across.<\/p>\n<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.\u00a0 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.\u00a0 Thank you very much to Erwin Bolwidt!<\/p>\n<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.\u00a0 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).\u00a0 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).\u00a0 As you can see I took the opportunity to add a 3rd option to make the icon non-clickable.<br \/>\n<pre><code class=\"preserve-code-formatting\">\n\/\/ Place parking icon for Maugersbury Road\nvar Parking3Opts = {title: &quot;Pay and display car parking on Maugersbury Road&quot;,\nclickable: false,\nicon: Picon};\nvar Parking3Coordinates = new GLatLng(51.927500, -1.718300); \u00a0 \u00a0 \/* position of carpark *\/\nmap.addOverlay(new GMarker(Parking3Coordinates, Parking3Opts)); <\/code><\/pre><\/p>\n<p>That was the map sorted out but I wanted to add a little legend outside the map.\u00a0 Obviously putting in my<\/p>\n<p><img loading=\"lazy\" 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.\u00a0 But the default GMarker for Google Maps was more elusive, I had real trouble finding a copy of it.\u00a0 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 loading=\"lazy\" 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>\n<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>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>I have just been putting together a website\u00a0 for Stow-on-the-Wold&#8217;s Cotswold Festival in September 2009.\u00a0 One of the pages includes a map of Stow showing the Town Square and the various parking options for the festival.\u00a0 I used Google Maps for this page. Now Google Maps is a wonderful product, very powerful and well documented, [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[38,22,18],"tags":[138,139,39,41,40],"_links":{"self":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/20"}],"collection":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":5,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}