You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+97-12Lines changed: 97 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,24 +9,109 @@ Displays a map using the Google Maps API. The user may then choose where to plac
9
9
10
10
You can also search for locations using the search box, which uses the Google Maps Geocoding API.
11
11
12
-
### Usage
12
+
Supports SilverStripe 4
13
13
14
-
##### `__construct` options
14
+
##Usage
15
15
16
-
|Option|Default|Description|
17
-
|------|-------|-----------|
18
-
|`field_names`|See `GoogleMapField.yml`'s `default_options.field_names`|A map of field names to save the map data into your object.|
16
+
### Minimal configuration
17
+
18
+
Given your DataObject uses the field names `Lat` and `Lng` for storing the latitude and longitude respectively then the
19
+
following is a minimal setup to have the map show in the CMS:
20
+
21
+
```php
22
+
use SilverStripe\ORM\DataObject;
23
+
use BetterBrief\GoogleMapField;
24
+
25
+
class Store extends DataObject
26
+
{
27
+
public static $db = array(
28
+
'Title' => 'Varchar(255)',
29
+
'Latitude' => 'Varchar',
30
+
'Longitude' => 'Varchar',
31
+
);
32
+
33
+
public function getCMSFields() {
34
+
$fields = parent::getCMSFiels();
35
+
36
+
// add the map field
37
+
$fields->addFieldToTab('Root.Main', new GoogleMapField(
38
+
$this,
39
+
'Location'
40
+
));
41
+
42
+
// remove the lat / lng fields from the CMS
43
+
$fields->removeFieldFromTab('Root.Main', 'Lat');
44
+
$fields->removeFieldFromTab('Root.Main', 'Lng');
45
+
46
+
return $fields;
47
+
}
48
+
}
49
+
```
50
+
51
+
Remember to set your API key in your site's `config.yml`
19
52
20
-
##### make sure `api_key` config added in site yml file
21
53
```yml
22
54
BetterBrief\GoogleMapField:
23
55
default_options:
24
-
api_key: 'GOOGLE_API_KEY'
56
+
api_key: '[google-api-key]'
57
+
```
58
+
59
+
## Optional configuration
60
+
61
+
### Configuration options
62
+
63
+
You can either set the default options in your yaml file (see [_config/googlemapfield.yml](_config/googlemapfield.yml)
64
+
for a complete list) or at run time on each instance of the `GoogleMapField` object.
65
+
66
+
#### Setting at run time
67
+
68
+
To set options at run time pass through an array of options (3rd construct parameter):
69
+
70
+
```php
71
+
use BetterBrief\GoogleMapField;
72
+
73
+
$field = new GoogleMapField(
74
+
$dataObject,
75
+
'FieldName',
76
+
array(
77
+
'api_key' => 'my-api-key',
78
+
'show_search_box' => false,
79
+
'map' => array(
80
+
'zoom' => 10,
81
+
),
82
+
...
83
+
)
84
+
);
25
85
```
26
86
27
-
##### `Field` options
87
+
#### Customising the map appearance
88
+
89
+
You can customise the map's appearance by passing through settings into the `map` key of the `$options` (shown above).
90
+
The `map` settings take a literal representation of the [google.maps.MapOptions](https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions)
91
+
92
+
For example if we wanted to change the map type from a road map to satellite imagery we could do the following:
93
+
94
+
```php
95
+
use BetterBrief\GoogleMapField;
96
+
97
+
$field = new GoogleMapField(
98
+
$object,
99
+
'Location',
100
+
array(
101
+
'map' => array(
102
+
'mapTypeId' => 'SATELLITE',
103
+
),
104
+
)
105
+
);
106
+
```
107
+
108
+
# Getting an API key
109
+
110
+
## Google Maps API key
111
+
112
+
To get a Google Maps JS API key please see [the official docs](https://developers.google.com/maps/documentation/javascript/get-api-key)
113
+
114
+
## Geocoding access - enabling the search box
28
115
29
-
|Option|Default|Description|
30
-
|------|-------|-----------|
31
-
|`coords`|Your object's latitude and longitude|The intial coordinates of the map - note: this is not the default value if no object exists|
32
-
|`map`|Zoom of 14, map type of ROADMAP|A [google.maps.MapOptions](https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions) object|
116
+
To use the search box to find locations on the map, you'll need to have enabled the Geocoding API as well. Please see
117
+
[the official docs](https://developers.google.com/maps/documentation/javascript/geocoding#GetStarted)
0 commit comments