FUEL CMS User Guide : Version 1.5.2


Locations Module Documentation

This Locations module documentation is for version 0.9.

This module allows you to create location records that can be plotted on a Google map found out locations/map. The configuration allows you a lot of flexibility in controlling the map and has all the options commented out in the config. It's recommended that you copy the fuel/modules/locations/config/locations.php to fuel/application/config/locations.php which will allow for painless updating going forward.

Categories

You can associate categories to your locations. If this is done and you have a custom image marker, you will need to create a new marker for each category using the "marker.img" value as the base and the category slug value as the suffix (all markers should be .png). So for example, if you have a "marker.img" value of "mappin" and a category with a slug value of "mycategory" the image name would be "mappin_mycategory.png".

Custom Map CSS and Javascript

The locations/map is setup to look for a $css and $js variable. You can set them in a variables file. For example, if you add the following to your _variables/global.php, it will load in a css file that you can use to override the default values. In addition, the following will load in an additional javascript file, which you can use to override things like the info window.

$pages['locations/map'] = array('css' => 'google_map', 'js' => 'google_overlay');

assets/css/google_map.css

html, body { height: 100% !important; margin: 0; }
.gm-style div.info_win { display: none; width: 200px; height: 110px; background: #fff; 
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -khtml-border-radius: 3px; border: 3px solid #ccc; 
	padding: 10px;  position: absolute; z-index: 99999; overflow: hidden; 
	box-shadow: 0 0 15px rgba(0, 0, 0, 1);
	color: #333; font-size: 1em;
	}

.info_win h3 { color: #de1a22; font-size: 1.5em; }
.info_win address { color: #333; font-size: 1em; }
.info_win .btn { text-align: center; display: block; width: 100px; margin: 10px auto;   }
.marker_tooltip { color: #333; border: 1px #999 solid; background-color: #fff; padding:3px 8px; font-size: 1em; white-space: nowrap; box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

assets/js/google_overlay.js

CustomOverlay.prototype.draw = function(){
	// your code for the info window goes here
}

Locations Configuration

The following configuration parameters can be found in the modules/locations/config/locations.php configuration file. It is recommended that you copy the config file and place it in your fuel/application/config directory which will override the defaults and make it easier for future updates.

Property Default Value Description
api_key 
''
 This is not required but if you want to add it you can here: https:developers.google.com/maps/documentation/javascript/tutorial#api_key
gmap 
array(
'mapID'            => 'map_canvas',
'mapCenter'        => array('lat' => 45.5424364, 'lng' => -122.654422),  PDX default
'defaultMapCenter' => array('lat' => 45.5424364, 'lng' => -122.654422),
'imgPath'          => img_path(),
'zoom'             => 14,
'scrollwheel'      => FALSE,
'disableDefaultUI' => TRUE,
'mapTypeControl'   => FALSE,
'marker'           => array('custom' => FALSE),
'styles'           => array(),

example of what can be done with other parameters
'mapCenter'        => array('lat' => '45.5200', 'lng' => '122.6819'),  PDX
'defaultMapCenter' =>  array('lat' => '45.5200', 'lng' => '122.6819'),  If no data exists, this will be used
'overview'         => false,
'mapType'         => 'roadmap',
'topZIndex: 100000',
'panToXOffset' => 0,
'panToYOffset' => 0,
'forceGeoLocation' => false,
'customOverlay' => 'CustomOverlay',
'displayInfoWindows' => true,
'displayTooltips' => true,
'navigationControl' => true,
'scaleControl' => true,
'draggable' => true,
'zoomControl' => true,
'marker'           => array('custom' => true,
'img' => 'map_pin',
'size' => array('width' => 20, 'height' => 20),
'origin' => array('x' => 0, 'y' => 0),
'anchor' => array('x' => 0, 'y' => 0),
'shape' => array(
'coord' => array(8,16,5,19,2,8,0,6,0,2,2,0,8,2,8,6,6,8),
'type' => 'poly'
),
'colors' => array(
'hotel' => '#333333',
'bars' => '#dc4b59',
'bus-tours' => '#cfe7f7',
'dc-sights' => '#ffff41',
'music-venues' => '#a0c1d7',
'restaurants' => '#ca68df',
'sporting-attractions' => '#e5828c',
'theaters' => '#ffff41',
'transportation' => '#e4c2f6'
)
)


)
 the JSON parameters to pass to the map
views 
array('map' => array('locations' => 'map'), 'listing' => array('locations' => 'listing'))
 used to specify where the views are located

Libraries

Helpers