RedJumpsuit

jobberBase custom development and support

Integrating Google Maps

Posted by admin on 3/27/10 • Categorized as Hacks, jobberBase

this is possibly the next most requested hack for jobberBase and so i took on myself to put together this hack and hopefully this is something that a lot of people will find very useful for their website. i have been looking for a google maps api class for a while and finally found one that is not so hard to implement and should be very easy to follow.

as always, if you encounter errors on this guide, please make sure you post the error string or code you receive as i will not be able to help you if i don’t know what’s wrong, right?

what you need:
1. register for a google maps API key
2. download the google maps api class from phpinsider.net
3. unzip and save the GoogleMapAPI.class.php file on the /_includes folder

buy me coffee if you like this post! :)

to start with, some screenshots for you people…




so here goes:

1. create your google maps settings table

CREATE TABLE `googlemaps` (
`id` INT NOT NULL AUTO_INCREMENT ,
`is_active` TINYINT NOT NULL DEFAULT '0',
`api_key` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`height` VARCHAR( 10 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`width` VARCHAR( 10 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`sidebar` TINYINT NOT NULL DEFAULT '0',
`direction` TINYINT NOT NULL DEFAULT '0',
`type` TINYINT NOT NULL DEFAULT '0',
`scale` TINYINT NOT NULL DEFAULT '0',
PRIMARY KEY ( `id` )
) ENGINE = MYISAM 
 
INSERT INTO `googlemaps` (
`id` ,
`is_active` ,
`api_key` ,
`height` ,
`width` ,
`sidebar` ,
`direction` ,
`type` ,
`scale`
)
VALUES (
NULL , '1', 'your-google-maps-api-key', '200px', '300px', '0', '0', '0', '0'
);

2. backup your jobs table (important!) after getting a backup, alter your jobs table to include an address field that will be used by google maps

ALTER TABLE `jobs` ADD `address` VARCHAR( 255 ) NULL AFTER `company`

3. open /config.php

after

require_once '_includes/smarty/libs/Smarty.class.php';

add below

// google map settings
require_once '_includes/class.GoogleMaps.php';
 
// google map api class
require_once '_includes/GoogleMapAPI.class.php';

after

define('CAPTCHA_PRIVATE_KEY', $settings['captcha_private_key']);

add below

// google maps api settings
$gm_class = new jbGoogleMaps();
$gm_settings = $gm_class->showsettings();
define('GOOGLE_MAPS_ACTIVE', $gm_settings['is_active']);
define('GOOGLE_MAPS_APIKEY', $gm_settings['api_key']);
define('GOOGLE_MAPS_H', $gm_settings['height']);
define('GOOGLE_MAPS_W', $gm_settings['width']);
define('GOOGLE_MAPS_SIDEBAR', $gm_settings['sidebar']);
define('GOOGLE_MAPS_DIRECTION', $gm_settings['direction']);
define('GOOGLE_MAPS_TYPECONTROL', $gm_settings['type']);	
define('GOOGLE_MAPS_SCALECONTROL', $gm_settings['scale']);

4. open /page_write.php

after

'poster_email' => $poster_email,

you will find this twice on this file, add this below

'address' => $address,

5. open /page_job.php

after

$smarty->assign('job', $info);

add this block

	if (GOOGLE_MAPS_ACTIVE == 1 && $info['address'] != '') 
	{
	// google maps - declare google map class
	$map = new GoogleMapAPI();
 
	// google maps - enter your google maps api key
	$map->setAPIKey(GOOGLE_MAPS_APIKEY);
 
	// google maps - set height and width
	$map->setWidth(GOOGLE_MAPS_W);
	$map->setHeight(GOOGLE_MAPS_H);
 
	// google maps - set if sidebar enabled
	if (GOOGLE_MAPS_SIDEBAR == 0) {
		$map->disableSidebar();
	}
 
	// google maps - set if direction enabled
	if (GOOGLE_MAPS_DIRECTION == 0) {
		$map->disableDirections();
	}
 
	// google maps - set if type enabled
	if (GOOGLE_MAPS_TYPECONTROL == 0) {
		$map->disableTypeControls();
	}
 
	// google maps - set if scale enabled
	if (GOOGLE_MAPS_SCALECONTROL == 0) {
		$map->disableScaleControl();
	}
 
	// google maps - create map marker for the address
	$map->addMarkerByAddress($info['address'],$info['company'],'<b>'. $info['company'] .'</b>');
 
	// google maps - assign api to smarty variables
	$smarty->assign('google_map_header',$map->getHeaderJS());
	$smarty->assign('google_map_js',$map->getMapJS());
	$smarty->assign('google_map_sidebar',$map->getSidebar());
	$smarty->assign('google_map',$map->getMap());
}

6. open /_templates/default/publish-write.tpl

after

<tr>
	<td class="publish-label">{$translations.publish.name_label}:</td>
	<td><input {if $errors.company}class="error"{/if} tabindex="6" type="text" name="company" id="company" size="40" value="{if $job.company}{$job.company|escape}{else}{$smarty.post.company|escape}{/if}" />
	<span class="validation-error">{if $errors.company}<img src="{$BASE_URL}_templates/{$THEME}/img/icon-delete.png" alt="" />{/if}</span>
	</td>
</tr>

add this

<tr>
	<td class="publish-label">{$translations.publish.address}:</td>
	<td><input {if $errors.address}class="error"{/if} tabindex="7" type="text" name="address" id="address" size="40" value="{if $job.address}{$job.address}{else}{$smarty.post.address}{/if}" />
	</td>
</tr>

notice the tabindex of the new field, it is set to 7, which means you have to adjust the tabindex (add 1) of the fields after it, don’t say i didn’t tell you!

7. open /_templates/default/job-details.tpl

after

{$job.description}

add this

{if $smarty.const.GOOGLE_MAPS_ACTIVE == 1 && $job.address != ''}
	<p>{$google_map}</p>
{/if}

8. open /_templates/default/header.tpl

after this

<script type="text/javascript">
	Jobber.I18n = {$translationsJson};
</script>

add this

{if $google_map_header}
	{$google_map_header}
	{$google_map_js}
	<!-- necessary for google maps polyline drawing in IE -->
	<style type="text/css">
	  v\:* {ldelim}
		behavior:url(#default#VML);
	 {rdelim}
	</style>
{/if}

and update this

<body>

to this

<body {if $google_map_header}onload="onLoad()"{/if}>

9. open /_includes/translations.ini

on

[publish]

add this

address = "Address"

then, add this at the end of the file

[googlemaps]
settings = "Google Maps Settings"
is_active = "Is Active?"
api_key = "API Key"
height = "Height"
width = "Width"
sidebar = "Sdiebar?"
direction = "Direction?"
type = "Type Control?"
scale = "Scale Control?"
submit = "Update Google Maps Seetings"

10. open /_includes/class.Job.php

after

var $mMySqlDate = false;

add

var $mAddress = false;

on the first SQL statement, after the field

c.name as type_name,

add this

a.address AS address,

after this

$this->mTypeVarName = $row['type_var_name'];

add this

$this->mAddress = $row['address'];

wherever you find this line

'type_name' => $this->mTypeName,

add this after

'address' => $this->mAddress,

look for this line

$sql = 'INSERT INTO '.DB_PREFIX.'jobs (type_id, category_id, title, description, company, city_id, url, apply, created_on, is_temp, is_active,

and update to this

$sql = 'INSERT INTO '.DB_PREFIX.'jobs (type_id, category_id, title, description, company, address, city_id, url, apply, created_on, is_temp, is_active,

then after this

"' . $params['company'] . '",

add this

 "' . $params['address'] . '",

still on the same file, look for this

company = "' . $params['company'] . '",

then add this after that

address = "' . $params['address'] . '",

11. create a new file on /_includes/ and save it as class.GoogleMaps.php then paste this code in the file you created

<?php
/**
 * jobber job board platform
 *
 * @author	RedJumpsuit <myredjumpsuit@gmail.com>
 * @web		http://www.redjumpsuit.net
 * 
 * Google Maps for jobberBase
 */
 
class jbGoogleMaps
{
 
	function __construct()
	{ }
 
	// update google maps settings
	public function updatesettings($data)
	{
		global $db;
 
		$sql = 'UPDATE '.DB_PREFIX.'googlemaps
					SET 
						is_active = '. $data['is_active'] .', 
						api_key = "'. trim($data['api_key']) .'",
						height = "'. trim($data['height']) .'",	
						width = "'. trim($data['width']) .'", 		
						sidebar = '. $data['sidebar'] .',
						direction = '. $data['direction'] .', 
						type = '. $data['type'] .', 
						scale = '. $data['scale'] .'
					WHERE id = 1';
 
		if ($db->query($sql))
		{
			return true;
		}
		else
		{
			return false;
		}
	}
 
	// show google maps settings
	public function showsettings()
	{
		global $db;
		$gmaps = array();
 
		$sql = 'SELECT * FROM '.DB_PREFIX.'googlemaps';
		$result = $db->query($sql);
		$row = $result->fetch_assoc();
 
		$gmaps['is_active'] = $row['is_active'];
		$gmaps['api_key'] = $row['api_key'];
		$gmaps['height'] = $row['height'];
		$gmaps['width'] = $row['width'];
		$gmaps['sidebar'] = $row['sidebar'];
		$gmaps['direction'] = $row['direction'];
		$gmaps['type'] = $row['type'];
		$gmaps['scale'] = $row['scale'];
 
		if (isset($gmaps))
		{
			return $gmaps;
		}
	}
 
}
?>

12. open /admin/index.php

after this

case 'cities':
	if(!isset($_SESSION['AdminId']))
	{
		redirect_to(BASE_URL);
		exit;
	}
 
	require_once 'page_cities.php';
	$flag = 1;
	$citiesPage = new CitiesPage();
	$template = $citiesPage->processRequest($id, $extra, $smarty);
	break;

add this

case 'googlemaps':
	if(!isset($_SESSION['AdminId']))
	{
		redirect_to(BASE_URL);
		exit;
	}
	require_once 'page_googlemaps.php';
	$flag = 1;
	break;

13. open /admin/page_edit_post.php

after this

$jobToEdit['type_id'] = $_POST['type_id'];

add this

$jobToEdit['address'] = $_POST['address'];

then after this

'poster_email' => $poster_email,

add this

'address' => $address,

14. create a new file on /admin/ and save it as page_googlemaps.php and paste this code

<?php
 
$gm = new jbGoogleMaps();
 
if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{
	if (empty($_POST['api_key'])) 
	{
		$smarty->assign('error', 'API Key is required.');
	} 
	elseif (empty($_POST['height'])) 
	{
		$smarty->assign('error', 'Height is required.');
	} 
	elseif (empty($_POST['width'])) 
	{
		$smarty->assign('error', 'Width is required.');
	} 
	else 
	{
 
		$data = array('is_active' => $_POST['is_active'],
					  'api_key' => $_POST['api_key'],
					  'height' => $_POST['height'],
					  'width' => $_POST['width'],
					  'sidebar' => $_POST['sidebar'],
					  'direction' => $_POST['direction'],
					  'type' => $_POST['type'],
					  'scale' => $_POST['scale']);
 
		$gm->updatesettings($data);
 
		unset($_POST['is_active']);
		unset($_POST['api_key']);
		unset($_POST['height']);
		unset($_POST['width']);
		unset($_POST['sidebar']);
		unset($_POST['direction']);
		unset($_POST['type']);
		unset($_POST['Scale']);
 
		$smarty->assign('success', 'Google Maps Settings has been updated!');
 
	}
}
 
$smarty->assign('current_category', 'googlemaps');
$smarty->assign('gm', $gm->showsettings());	
$html_title = 'Google Maps Settings / ' . SITE_NAME;
$template = 'googlemaps.tpl';
?>

15. open /admin/_templates/header.tpl

after this

<li {if $current_category == 'settings'}class="selected"{/if}><a href="{$BASE_URL_ADMIN}settings/">Settings</a></li>

add this

<li {if $current_category == 'googlemaps'}class="selected"{/if}><a href="{$BASE_URL_ADMIN}googlemaps/">Google Maps</a></li>

16. open /admin/_templates/edit-post.tpl

after this

<tr>
	<td class="publish-label">{$translations.publish.name_label}:</td>
	<td><input {if $errors.company}class="error"{/if} tabindex="6" type="text" name="company" id="company" size="40" value="{if $job.company}{$job.company|escape}{else}{$smarty.post.company|escape}{/if}" />
	<span class="validation-error">{if $errors.company}<img src="{$BASE_URL_ADMIN}img/icon-delete.png" alt="" />{/if}</span>
	</td>
</tr>

add this

<tr>
	<td class="publish-label">{$translations.publish.address}:</td>
	<td><input {if $errors.address}class="error"{/if} tabindex="7" type="text" name="address" id="address" size="40" value="{if $job.address}{$job.address}{else}{$smarty.post.address}{/if}" />
	</td>
</tr>

again, don’t forget to adjust the tab index of the fields

17. lastly, create a file in /admin/_templates/ and save it as googlemaps.tpl and paste the code below

{include file="header.tpl"}
<div id="content">
<h3 class="page-heading">{$translations.googlemaps.settings}</h3>
<form id="publish_form" name="settings" action="{$smarty.server.REQUEST_URI}" method="post">
<fieldset>
<table cellspacing="2" cellpadding="2" border="0">
{if $success}
<tr>
	<td colspan="2">
		<img src="{$BASE_URL_ADMIN}img/icon_accept.gif" alt="" /> {$success}
	</td>
</tr>
{elseif $error}
<tr>
	<td colspan="2">
		<img src="{$BASE_URL_ADMIN}img/exclamation.png" alt="" /> {$error}
	</td>
</tr>
{/if}
{if $success == ''}
<tr>
	<td>{$translations.googlemaps.is_active}:</td>
	<td>
	<select name="is_active">
		<option value="1"{if $smarty.const.GOOGLE_MAPS_ACTIVE == 1} selected="selected"{/if}>Yes</option>
		<option value="0"{if $smarty.const.GOOGLE_MAPS_ACTIVE == 0} selected="selected"{/if}>No</option>
	</select>
	<span class="suggestion">Specify if Goole Maps is active (Yes) or not (No)</span>
	</td>
</tr>
<tr>
	<td colspan="2">Options below applies only if Google Maps is set to Active.</td>
	<td>
</tr>
<tr>
	<td>{$translations.googlemaps.api_key}:</td>
	<td><input type="text" name="api_key" size="60" maxlength="100" value="{if $gm.api_key != ''}{$gm.api_key}{else}{$smarty.const.GOOGLE_MAPS_APIKEY}{/if}"/></td>
</tr>
<tr>
	<td>{$translations.googlemaps.height}:</td>
	<td><input type="text" name="height" size="20" maxlength="10" value="{if $gm.height != ''}{$gm.height}{else}{$smarty.const.GOOGLE_MAPS_H}{/if}"/></td>
</tr>
<tr>
	<td>{$translations.googlemaps.width}:</td>
	<td><input type="text" name="width" size="20" maxlength="10" value="{if $gm.width != ''}{$gm.width}{else}{$smarty.const.GOOGLE_MAPS_W}{/if}"/></td>
</tr>
<tr>
	<td>{$translations.googlemaps.sidebar}:</td>
	<td>
	<select name="sidebar">
		<option value="1"{if $smarty.const.GOOGLE_MAPS_SIDEBAR == 1} selected="selected"{/if}>Yes</option>
		<option value="0"{if $smarty.const.GOOGLE_MAPS_SIDEBAR == 0} selected="selected"{/if}>No</option>
	</select>
	<span class="suggestion">Specify if Sidebar is active (Yes) or not (No)</span>
	</td>
</tr>
<tr>
	<td>{$translations.googlemaps.direction}:</td>
	<td>
	<select name="direction">
		<option value="1"{if $smarty.const.GOOGLE_MAPS_DIRECTION == 1} selected="selected"{/if}>Yes</option>
		<option value="0"{if $smarty.const.GOOGLE_MAPS_DIRECTION == 0} selected="selected"{/if}>No</option>
	</select>
	<span class="suggestion">Specify if Direction is active (Yes) or not (No)</span>
	</td>
</tr>
<tr>
	<td>{$translations.googlemaps.type}:</td>
	<td>
	<select name="type">
		<option value="1"{if $smarty.const.GOOGLE_MAPS_TYPECONTROL == 1} selected="selected"{/if}>Yes</option>
		<option value="0"{if $smarty.const.GOOGLE_MAPS_TYPECONTROL == 0} selected="selected"{/if}>No</option>
	</select>
	<span class="suggestion">Specify if Type is active (Yes) or not (No)</span>
	</td>
</tr>
<tr>
	<td>{$translations.googlemaps.scale}:</td>
	<td>
	<select name="scale">
		<option value="1"{if $smarty.const.GOOGLE_MAPS_SCALECONTROL == 1} selected="selected"{/if}>Yes</option>
		<option value="0"{if $smarty.const.GOOGLE_MAPS_SCALECONTROL == 0} selected="selected"{/if}>No</option>
	</select>
	<span class="suggestion">Specify if Scale is active (Yes) or not (No)</span>
	</td>
</tr>
<tr>
	<td colspan="2">
		<input type="submit" name="submit" id="submit" value="{$translations.googlemaps.submit}" />
	</td>
</tr>
{/if}
</table>
</fieldset>
</form>
 
<p>&nbsp;</p>
<p>&nbsp;</p>
 
</div><!-- #job-details -->

10 Comments

  1. lonestriker
    April 14, 2010 • 9:34 pm

    This is a stupid question im sure…and im apologizing now. In PHPmyAdmin how do I create the “settings table”?

    So sorry!

  2. Wagner
    May 3, 2010 • 12:03 pm

    Not work for me. I using 1.9 version.

    —————–
    Parse error: syntax error, unexpected $end in E:\xxxxxxxxx\xxxxxxxx\www\page_job.php on line 177

    —————-

    if (GOOGLE_MAPS_ACTIVE == 1 && $info['address'] != ”)
    {
    // google maps – declare google map class
    $map = new GoogleMapAPI();

    // google maps – enter your google maps api key
    $map->setAPIKey(GOOGLE_MAPS_APIKEY);

    // google maps – set height and width
    $map->setWidth(GOOGLE_MAPS_W);
    $map->setHeight(GOOGLE_MAPS_H);

    // google maps – set if sidebar enabled
    if (GOOGLE_MAPS_SIDEBAR == 0) {
    $map->disableSidebar();
    }

    // google maps – set if direction enabled
    if (GOOGLE_MAPS_DIRECTION == 0) {
    $map->disableDirections();
    }

    // google maps – set if type enabled
    if (GOOGLE_MAPS_TYPECONTROL == 0) {
    $map->disableTypeControls();
    }

    // google maps – set if scale enabled
    if (GOOGLE_MAPS_SCALECONTROL == 0) {
    $map->disableScaleControl();
    }

    // google maps – create map marker for the address
    $map->addMarkerByAddress($info['address'],$info['company'],’‘. $info['company'] .’‘);

    // google maps – assign api to smarty variables
    $smarty->assign(’google_map_header’,$map->getHeaderJS());
    $smarty->assign(’google_map_js’,$map->getMapJS());
    $smarty->assign(’google_map_sidebar’,$map->getSidebar());
    $smarty->assign(’google_map’,$map->getMap());

  3. Wagner
    May 4, 2010 • 8:57 am

    On the previous error, sorry was my mistake. I am having another problem, in my local machine the map appears, but on my online server does not appear on the map.

    ———-
    var points = [];
    var markers = [];
    var counter = 0;
    var map = null;
    function onLoad() {
    if (GBrowserIsCompatible()) {
    var mapObj = document.getElementById(”map”);
    if (mapObj != “undefined” && mapObj != null) {
    map = new GMap2(document.getElementById(”map”));
    map.addControl(new GLargeMapControl());
    var point = new GLatLng(,);
    var marker = createMarker(point,”Jobber”,”Jobber”, 0,”");
    map.addOverlay(marker);

  4. Mihai
    May 6, 2010 • 1:09 pm

    Did all that and the site crashed :) Any ideas ? :)

  5. Jim
    May 30, 2010 • 3:48 am

    Hello,

    Thank you for this tut!

    I followed it thoroughly through to the end, I

  6. Jim
    May 30, 2010 • 4:18 am

    * Update *

    Managed to get it mostly working for v1.9

    But when I type a full address its not appearing how it should in google maps..

  7. Jim
    May 30, 2010 • 4:25 am

    * Update *

    Solved – Address did not work with existing posts, when I added a new post worked perfectly..

    Thanks for the tut RedJumpSuit!!

  8. David Ortega
    July 2, 2010 • 6:06 am

    Hi very good at all. Is there any way to map out the scale in kilometers as I get on my feet and my country is using the meter and kilometer. Thanks

  9. Adam Mills
    August 9, 2010 • 3:00 pm

    I have this hack working perfectly in 1.9.1 after some slight changes here and there, let me know if you would like my code and you can post an update. Where do I change the maps default scale and map centre etc?

Trackbacks

  1. Bundled Add-Ons for jobberBase 1.8 | RedJumpsuit

Leave a Response