thydzik Google Map v2.1 released – now with KML support

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.

thydzikgooglemap(example.kml)

The following examples use the included example.xml file.

<markers>
<!-- Marker Z has no html to show nonclickability-->
<marker lat="-31.9554" lng="115.85859"  icon="Z" color="c89bff"/>
<marker lat="-32.053128" lng="115.745869" html="Fremantle"  icon="1" color="6b98ff"/>
<!-- Standard marker with html-->
<marker lat="-32.036036" lng="115.92724" html="<b>Lynwood</b><br>Residence of the author" color="ffed5c"/>
<marker lat="-31.963013" lng="115.836239" html="Kings Park" icon="KP" color="97ec7d"/>
<!-- Character marker with html that includes link-->
<marker lat="-31.956659" lng="115.869906" html="<a href="http://perthmint.com.au" rel="nofollow">Perth Mint</a>" icon="$" color="ffffff"/>
<!-- Example of two lines-->
<line colour="#0000FF" width="2" opacity="0.75">
	<point lat="-32.027579" lng="115.751266" />
	<point lat="-31.987404" lng="115.769463" />
	<point lat="-31.957697" lng="115.852203" />
	<point lat="-31.963814" lng="115.879326" />
	<point lat="-32.026415" lng="115.942154" />
</line>
<points colour="#FF0000" width="4" opacity="0.75">
	<point lat="-32.053128" lng="115.745869" />
	<point lat="-31.963013" lng="115.836239" />
	<point lat="-31.9554" lng="115.85859" />
	<point lat="-31.956659" lng="115.869906" />
	<point lat="-32.036036" lng="115.92724" />
</points>
</markers>
  • Marker Z – no HTML, nonclickable.
  • Marker 1 – standard maker with some text.
  • Marker Default – no icon defaults to standard Google Maps marker.
  • Marker $ – symbols can even be displayed on a marker and links in the HTML.
  • Marker KP – up to two characters can be displayed.

To display a map, simply type;

thydzikgooglemap(example.xml)

For the more adventurous;

thydzikgooglemap(example.xml, width, height, zoom, maptype)

where;

  • example.xml is your xml file, and example xml file is included with thdyzikGoogleMap in the plugin directory.
  • width is the optional width parameter, if left out the default width defined in the thydzikgooglemap options will be used.
  • height is the optional height parameter, if left out the default height defined in the thydzikgooglemap options will be used.
  • 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.
  • 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.

Normal, G_NORMAL_MAP, N or left out; i.e. thydzikgooglemap(example.xml), thydzikgooglemap will produce a default styled map;

thydzikgooglemap(example.xml)

SATELLITE, G_SATELLITE_MAP, S; i.e. thydzikgooglemap(example.xml, 4, S), thydzikgooglemap will produce a satellite styled map. Note I have included a zoom of 4, and used the abreviation ‘S’;

thydzikgooglemap(example.xml, 4, S)

HYBRID, G_HYBRID_MAP, H; i.e. tHyDzIkGoOgLeMaP(example.xml,hYbRiD,450,225), thydzikGoolgeMap will produce a hybrid styled map. Note I have included a width and height, and proved that capitalisation is not of concern;

tHyDzIkGoOgLeMaP(example.xml, hYbRiD, 450,225)

PHYSICAL, G_PHYSICAL_MAP, P, TERRAIN or T; i.e thydzikgooglemap(example.xml,TERRAIN), thydzikgooglemap will produce a terrain styled map;

thydzikgooglemap(example.xml,TERRAIN)

Reading XML from different folder
The XML can be in any location, as long as the whole path is specified i.e. thydzikgooglemap(http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml). Yes, even links in the marker text are preserved.

thydzikgooglemap(http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml)

