Expanding works

Here is a way to modify free Googlemaps Plugin to draw multiple markers on your joomla site (joomla 1.5).

First of all you need to get your plugin. You can find it here. Now install and active.

Fun will begin from this point:)

Usage of plugin:

For more examples of how to use Googlemaps plugin visit developer's site.

Using basic version of plugin we can past only one address, description and image. My task was rewrite code to enable passing multiple addresses, descriptions and images for one map. What I'm trying to achieve is:

We need to find files which is responsible for reading arguments and drawing map. Fortunately there is only one file that we need to edit:)

It's  "your_site/plugins/system/plugin_googlemap2.php":
378

/ Parameters can get the default from the plugin if not empty or from the administrator part of the plugin
$width = $this->params->get( 'width', '100%' );
$height = $this->params->get( 'height', '400px' );
$deflatitude = $this->params->get( 'lat', '52.075581' );
$deflongitude = $this->params->get( 'lon', '4.541513' );
$centerlat = $this->params->get( 'centerlat', '' );
$centerlon = $this->params->get( 'centerlon', '' );
//$address = $this->params->get( 'address', '' );
$zoom = $this->params->get( 'zoom', '10' );

Comment line which contains address declaration. It takes $address value from back end panel.

Now it needs to be declared the way we want ( as array). Go to line 523 and add those lines:

$address = array();
$image = array();
$message = array();

so you'll receive something like this:
514

// default empty and should be filled as a parameter with the plugin out of the content item
$code='';
$lbcode='';
$lang = $this->language;
$mapclass='';
$tolat='';
$tolon='';
$toaddress='';
$description='';
$tooltip='';
$address = array();
$image = array();
$message = array();
$kml = array();
$kmlsb = array();
$layer = array();
$lookat = array();
$camera = array();

Next step will be read values for our variables. We need to put some extra code for read values and insert them into array.

We'll begin our coding around line 690. Try to find

else if($values[0]=='lang'){
$lang=$values[1];
}

and after it place this code:

else if($values[0]=='address'){
	$address[0]=trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='[')&&preg_match("/address\([0-9]+\)/", $values[0])){
	$address[$this->_get_index($values[0], '(')] = trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='{')&&preg_match("/address\[[0-9]+\]/", $values[0])){
	$address[$this->_get_index($values[0], '[')] = trim($values[1]);
}else if($values[0]=='pic'){
	$image[0]=trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='[')&&preg_match("/pic\([0-9]+\)/", $values[0])){
	$image[$this->_get_index($values[0], '(')] = trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='{')&&preg_match("/pic\[[0-9]+\]/", $values[0])){
	$image[$this->_get_index($values[0], '[')] = trim($values[1]);
}else if($values[0]=='message'){
	$message[0]=trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='[')&&preg_match("/txt\([0-9]+\)/", $values[0])){
	$message[$this->_get_index($values[0], '(')] = trim($values[1]);
}else if(($this->brackets=='both'||$this->brackets=='{')&&preg_match("/txt\[[0-9]+\]/", $values[0])){
	$message[$this->_get_index($values[0], '[')] = trim($values[1]);
}

This will allocate values defined in your {mosmap } into appropriate array. Now addresses values are in address array, txt values are in message array and pic values are in pic array. Now we need to build a marker for each one address and place our values over there.

We need to do some alternations to one statement. It's near 1900 line.

if($client_geo == 1){if ($clientgeotype=="local") {
	$code.="\nvar localSearch = new GlocalSearch();";
	$replace = array("\n", "\r", "<br/>", "<br />", "<br>");
	$addr = str_replace($replace, '', $address);
 
	$code.="\nvar address = \"".$addr."\";";
	$code.="\nlocalSearch.setSearchCompleteCallback(null,	function() {
			if (localSearch.results[0]) {
			var resultLat = localSearch.results[0].lat;
			var resultLng = localSearch.results[0].lng;
			var point = new GLatLng(resultLat,resultLng);
			} else ";
 
	if ($latitude !=''&&$longitude!='')
		$code.="var point = new GLatLng( $latitude, $longitude);";
	else
		$code.="var point = new GLatLng( $deflatitude, $deflongitude);";
	} else {
		$code.="var geocoder = new GClientGeocoder();";
		$replace = array("\n", "\r", "<br/>", "<br />", "<br>");
		$addr = str_replace($replace, '', $address);
 
		$code.="var address = \"".$addr."\";";
		$code.="geocoder.getLatLng(address, function(point) {
			    if (!point)";
 
		if ($latitude !=''&&$longitude!='')
			$code.="var point = new GLatLng( $latitude, $longitude);";
		else
			$code.="var point = new GLatLng( $deflatitude, $deflongitude);";
	}
 
} else { //we'll add our code here
	if ($latitude !=''&&$longitude!='')
		$code.="\nvar point = new GLatLng( $latitude, $longitude);";
	else
		$code.="\nvar point = new GLatLng( $deflatitude, $deflongitude);";
}

Delete everything inside else block and paste this code:

$i = 0;
foreach($address as $ind){			
 
	//search for the address
	$coord = $this->get_geo($ind);
	//get directions
	list ($longitude, $latitude, $altitude) = explode(",", $coord);
	$code.="\nvar point = new GLatLng( $latitude, $longitude);";
        $code.="\nvar mess = \"".$message[$i]."\";";
	$code.="\nvar img = \"".$image[$i]."\";";
	$code.="map".$mapnm.".addOverlay(createMarker(point, mess, img));";
	$i++;
}

To see our markers we've to create our own function. I've called it createMarker(), parameters that we past to it are point ( location of our address), message (description ) and img(image for that place). Try to find the line in your plugin file:

$code.="<script type='text/javascript'>//<![CDATA[\n";

Then add following script:

$code.="	function createMarker(point, message, img) {
// Create our tiny marker icon
var SailIcon = new GIcon(G_DEFAULT_ICON);
 
// Set up our GMarkerOptions object
markerOptions = { icon:SailIcon };
 
var marker = new GMarker(point, markerOptions );
 
GEvent.addListener(marker, 'click', function() {
var myHtml = '<img src='+img+
' style=\'height: 75px;position: relative; float: left\'/>
<div style=\'position: relative; float: left; margin: 0 10px;\'>'+message+ '</div>
 
';
 
map".$mapnm.".openInfoWindowHtml(point, myHtml);
});
return marker;
}";

Now you can try our upgraded plugin:)

Please be lenient for my spellings and grammar. I'm waiting for your opinions.

Posted in Joomla | Tags: google map, googlemap plugin, Joomla, joomla 1.5, marker, multi, multi marker | 19 Comments »