Lets you record a precise location using latitude/longitude/zoom fields to a DataObject.
Displays a map using the Google Maps API. The user may then choose where to place the marker; the landing coordinates are then saved.
You can also search for locations using the search box, which uses the Google Maps Geocoding API.
Supports SilverStripe 4 and Userforms
Given your DataObject uses the field names Latitude
and Longitude
for storing the latitude and longitude
respectively then the following is a minimal setup to have the map show in the CMS:
use SilverStripe\ORM\DataObject;
use BetterBrief\GoogleMapField;
class Store extends DataObject
{
private static $db = [
'Title' => 'Varchar(255)',
'Latitude' => 'Varchar',
'Longitude' => 'Varchar',
];
public function getCMSFields() {
$fields = parent::getCMSFiels();
// add the map field
$fields->addFieldToTab('Root.Main', new GoogleMapField(
'Location'
));
// remove the lat / lng fields from the CMS
$fields->removeFieldsFromTab('Root.Main', ['Latitude', 'Longitude']);
return $fields;
}
}
Remember to set your API key in your site's config.yml
BetterBrief\GoogleMapField:
default_options:
api_key: '[google-api-key]'
You can either set the default options in your yaml file (see _config/googlemapfield.yml
for a complete list) or at run time on each instance of the GoogleMapField
object.
To set options at run time pass through an array of options (3rd construct parameter):
use BetterBrief\GoogleMapField;
$field = new GoogleMapField(
$dataObject,
'FieldName',
[
'api_key' => 'my-api-key',
'show_search_box' => false,
'map' => [
'zoom' => 10,
],
...
]
);
You can customise the map's appearance by passing through settings into the map
key of the $options
(shown above).
The map
settings take a literal representation of the google.maps.MapOptions
For example if we wanted to change the map type from a road map to satellite imagery we could do the following:
use BetterBrief\GoogleMapField;
$field = new GoogleMapField(
$object,
'Location',
[
'map' => [
'mapTypeId' => 'SATELLITE',
],
]
);
To get a Google Maps JS API key please see the official docs
To use the search box to find locations on the map, you'll need to have enabled the Geocoding API as well. Please see the official docs