Blog of Travis Hydzik

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