<?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>Blog of Travis Hydzik &#187; markers</title>
	<atom:link href="http://thydzik.com/tag/markers/feed/" rel="self" type="application/rss+xml" />
	<link>http://thydzik.com</link>
	<description>random snippets and information</description>
	<lastBuildDate>Fri, 27 Jan 2012 13:54:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>thydzik Google Map v2.1 released &#8211; now with KML support</title>
		<link>http://thydzik.com/thydzik-google-map-v2-1-released-now-with-kml-support/</link>
		<comments>http://thydzik.com/thydzik-google-map-v2-1-released-now-with-kml-support/#comments</comments>
		<pubDate>Fri, 28 Oct 2011 04:42:50 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[thydzik Google Map]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[KML]]></category>
		<category><![CDATA[Map]]></category>
		<category><![CDATA[markers]]></category>
		<category><![CDATA[v2.1]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=743</guid>
		<description><![CDATA[The release of thydzik Goole Map version 2.1 supports KML files which once displayed can even be downloaded as GPX files. Download from the WordPress plugin repository. The following example uses the included example.kml file. google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS5rbWw=', -1, 'ROADMAP', 1, 'KML'); }); The following examples use the included example.xml file. Marker [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzik-google-map-v2-1-released-now-with-kml-support/' addthis:title='thydzik Google Map v2.1 released &#8211; now with KML support ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<p>The release of thydzik Goole Map version 2.1 supports KML files which once displayed can even be downloaded as GPX files.</p>
<p><a href="http://wordpress.org/extend/plugins/thydzik-google-map/">Download from the WordPress plugin repository.</a></p>
<p>The following example uses the included <em><a title="example.kml" href="http://thydzik.com/wp-content/plugins/thydzik-google-map/example.kml" target="_blank">example.kml</a></em> file.</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n1' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS5rbWw=', -1, 'ROADMAP', 1, 'KML'); });
</script>
<!--/thydzikgooglemap-->

<p>The following examples use the included <em><a title="examples.xml" href="http://thydzik.com/wp-content/plugins/thydzik-google-map/example.xml" target="_blank">example.xml</a></em> file.</p>
<pre class="brush: xml; title: ; notranslate">
&amp;lt;markers&amp;gt;
&amp;lt;!-- Marker Z has no html to show nonclickability--&amp;gt;
&amp;lt;marker lat=&amp;quot;-31.9554&amp;quot; lng=&amp;quot;115.85859&amp;quot;  icon=&amp;quot;Z&amp;quot; color=&amp;quot;c89bff&amp;quot;/&amp;gt;
&amp;lt;marker lat=&amp;quot;-32.053128&amp;quot; lng=&amp;quot;115.745869&amp;quot; html=&amp;quot;Fremantle&amp;quot;  icon=&amp;quot;1&amp;quot; color=&amp;quot;6b98ff&amp;quot;/&amp;gt;
&amp;lt;!-- Standard marker with html--&amp;gt;
&amp;lt;marker lat=&amp;quot;-32.036036&amp;quot; lng=&amp;quot;115.92724&amp;quot; html=&amp;quot;&amp;amp;lt;b&amp;amp;gt;Lynwood&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;Residence of the author&amp;quot; color=&amp;quot;ffed5c&amp;quot;/&amp;gt;
&amp;lt;marker lat=&amp;quot;-31.963013&amp;quot; lng=&amp;quot;115.836239&amp;quot; html=&amp;quot;Kings Park&amp;quot; icon=&amp;quot;KP&amp;quot; color=&amp;quot;97ec7d&amp;quot;/&amp;gt;
&amp;lt;!-- Character marker with html that includes link--&amp;gt;
&amp;lt;marker lat=&amp;quot;-31.956659&amp;quot; lng=&amp;quot;115.869906&amp;quot; html=&amp;quot;&amp;amp;lt;a href=&amp;amp;quot;http://perthmint.com.au&amp;amp;quot; rel=&amp;amp;quot;nofollow&amp;amp;quot;&amp;amp;gt;Perth Mint&amp;amp;lt;/a&amp;amp;gt;&amp;quot; icon=&amp;quot;$&amp;quot; color=&amp;quot;ffffff&amp;quot;/&amp;gt;
&amp;lt;!-- Example of two lines--&amp;gt;
&amp;lt;line colour=&amp;quot;#0000FF&amp;quot; width=&amp;quot;2&amp;quot; opacity=&amp;quot;0.75&amp;quot;&amp;gt;
	&amp;lt;point lat=&amp;quot;-32.027579&amp;quot; lng=&amp;quot;115.751266&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.987404&amp;quot; lng=&amp;quot;115.769463&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.957697&amp;quot; lng=&amp;quot;115.852203&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.963814&amp;quot; lng=&amp;quot;115.879326&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-32.026415&amp;quot; lng=&amp;quot;115.942154&amp;quot; /&amp;gt;
