Lazy Load v2 – delay image loading Nivo Slider v3

Nivo Slider is a great image slider which I recently implemented on one of my WordPress blogs, the problem with the current version is all images need to be loaded first prior to running the Nivo Slider JavaScript.

After a bit of searching I found a fork by Lee Powers named Lazy Load, the update was for an older version of Nivo Slider which didn’t support responsive images.

After a bit of copy and pasting I managed to port Lazy Load to the updated Nivo Slider version.

Find the fork on Github.

For an example of Lazy Load v2 with 100 images in a Nivo Slider head over to SonyaandTravis.com.

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)

thydzikGoogleMap v1.4.5 – an inline Google map plugin for WordPress

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 <head> code means thydzikGoogleMap will only be present when called.
  • Compressed thydzikGoogleMap code.
  • Multiple maps can now be created in a single post!
  • Map type can be changed from default by providing an additional ‘map type’ parameter.

thydzikGoogleMap produces valid XHTML and allows for easy creation of Google Maps in your WordPress posts from XML map data.

Grab the latest from the WordPress repository.

Examples of the newest functionality below:

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

thydzikGoogleMap(example.xml)

Using either: 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)

Using either: 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)

Finally, using either: 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)

As always, comments and suggestions welcome. In a future update I will try to incorporate rounded corners :)