Reading XML from different domain
The XML can even be on a different domain, as long as the whole path is specified. i.e. thydzikgooglemap(http://sonyaandtravis.com/maps/our-nullarbor-adventure-clare-melbourne08.xml).

thydzikgooglemap(http://sonyaandtravis.com/maps/our-nullarbor-adventure-clare-melbourne08.xml)

Ultimate Google Maps XML JavaScript function

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:

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>

DIV in the body:

<div id='map484524264' style='width: 450px; height: 345px'></div>
<script type='text/javascript'> 
google.maps.event.addDomListener(window,'load', function() {thydzikgm('map484524264','http://thydzik.info/example2.xml',-1,'ROADMAP');});
</script>

XML in the following form:

<markers>
<!-- Marker Z has no html to show nonclickability-->
<marker lat="-31.9554" lng="115.85859"  icon="Z" color="c89bff"/>
<marker lat="-32.053128" lng="115.745869" html="Fremantle"  icon="1" color="6b98ff"/>
<!-- Standard marker with html-->
<marker lat="-32.036036" lng="115.92724" html="Lynwood&lt;br&gt;Residence of the author" color="ffed5c"/>
<marker lat="-31.963013" lng="115.836239" html="Kings Park" icon="KP" color="97ec7d"/>
<!-- Character marker with html that includes link-->
<marker lat="-31.956659" lng="115.869906" html="&lt;a href=&quot;http://perthmint.com.au&quot; rel=&quot;nofollow&quot;&gt;Perth Mint&lt;/a&gt;" icon="$" color="ffffff"/>
<!-- Example of two lines-->
<line colour="#0000FF" width="2" opacity="0.75">
	<point lat="-32.027579" lng="115.751266" />
	<point lat="-31.987404" lng="115.769463" />
	<point lat="-31.957697" lng="115.852203" />
	<point lat="-31.963814" lng="115.879326" />
	<point lat="-32.026415" lng="115.942154" />
</line>
<points colour="#FF0000" width="4" opacity="0.75">
	<point lat="-32.053128" lng="115.745869" />
	<point lat="-31.963013" lng="115.836239" />
	<point lat="-31.9554" lng="115.85859" />
	<point lat="-31.956659" lng="115.869906" />
	<point lat="-32.036036" lng="115.92724" />
</points> 
</markers>

And the JavaScript code:

function thydzikgm(devid, xml, zoom, type) {
	var bounds = new google.maps.LatLngBounds();

	var map = new google.maps.Map(document.getElementById(devid));
	eval("map.setMapTypeId(google.maps.MapTypeId."+type+")");
	
	var icons = []; //initiate array of icons
	var infowindow = new google.maps.InfoWindow();
	var shadow = new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_shadow", 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("marker").each(function() {
			var lat = jQuery(this).attr("lat");
			var lng = jQuery(this).attr("lng");
			if (lat && lng) {
				var latlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
				bounds.extend(latlng);
				
				var text = (jQuery(this).attr("icon") || "").replace("Marker.png","").substring(0, 2) || "%e2%bc%80"; //closest to a default dot symbol
				var colour = jQuery(this).attr("colour") || jQuery(this).attr("color") || "ff776b"; //google default red colour
				var key = text+colour; //text can never be a hex colour
				if (!icons[key]) {
					icons[key] = new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld="+text+"|"+colour+"|000000&.png", size);
				}
				var marker = new google.maps.Marker({
					position: latlng,
					icon: icons[key],
					map: map,
					shadow: shadow
				});
				
				var html = jQuery(this).attr("html");
				if (html) {
					var xml_path = xml.substr(0,xml.lastIndexOf("/")+1);
					html = html.replace(html.match(/href='(?!(http|ftp))/ig), "href='"+xml_path);
					html = html.replace(html.match(/href="(?!(http|ftp))/ig), 'href="'+xml_path);
					html = html.replace(html.match(/src='(?!(http|ftp))/ig), "src='"+xml_path);
					html = html.replace(html.match(/src="(?!(http|ftp))/ig), 'src="'+xml_path);
					google.maps.event.addListener(marker, 'click', function() {
						infowindow.setContent(html); 
						infowindow.open(map, marker);
					});
				} else {
					marker.setClickable(false);
				}
			}
		});
		jQuery.each(["line","points"], function() {
			jQuery(data).find(String(this)).each(function() {
				var latlng_arr = [];
				var colour = jQuery(this).attr("colour") || jQuery(this).attr("color") || "0000ff";
				if (colour.charAt(0)!=="#") {
					colour = "#"+colour;
				}
				
				jQuery(this).find("point").each(function() {
					var lat = jQuery(this).attr("lat");
					var lng = jQuery(this).attr("lng");
					if (lat && 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("opacity") || "0.75"),
					strokeWeight: parseFloat(jQuery(this).attr("width") || "4")
				});
				line.setMap(map);
			});
		});
		map.fitBounds(bounds);
		
		if (zoom !== -1) {
			var listener = google.maps.event.addListener(map, "idle", function() { 
				map.setZoom(zoom);
				google.maps.event.removeListener(listener); 
			});
		}
		google.maps.event.addListener(map, 'click', function() {
			infowindow.close(map);
		});
    }, "xml");
}

Example map

thydzikgooglemap(example.xml)

thydzik’s WordPress Tool – a WordPress error and link extractor

Here is a simple tool that might be useful to others, it does two main things;

  1. Parses your post’s content as XML and spits out any possible errors, and
  2. Extracts all external links, which can be exported as an Excel Tab delimited file.

Post’s content errors

Each post’s content is wrapped with XML dummy tags and then passed with Microsoft’s XML parser. A feature of this parser is to check the XML structure when reading and output any errors. The WordPress Tool simply displays this raw output for each post. I have found it does do a good job of ‘typo’ errors, but depending on the content it may be erroneous, especially if you have code snippets and such.

Post’s external links

This was the main reason for designing this tool, I needed to extract all the links and confirm they met my ‘lowercase word hyphen word’ standard. You can export the links as a Tab delimited file, simply open it up in Excel.

How to use

  1. Download a WordPress eXtended RSS export of your blog. Go to Tools -> Export of your Admin page.
  2. Run thydzik’s WordPress Tool.
  3. Click ‘Select File’ and browse to the downloaded xml file.
  4. A report of links will automatically be generated, click the Errors radio button to see the error report.
  5. On either the Links or Errors option, click Export to export to a tab delimited file for Excel (note post content is not included in the file).

Screenshots

thydzik's WordPress Tool - Post content error example

thydzik's WordPress Tool - Post content links example

Download

Download thydzik’s WordPress Tool

thydzik Google Map version 1.4.6.1

Latest offering has cleaned up JavaScript, improved error handling, improved RoboGEO handling of XML, but main features are.

  • Icons now support letters ‘A’ to ‘Z’.
  • Non clickable markers if no ‘html’ element is present.

In the below example Marker Z is not clickable.

thydzikgooglemap(example.xml)

Download the latest from the WordPress repository.

thydzikGoogleMap v1.3

I have finally managed to get WordPress to update the version number. This problem was due to not updating the version number in the PHP file as well as the readme.txt.

Version 1.3 fixes a problem with thydzikGoogleMap not displaying correctly when a WordPress blog isn’t located in the domain folder.

I have seen a few users, using thydzikGoogleMap to display a single point or no points at all, thydzikGoogleMap isn’t really for this as it is not worth creating an XML file just for the single point. Plus I believe you can now simply embed a Google map with some simple code.

However, if you want full customization; including lines, numbered points, HTML in a point’s detail, then thydzikGoogleMap is exactly for you.

Comments and suggestions very welcome.

Download thydzikGoogleMap v1.3

thydzikGoogleMap v1.1

thydzikGoogleMap v1.1 has been released with major updates:

  • cross-domain XML files can be used as the map data, see example below.
  • due to WordPress plugin repository automatically zipping plugins, the main plugin folder is changed. Anyone upgrading from v1.0, requires deletion of old folder.
  • Lots of code improvements, was a bug with displaying the default marker style.
  • Works with RoboGeo produced XML files.

The below example shows cross-domain support, I am using the XML file found in my second blog
http://sonyaandtravis.com/../china2007.xml

thydzikGoogleMap(http://sonyaandtravis.com/maps/china2007.xml, 3)

Download here