&amp;lt;/line&amp;gt;
&amp;lt;points colour=&amp;quot;#FF0000&amp;quot; width=&amp;quot;4&amp;quot; opacity=&amp;quot;0.75&amp;quot;&amp;gt;
	&amp;lt;point lat=&amp;quot;-32.053128&amp;quot; lng=&amp;quot;115.745869&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.963013&amp;quot; lng=&amp;quot;115.836239&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.9554&amp;quot; lng=&amp;quot;115.85859&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-31.956659&amp;quot; lng=&amp;quot;115.869906&amp;quot; /&amp;gt;
	&amp;lt;point lat=&amp;quot;-32.036036&amp;quot; lng=&amp;quot;115.92724&amp;quot; /&amp;gt;
&amp;lt;/points&amp;gt;
&amp;lt;/markers&amp;gt;
</pre>
<ul>
<li>Marker Z &#8211; no HTML, nonclickable.</li>
<li>Marker 1 &#8211; standard maker with some text.</li>
<li>Marker Default &#8211; no icon defaults to standard Google Maps marker.</li>
<li>Marker $ &#8211; symbols can even be displayed on a marker and links in the HTML.</li>
<li>Marker KP &#8211; up to two characters can be displayed.</li>
</ul>
<p>To display a map, simply type;</p>
<pre>thydzikgooglemap(example.xml)</pre>
<p>For the more adventurous;</p>
<pre>thydzikgooglemap(example.xml, width, height, zoom, maptype)</pre>
<p>where;</p>
<ul>
<li>example.xml is your xml file, and example xml file is included with thdyzikGoogleMap in the plugin directory.</li>
<li>width is the optional width parameter, if left out the default width defined in the thydzikgooglemap options will be used.</li>
<li>height is the optional height parameter, if left out the default height defined in the thydzikgooglemap options will be used.</li>
<li>zoom is the optional zoom level from 0 to 17 (0 being the furthest away), if left out zoom will be calculated automatically to fit all points.</li>
<li>maptype is the optional map type parameters, which can be (Normal, G_NORMAL_MAP, N), (SATELLITE, G_SATELLITE_MAP, S), (HYBRID, G_HYBRID_MAP, H), (PHYSICAL, G_PHYSICAL_MAP, P, TERRAIN or T) if left out Normal is defined.</li>
</ul>
<p><strong>Normal</strong>, <strong>G_NORMAL_MAP</strong>, <strong>N</strong> or left out; i.e. <strong>thydzikgooglemap(example.xml)</strong>, thydzikgooglemap will produce a default styled map;</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n2' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n2', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p><strong>SATELLITE</strong>, <strong>G_SATELLITE_MAP</strong>, <strong>S</strong>; i.e. <strong>thydzikgooglemap(example.xml, 4, S)</strong>, thydzikgooglemap will produce a satellite styled map. Note I have included a zoom of 4, and used the abreviation &#8216;S&#8217;;</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n3' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n3', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', 4, 'SATELLITE', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p><strong>HYBRID</strong>, <strong>G_HYBRID_MAP</strong>, <strong>H</strong>; i.e. <strong>tHyDzIkGoOgLeMaP(example.xml,hYbRiD,450,225)</strong>, thydzikGoolgeMap will produce a hybrid styled map. Note I have included a width and height, and proved that capitalisation is not of concern;</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n4' style='width: 450px; height: 225px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n4', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'HYBRID', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p><strong>PHYSICAL</strong>, <strong>G_PHYSICAL_MAP</strong>, <strong>P</strong>, <strong>TERRAIN</strong> or <strong>T</strong>; i.e <strong>thydzikgooglemap(example.xml,TERRAIN)</strong>, thydzikgooglemap will produce a terrain styled map;</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n5' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n5', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'TERRAIN', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p><strong>Reading XML from different folder</strong><br />
The XML can be in any location, as long as the whole path is specified i.e. thydzikgooglemap(<a href="thydzikgooglemap(http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml)">http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml</a>). Yes, even links in the marker text are preserved.</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n6' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n6', 'aHR0cDovL3RoeWR6aWsuY29tL2dlb2NhY2hpbmcva2FycmF0aGEtbWFyMDgva2FycmF0aGEtbWFyMDgueG1s', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>Reading XML from different domain<br />
The XML can even be on a different domain, as long as the whole path is specified. i.e. thydzikgooglemap(<a href="http://sonyaandtravis.com/maps/clare-melbourne08.xml">http://sonyaandtravis.com/maps/our-nullarbor-adventure-clare-melbourne08.xml</a>).</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map743n7' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map743n7', 'aHR0cDovL3NvbnlhYW5kdHJhdmlzLmNvbS9tYXBzL291ci1udWxsYXJib3ItYWR2ZW50dXJlLWNsYXJlLW1lbGJvdXJuZTA4LnhtbA==', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzik-google-map-v2-1-released-now-with-kml-support/' addthis:title='thydzik Google Map v2.1 released &#8211; now with KML support ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://thydzik.com/thydzik-google-map-v2-1-released-now-with-kml-support/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dynamic Google Maps circle markers/icons with PHP</title>
		<link>http://thydzik.com/dynamic-google-maps-circle-markersicons-with-php/</link>
		<comments>http://thydzik.com/dynamic-google-maps-circle-markersicons-with-php/#comments</comments>
		<pubDate>Fri, 04 Mar 2011 16:13:56 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Arial]]></category>
		<category><![CDATA[circle]]></category>
		<category><![CDATA[Dynamic]]></category>
		<category><![CDATA[Google Maps]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[markers]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[symbols]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=580</guid>
		<description><![CDATA[A while back I posted on how to create dynamic Google maps markers which allow for any colour and any text in the classic Google map style. Recently, I have had a need to do the same with circular markers. It uses the &#8216;Image Smooth Arc&#8216; function provided by Ulrich Mierendorff. Similarly, I provide a [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/dynamic-google-maps-circle-markersicons-with-php/' addthis:title='Dynamic Google Maps circle markers/icons with PHP ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<p>A while back I posted on how to create <a href="http://thydzik.com/dynamic-google-maps-markersicons-with-php/">dynamic Google maps markers</a> which allow for any colour and any text in the classic Google map style.</p>
<p>Recently, I have had a need to do the same with circular markers. It uses the &#8216;<a href="http://mierendo.com/software/antialiased_arcs/">Image Smooth Arc</a>&#8216; function provided by Ulrich Mierendorff.</p>
<p>Similarly, I provide a little demo of some PHP code that does this that I quickly whipped up. Here are some example markers:<br />
<a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=A" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=Z" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=1" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=10" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=PQ" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=69" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=%BE" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=Ω" alt="Ω" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=$" alt="$" /></a><br />
(Have a look at the image name)</p>
<p>Now that gets a little boring, how about some <strong>color</strong>:<br />
<a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?color=fdabff" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=A&amp;color=c89bff" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=Z&amp;color=01bf00" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=1&amp;color=97ec7d" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=10&amp;color=6b98ff" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=PQ&amp;color=bce3ff" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=69&amp;color=ffed5c" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=%BE&amp;color=cb9d7c" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=Ω&amp;color=fd8d08" alt="Ω" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/cmarker.php?text=$&amp;color=ffffff" alt="$" /></a><br />
(Again, have a look at the image name)</p>
<p>Again, you will need to download the <a title="modifies arial font" href="http://thydzik.com/thydzikGoogleMap/arial.ttf" target="_blank">modified arial font</a> and host it in the same directory.</p>
<p>Have a look at the PHP source code below:</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
	include (&quot;imageSmoothArc_optimized.php&quot;);

	$color = $_GET['color'];
	if (!$color) {$color = &quot;ff776b&quot;;} //default google map color
	$color = str_replace(&quot;#&quot;, &quot;&quot;, $color);
	$string = $_GET['text'];

	$font = realpath('arial.ttf');

	//unfortunately we still must do some offsetting
	switch (ord(substr($string,0,1))) {
		case 49: //1
			$offset = -2;
			break;
		case 55: //7
			$offset = -1;
			break;
		case 65: //A
			$offset = 1;
			break;
		case 74: //J
			$offset = -1;
			break;
		case 84: //T
			$offset = 1;
			break;
		case 99: //c
			$offset = -1;
			break;
		case 106: //j
			$offset = 1;
			break;
	}
	if (strlen($string) == 1) {
		$fontsize = 10.5;
	} else if (strlen($string) == 2) {
		$fontsize = 9;
	} else {
		$fontsize = 10.5;
		$offset = 0; //reset offset
		$string = chr(149);
	}

	$bbox = imagettfbbox($fontsize, 0, $font, $string);
	$width = $bbox[2] - $bbox[0] + 1;
	$height = $bbox[1] - $bbox[7] + 1;

	$im = imagecreatetruecolor(20, 20);

	//add the alpha
	$trans_colour = imagecolorallocatealpha($im, 0, 0, 0, 127);
	imagefill($im, 0, 0, $trans_colour);

	imageAlphaBlending($im, true);
	imageSaveAlpha($im, true);

	$bord_ellipse = array (0, 0, 0, 0);
	imageSmoothArc($im, 9, 10, 17, 17, $bord_ellipse, 0, 2*M_PI); //x, y, width, hegiht

	$fill_ellipse = array (hexdec(substr($color,0,2)), hexdec(substr($color,2,2)), hexdec(substr($color,4,2)), 0);
	imageSmoothArc($im, 9, 10, 16, 16, $fill_ellipse, 0, 2*M_PI); //x, y, width, hegiht

	$black = imagecolorallocate($im, 0, 0, 0);
	imagettftext($im, $fontsize, 0, 11 - $width/2 + $offset, 9 + $height/2, $black, $font, $string);

	header(&quot;Content-type: image/png&quot;);
	imagepng($im);
	imagedestroy($im);
?&gt;
</pre>
<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/dynamic-google-maps-circle-markersicons-with-php/' addthis:title='Dynamic Google Maps circle markers/icons with PHP ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://thydzik.com/dynamic-google-maps-circle-markersicons-with-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dynamic Google Maps markers/icons with PHP</title>
		<link>http://thydzik.com/dynamic-google-maps-markersicons-with-php/</link>
		<comments>http://thydzik.com/dynamic-google-maps-markersicons-with-php/#comments</comments>
		<pubDate>Thu, 26 Mar 2009 07:48:11 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Arial]]></category>
		<category><![CDATA[Dynamic]]></category>
		<category><![CDATA[Google Maps]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[markers]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[symbols]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=205</guid>
		<description><![CDATA[I am a avid fan of Google&#8217;s Map API, have even have created my own WordPress Google Maps plug-in (thydzikGoogleMap), but one feature that I find lacking are customisable markers, with the need to include an image file for every customisable marker, now if you want a selection of colours and labels this creates a [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/dynamic-google-maps-markersicons-with-php/' addthis:title='Dynamic Google Maps markers/icons with PHP ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<p>I am a avid fan of Google&#8217;s Map API, have even have created my own WordPress Google Maps plug-in (<a title="thydzik Google Map plugin" href="http://thydzik.com/category/thydzikgooglemap/" target="_blank">thydzikGoogleMap</a>), but one feature that I find lacking are customisable markers, with the need to include an image file for every customisable marker, now if you want a selection of colours and labels this creates a huge image database.</p>
<p>Google has gone in the right step their <a title="Google Map Icon Maker" href="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/examples/markericonoptions-wizard.html" target="_blank">MapIconMaker</a> allowing very customisable markers using the Charts API marker output. But why not take this a step further and add dynamically generated <strong>text</strong> as well.</p>
<p>Hence, I provide a little demo of some PHP code that does this that I quickly whipped up. Here are some example markers:<br />
<a><img src="http://thydzik.com/thydzikGoogleMap/marker.php" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=A" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=Z" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=1" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=10" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=PQ" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=69" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=%BE" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=Ω" alt="Ω" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=$" alt="$" /></a><br />
(Have a look at the image name)</p>
<p>Now that gets a little boring, how about some <strong>color</strong>:<br />
<a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?color=fdabff" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=A&amp;color=c89bff" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=Z&amp;color=01bf00" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=1&amp;color=97ec7d" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=10&amp;color=6b98ff" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=PQ&amp;color=bce3ff" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=69&amp;color=ffed5c" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=%BE&amp;color=cb9d7c" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=Ω&amp;color=fd8d08" alt="Ω" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/marker.php?text=$&amp;color=ffffff" alt="$" /></a><br />
(Again, have a look at the image name)</p>
<p>Unfortunately, not all symbols work (not sure why, even though they are in the font) and if the symbol doesn&#8217;t work it will default to the default bullet (this is done with a modified font file).</p>
<p>Also there may be an issue with alignment. All main characters 0-9 and A-Z; I have added manual offsets, this could be improved.</p>
<p>You will need to download the <a title="modifies arial font" href="http://thydzik.com/thydzikGoogleMap/arial.ttf" target="_blank">modified arial font</a> and host it in the same directory.</p>
<p><strong>Update:</strong> it looks like in Internet Explorer the transparencies are incorrectly displayed, this is not the case when displayed on a Google Map.</p>
<p><iframe frameborder="0" src="http://thydzik.com/thydzik-google-map-old/index.html" width="460" height="345" scrolling="no"></iframe></p>
<p>Have a look at the PHP source code below:</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
	 $color = $_GET['color'];
	 if (!$color) {$color = &quot;ff776b&quot;;} //default google map color
	 $color = str_replace(&quot;#&quot;, &quot;&quot;, $color);
	 $string = $_GET['text'];

	 //some smarts to prevent hotlinking
	 if (!stristr($_SERVER['HTTP_REFERER'], &quot;thydzik.com&quot;)) {
		$string = chr(169);
	 }
	 $font = 'arial';

	 //unfortunately we still must do some offsetting
	 switch (ord(substr($string,0,1))) {
		 case 49: //1
			$offset = -2;
			break;
		 case 55: //7
			$offset = -1;
			break;
		 case 65: //A
			$offset = 1;
			break;
		 case 74: //J
			$offset = -1;
			break;
		 case 84: //T
			$offset = 1;
			break;
		 case 99: //c
			$offset = -1;
			break;
		 case 106: //j
			$offset = 1;
			break;
	 }
	 if (strlen($string) == 1) {
		$fontsize = 10.5;
	 } else if (strlen($string) == 2) {
		$fontsize = 9;
	 } else {
		$fontsize = 10.5;
		$offset = 0; //reset offset
		$string = chr(149);
	 }

	 $bbox = imagettfbbox($fontsize, 0, $font, $string);
	 $width = $bbox[2] - $bbox[0] + 1;
	 $height = $bbox[1] - $bbox[7] + 1;

	 $image_name = &quot;http://chart.apis.google.com/chart?cht=mm&amp;chs=20x34&amp;chco=$color,$color,000000&amp;ext=.png&quot;;
	 $im = imagecreatefrompng($image_name);
	 imageAlphaBlending($im, true);
	 imageSaveAlpha($im, true);
	 $black = imagecolorallocate($im, 0, 0, 0);

	 imagettftext($im, $fontsize, 0, 11 - $width/2 + $offset, 9 + $height/2, $black, $font, $string);

	 header(&quot;Content-type: image/png&quot;);
	 imagepng($im);
	 imagedestroy($im);
?&gt;
</pre>
<p><strong>EDIT: 27th January 2010</strong></p>
<p>I have experienced some users with errors produced by the <em>imagecreatefrompng</em>, either due to versions &lt;4.3.0 disabling remote file access or <em>allow_url_fopen</em> being disabled.</p>
<p>A greater supported alternative is to use curl to fetch the Google marker. Replace the above with the below modification;</p>
<pre class="brush: php; title: ; notranslate">
	$image_name = &quot;http://chart.apis.google.com/chart?cht=mm&amp;chs=20x34&amp;chco=$color,$color,000000&amp;ext=.png&quot;;

	$ch = curl_init();
	curl_setopt ($ch, CURLOPT_URL, $image_name);
	curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 0);

	// Getting binary data
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);

	$image_string = curl_exec($ch);
	curl_close($ch);

	$im = imagecreatefromstring ($image_string);
</pre>
<p><strong>EDIT: 30th November 2011</strong></p>
<p>Hosting of these dynamic markers, linked on <a href="http://code.google.com/p/google-maps-icons/wiki/NumericIcons#Symbol_You_Want_on_Color_You_Want" title="Numeric Icons" target="_blank">NumericIcons</a> is using all my allocated hosting server resources. I have modified the script to redirect to Google&#8217;s dynamic markers (yes, Google has the equivalent) hopefully that will take some of the load off, and I won&#8217;t need to remove it totally.</p>
<p>They look slightly different to mine;<br />
<a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=A" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=Z" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=1" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=10" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=PQ" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=69" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=%BE" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=O" alt="O" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=$" alt="$" /></a></p>
<p><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?color=fdabff" alt="Default" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=A&amp;color=c89bff" alt="A" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=Z&amp;color=01bf00" alt="Z" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=1&amp;color=97ec7d" alt="1" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=10&amp;color=6b98ff" alt="10" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=PQ&amp;color=bce3ff" alt="PQ" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=69&amp;color=ffed5c" alt="69" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=%BE&amp;color=cb9d7c" alt="%BE" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=O&amp;color=fd8d08" alt="O" /></a><a><img src="http://thydzik.com/thydzikGoogleMap/markerlink.php?text=$&amp;color=ffffff" alt="$" /></a></p>
<pre class="brush: php; title: ; notranslate">
	if (!$color = $_GET['color']) {
		$color = &quot;ff776b&quot;; //default google map color
	}
	$color = str_replace(&quot;#&quot;, &quot;&quot;, $color);

	if (!$text = $_GET['text']) {
		$text = &quot;%e2%bc%80&quot;; //default google map icon
	}

	header(&quot;Location: http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld={$text}|{$color}|000000&amp;.png&quot;);
</pre>
<p><strong>EDIT: 6 December 2011</strong><br />
I now have implemented an Apache Mod_Rewrite solution, which will take all load off the php processing, existing users should see no difference.</p>
<pre class="brush: plain; title: ; notranslate">
RewriteCond %{QUERY_STRING} ^text=([^&amp;]*)$
RewriteRule ^thydzikGoogleMap/markerlink\.php$ http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=%1|ff776b|000000&amp;.png? [R,L]

RewriteCond %{QUERY_STRING} ^color=([^&amp;]*)$
RewriteRule ^thydzikGoogleMap/markerlink\.php$ http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=â¼€|%1|000000&amp;.png? [R,L]

RewriteCond %{QUERY_STRING} ^text=(.*)\&amp;color=(.*)$
RewriteRule ^thydzikGoogleMap/markerlink\.php$ http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=%1|%2|000000&amp;.png? [R,L]

RewriteCond %{QUERY_STRING} ^color=(.*)\&amp;text=(.*)$
RewriteRule ^thydzikGoogleMap/markerlink\.php$ http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=%2|%1|000000&amp;.png? [R,L]

RewriteCond %{QUERY_STRING} =&quot;&quot;
RewriteRule ^thydzikGoogleMap/markerlink\.php$ http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=â¼€|ff776b|000000&amp;.png? [R,L]
</pre>
<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/dynamic-google-maps-markersicons-with-php/' addthis:title='Dynamic Google Maps markers/icons with PHP ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://thydzik.com/dynamic-google-maps-markersicons-with-php/feed/</wfw:commentRss>
		<slash:comments>63</slash:comments>
		</item>
		<item>
		<title>thydzik Google Map version 1.4.6.1</title>
		<link>http://thydzik.com/thydzik-google-map-version-1461/</link>
		<comments>http://thydzik.com/thydzik-google-map-version-1461/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 05:03:00 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[thydzik Google Map]]></category>
		<category><![CDATA[clickable]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[maps]]></category>
		<category><![CDATA[markers]]></category>
		<category><![CDATA[RoboGeo]]></category>
		<category><![CDATA[v1.4.6.1]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=199</guid>
		<description><![CDATA[Latest offering has cleaned up JavaScript, improved error handling, improved RoboGEO handling of XML, but main features are. Icons now support letters &#8216;A&#8217; to &#8216;Z&#8217;. Non clickable markers if no &#8216;html&#8217; element is present. In the below example Marker Z is not clickable. google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map199n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'ROADMAP', 1, 'XML'); }); Download [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzik-google-map-version-1461/' addthis:title='thydzik Google Map version 1.4.6.1 ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<p>Latest offering has cleaned up JavaScript, improved error handling, improved RoboGEO handling of XML, but main features are.</p>
<ul>
<li>Icons now support letters &#8216;A&#8217; to &#8216;Z&#8217;.</li>
<li>Non clickable markers if no &#8216;html&#8217; element is present.</li>
</ul>
<p>In the below example Marker Z is not clickable.</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map199n1' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map199n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>Download the latest from the <a title="thydzik Google Map download" href="http://wordpress.org/extend/plugins/thydzik-google-map/">WordPress repository</a>.</p>
<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzik-google-map-version-1461/' addthis:title='thydzik Google Map version 1.4.6.1 ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://thydzik.com/thydzik-google-map-version-1461/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced
Object Caching 951/1007 objects using disk: basic
Content Delivery Network via t01.thydzik.com

Served from: thydzik.com @ 2012-02-10 20:10:05 -->
