Using Google Maps in Yii Applications via Jquery

You are viewing revision #4 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#3)

Author: Christian Salazar

This a clear way to implement a human-address-based google map using a jQuery extension. It is very simple and usefull.

STEP 1

put this script in your page, using a direct script insertion, or using your Yii script manager:

[javascript]
<script>
$.fn.googlemap = function(){
	// author: Christian Salazar <christiansalazarh@gmail.com>
	var src='';
	$(this).each(function(){
	var z = $(this);
	var address = jQuery.trim(z.attr('streetnumber'))
		+'+'+jQuery.trim(z.attr('streetname'))
		+'+'+jQuery.trim(z.attr('cityname'))
		+'+'+jQuery.trim(z.attr('statecode'))
		+'+'+jQuery.trim(z.attr('zipcode'))
	;
	src="https://maps.google.com/maps?"
		+"client=safari"
		+"&q="+address
		+"&oe=UTF-8&ie=UTF8&hq="
		+"&hnear="+address
		+"&gl=us"
		+"&z="+z.attr('zoom')
		+"&output=embed";
		z.html("<iframe src='"+src+"' width="+z.attr('width')+" height="
		+z.attr('height')+"></iframe>");
	});
	return src;
}
</script>

STEP 2

In any place were you require the google map, insert a DIV or any HTML element having this attributes:

[html]
<div id='map' streetnumber='946' streetname='LAKE+DESTINY+RD'
        cityname='ALTAMONTE+SPRINGS' statecode='FL' zipcode='32714'
        zoom=18 width=500 height=300>
</div>

STEP 3 Use the script, in this way:

[javascript]
<script>$('#map').googlemap();</script>
// you can use it in multiple selectors, 
// as an example: $("ul.maps li").googlemap();
// will process all LI items having the required attributes
// displaying a map each.

It will produce:

Extras

As an extra feature, the jquery extension provided here will return the URL:

[javascript]
<script>
  var url = $('#mymap').googlemap();
  $('#mymap').parent().append("<a href='"+url+"'>enlarge map</a>");
</script>