<?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; Javascript</title>
	<atom:link href="http://thydzik.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://thydzik.com</link>
	<description>random snippets and information</description>
	<lastBuildDate>Mon, 30 Apr 2012 15:46:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Ultimate Google Maps XML JavaScript function</title>
		<link>http://thydzik.com/ultimate-google-maps-xml-javascript-function/</link>
		<comments>http://thydzik.com/ultimate-google-maps-xml-javascript-function/#comments</comments>
		<pubDate>Tue, 15 Mar 2011 16:42:19 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Google Map]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[V3]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=589</guid>
		<description><![CDATA[I believe I have come up with the most versatile Google Maps function. Parameters are Dev ID name (devid), XML location (xml), zoom and map type (zoom). To use it you will need to do the following; Script header: DIV in the body: XML in the following form: And the JavaScript code: Example map google.maps.event.addDomListener(window, [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/ultimate-google-maps-xml-javascript-function/' addthis:title='Ultimate Google Maps XML JavaScript function ' ><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 believe I have come up with the most versatile Google Maps function. Parameters are Dev ID name (devid), XML location (xml), zoom and map type (zoom). </p>
<p>To use it you will need to do the following;</p>
<p>Script header:</p>
<pre class="brush: css; title: ; notranslate">
&lt;script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'&gt;&lt;/script&gt;
</pre>
<p>DIV in the body:</p>
<pre class="brush: css; title: ; notranslate">
&lt;div id='map484524264' style='width: 450px; height: 345px'&gt;&lt;/div&gt;
&lt;script type='text/javascript'&gt;
google.maps.event.addDomListener(window,'load', function() {thydzikgm('map484524264','http://thydzik.info/example2.xml',-1,'ROADMAP');});
&lt;/script&gt;
</pre>
<p>XML in the following form:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;markers&gt;
&lt;!-- Marker Z has no html to show nonclickability--&gt;
&lt;marker lat=&quot;-31.9554&quot; lng=&quot;115.85859&quot;  icon=&quot;Z&quot; color=&quot;c89bff&quot;/&gt;
&lt;marker lat=&quot;-32.053128&quot; lng=&quot;115.745869&quot; html=&quot;Fremantle&quot;  icon=&quot;1&quot; color=&quot;6b98ff&quot;/&gt;
&lt;!-- Standard marker with html--&gt;
&lt;marker lat=&quot;-32.036036&quot; lng=&quot;115.92724&quot; html=&quot;Lynwood&amp;lt;br&amp;gt;Residence of the author&quot; color=&quot;ffed5c&quot;/&gt;
&lt;marker lat=&quot;-31.963013&quot; lng=&quot;115.836239&quot; html=&quot;Kings Park&quot; icon=&quot;KP&quot; color=&quot;97ec7d&quot;/&gt;
&lt;!-- Character marker with html that includes link--&gt;
&lt;marker lat=&quot;-31.956659&quot; lng=&quot;115.869906&quot; html=&quot;&amp;lt;a href=&amp;quot;http://perthmint.com.au&amp;quot; rel=&amp;quot;nofollow&amp;quot;&amp;gt;Perth Mint&amp;lt;/a&amp;gt;&quot; icon=&quot;$&quot; color=&quot;ffffff&quot;/&gt;
&lt;!-- Example of two lines--&gt;
&lt;line colour=&quot;#0000FF&quot; width=&quot;2&quot; opacity=&quot;0.75&quot;&gt;
	&lt;point lat=&quot;-32.027579&quot; lng=&quot;115.751266&quot; /&gt;
	&lt;point lat=&quot;-31.987404&quot; lng=&quot;115.769463&quot; /&gt;
	&lt;point lat=&quot;-31.957697&quot; lng=&quot;115.852203&quot; /&gt;
	&lt;point lat=&quot;-31.963814&quot; lng=&quot;115.879326&quot; /&gt;
	&lt;point lat=&quot;-32.026415&quot; lng=&quot;115.942154&quot; /&gt;
&lt;/line&gt;
&lt;points colour=&quot;#FF0000&quot; width=&quot;4&quot; opacity=&quot;0.75&quot;&gt;
	&lt;point lat=&quot;-32.053128&quot; lng=&quot;115.745869&quot; /&gt;
	&lt;point lat=&quot;-31.963013&quot; lng=&quot;115.836239&quot; /&gt;
	&lt;point lat=&quot;-31.9554&quot; lng=&quot;115.85859&quot; /&gt;
	&lt;point lat=&quot;-31.956659&quot; lng=&quot;115.869906&quot; /&gt;
	&lt;point lat=&quot;-32.036036&quot; lng=&quot;115.92724&quot; /&gt;
&lt;/points&gt;
&lt;/markers&gt;
</pre>
<p>And the JavaScript code:</p>
<pre class="brush: jscript; title: ; notranslate">
function thydzikgm(devid, xml, zoom, type) {
	var bounds = new google.maps.LatLngBounds();

	var map = new google.maps.Map(document.getElementById(devid));
	eval(&quot;map.setMapTypeId(google.maps.MapTypeId.&quot;+type+&quot;)&quot;);

	var icons = []; //initiate array of icons
	var infowindow = new google.maps.InfoWindow();
	var shadow = new google.maps.MarkerImage(&quot;https://chart.googleapis.com/chart?chst=d_map_pin_shadow&quot;, new google.maps.Size(40, 37), null, new google.maps.Point(10, 37));
	var size = new google.maps.Size(21, 34);
    jQuery.get(xml, function(data) {
		jQuery(data).find(&quot;marker&quot;).each(function() {
			var lat = jQuery(this).attr(&quot;lat&quot;);
			var lng = jQuery(this).attr(&quot;lng&quot;);
			if (lat &amp;&amp; lng) {
				var latlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
				bounds.extend(latlng);

				var text = (jQuery(this).attr(&quot;icon&quot;) || &quot;&quot;).replace(&quot;Marker.png&quot;,&quot;&quot;).substring(0, 2) || &quot;%e2%bc%80&quot;; //closest to a default dot symbol
				var colour = jQuery(this).attr(&quot;colour&quot;) || jQuery(this).attr(&quot;color&quot;) || &quot;ff776b&quot;; //google default red colour
				var key = text+colour; //text can never be a hex colour
				if (!icons[key]) {
					icons[key] = new google.maps.MarkerImage(&quot;https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=&quot;+text+&quot;|&quot;+colour+&quot;|000000&amp;.png&quot;, size);
				}
				var marker = new google.maps.Marker({
					position: latlng,
					icon: icons[key],
					map: map,
					shadow: shadow
				});

				var html = jQuery(this).attr(&quot;html&quot;);
				if (html) {
					var xml_path = xml.substr(0,xml.lastIndexOf(&quot;/&quot;)+1);
					html = html.replace(html.match(/href='(?!(http|ftp))/ig), &quot;href='&quot;+xml_path);
					html = html.replace(html.match(/href=&quot;(?!(http|ftp))/ig), 'href=&quot;'+xml_path);
					html = html.replace(html.match(/src='(?!(http|ftp))/ig), &quot;src='&quot;+xml_path);
					html = html.replace(html.match(/src=&quot;(?!(http|ftp))/ig), 'src=&quot;'+xml_path);
					google.maps.event.addListener(marker, 'click', function() {
						infowindow.setContent(html);
						infowindow.open(map, marker);
					});
				} else {
					marker.setClickable(false);
				}
			}
		});
		jQuery.each([&quot;line&quot;,&quot;points&quot;], function() {
			jQuery(data).find(String(this)).each(function() {
				var latlng_arr = [];
				var colour = jQuery(this).attr(&quot;colour&quot;) || jQuery(this).attr(&quot;color&quot;) || &quot;0000ff&quot;;
				if (colour.charAt(0)!==&quot;#&quot;) {
					colour = &quot;#&quot;+colour;
				}

				jQuery(this).find(&quot;point&quot;).each(function() {
					var lat = jQuery(this).attr(&quot;lat&quot;);
					var lng = jQuery(this).attr(&quot;lng&quot;);
					if (lat &amp;&amp; lng) {
						var latlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
						bounds.extend(latlng);
						latlng_arr.push(latlng);
					}
				});
				var line = new google.maps.Polyline({
					path: latlng_arr,
					strokeColor: colour,
					strokeOpacity: parseFloat(jQuery(this).attr(&quot;opacity&quot;) || &quot;0.75&quot;),
					strokeWeight: parseFloat(jQuery(this).attr(&quot;width&quot;) || &quot;4&quot;)
				});
				line.setMap(map);
			});
		});
		map.fitBounds(bounds);

		if (zoom !== -1) {
			var listener = google.maps.event.addListener(map, &quot;idle&quot;, function() {
				map.setZoom(zoom);
				google.maps.event.removeListener(listener);
			});
		}
		google.maps.event.addListener(map, 'click', function() {
			infowindow.close(map);
		});
    }, &quot;xml&quot;);
}
</pre>
<p>Example map</p>
<!--thydzikgooglemap-->
<div class='tgm_div' id='map589n1' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map589n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/ultimate-google-maps-xml-javascript-function/' addthis:title='Ultimate Google Maps XML JavaScript function ' ><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/ultimate-google-maps-xml-javascript-function/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>thydzikGoogleMap v1.4.5 &#8211; an inline Google map plugin for WordPress</title>
		<link>http://thydzik.com/thydzikgooglemap-v145-an-inline-google-map-plugin-for-wordpress/</link>
		<comments>http://thydzik.com/thydzikgooglemap-v145-an-inline-google-map-plugin-for-wordpress/#comments</comments>
		<pubDate>Thu, 15 Jan 2009 11:45:06 +0000</pubDate>
		<dc:creator>thydzik</dc:creator>
				<category><![CDATA[thydzik Google Map]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[inline]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[maps]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[v1.4.5]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[zoom]]></category>

		<guid isPermaLink="false">http://thydzik.com/?p=159</guid>
		<description><![CDATA[thydzikGoogleMap v1.4.5 is now available with significant improvements, including The Google Maps Javascript and thydzikGoogleMap Javascript is downloaded only as needed, speeding up page loading of all pages without maps. Removal of &#60;head&#62; code means thydzikGoogleMap will only be present when called. Compressed thydzikGoogleMap code. Multiple maps can now be created in a single post! [...]<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzikgooglemap-v145-an-inline-google-map-plugin-for-wordpress/' addthis:title='thydzikGoogleMap v1.4.5 &#8211; an inline Google map plugin for WordPress ' ><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>thydzikGoogleMap v1.4.5 is now available with significant improvements, including</p>
<ul type="disc">
<li>The Google Maps Javascript      and thydzikGoogleMap Javascript is downloaded only as needed, speeding up      page loading of all pages without maps.</li>
<li>Removal of &lt;head&gt; code      means thydzikGoogleMap will only be present when called.</li>
<li>Compressed thydzikGoogleMap code.</li>
<li><strong>Multiple maps can now be      created in a single post!</strong></li>
<li>Map type can be changed from      default by providing an additional &#8216;map type&#8217; parameter.</li>
</ul>
<p>thydzikGoogleMap produces valid XHTML and allows for easy creation of Google Maps in your WordPress posts from XML map data.</p>
<p><a title="Download thydzikGoogleMap" href="http://wordpress.org/extend/plugins/thydzik-google-map/" target="_blank">Grab the latest from the WordPress repository.</a></p>
<p>Examples of the newest functionality below:</p>
<p>Using either: <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='map159n1' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map159n1', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'ROADMAP', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>Using either: <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='map159n2' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map159n2', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', 4, 'SATELLITE', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>Using either: <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='map159n3' style='width: 450px; height: 225px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map159n3', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'HYBRID', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>Finally, using either: <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='map159n4' style='width: 460px; height: 345px'></div>
<script type='text/javascript'>
google.maps.event.addDomListener(window, 'load', function () {thydzikgm('map159n4', 'aHR0cDovL3RoeWR6aWsuY29tL3dwLWNvbnRlbnQvcGx1Z2lucy90aHlkemlrLWdvb2dsZS1tYXAvZXhhbXBsZS54bWw=', -1, 'TERRAIN', 1, 'XML'); });
</script>
<!--/thydzikgooglemap-->

<p>As always, comments and suggestions welcome. In a future update I will try to incorporate rounded corners :)</p>
<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://thydzik.com/thydzikgooglemap-v145-an-inline-google-map-plugin-for-wordpress/' addthis:title='thydzikGoogleMap v1.4.5 &#8211; an inline Google map plugin for WordPress ' ><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/thydzikgooglemap-v145-an-inline-google-map-plugin-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>14</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 664/664 objects using disk: basic
Content Delivery Network via t01.thydzik.com

Served from: thydzik.com @ 2012-05-23 08:27:21 -->
