|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
class SD_Map extends WP_Super_Duper { |
|
4
|
|
|
|
|
5
|
|
|
|
|
6
|
|
|
public $arguments; |
|
7
|
|
|
|
|
8
|
|
|
/** |
|
9
|
|
|
* Sets up the widgets name etc |
|
10
|
|
|
*/ |
|
11
|
|
|
public function __construct() { |
|
12
|
|
|
|
|
13
|
|
|
$options = array( |
|
14
|
|
|
'textdomain' => 'super-duper', |
|
15
|
|
|
// textdomain of the plugin/theme (used to prefix the Gutenberg block) |
|
16
|
|
|
'block-icon' => 'admin-site', |
|
17
|
|
|
// Dash icon name for the block: https://developer.wordpress.org/resource/dashicons/#arrow-right |
|
18
|
|
|
'block-category' => 'widgets', |
|
19
|
|
|
// the category for the block, 'common', 'formatting', 'layout', 'widgets', 'embed'. |
|
20
|
|
|
'block-keywords' => "['map','super','google']", |
|
21
|
|
|
// used in the block search, MAX 3 |
|
22
|
|
|
'block-output' => array( // the block visual output elements as an array |
|
23
|
|
|
array( |
|
24
|
|
|
'element' => 'p', |
|
25
|
|
|
'content' => __('A Google API key is required to use this block, we recommend installing our plugin which makes it easy and sets it globally, or you can set a key in the block settings sidebar: ', 'ayecode-connect' ), |
|
26
|
|
|
//'element_require' => '"1"=='.get_option( 'rgmk_google_map_api_key', '"0"') ? '"0"' : '"1"', |
|
27
|
|
|
'element_require' => get_option( 'rgmk_google_map_api_key', false) ? '1==0' : '1==1 && [%api_key%]==""', |
|
28
|
|
|
), |
|
29
|
|
|
array( |
|
30
|
|
|
'element' => 'a', |
|
31
|
|
|
'content' => __('API KEY for Google Maps', 'ayecode-connect' ), |
|
32
|
|
|
'element_require' => get_option( 'rgmk_google_map_api_key', false) ? '1==0' : '1==1 && [%api_key%]==""', |
|
33
|
|
|
'href' => 'https://wordpress.org/plugins/api-key-for-google-maps/', |
|
34
|
|
|
), |
|
35
|
|
|
array( |
|
36
|
|
|
'element' => 'img', |
|
37
|
|
|
'class' => '[%className%]', |
|
38
|
|
|
//'content' => 'Hello: [%after_text%]' // block properties can be added by wrapping them in [%name%] |
|
39
|
|
|
'element_require' => '[%type%]=="image"', |
|
40
|
|
|
'src' => get_option( 'rgmk_google_map_api_key', false) ? "https://maps.googleapis.com/maps/api/staticmap?center=[%location%]&maptype=[%maptype%]&zoom=[%zoom%]&size=[%static_width%]x[%static_height%]&key=".get_option( 'rgmk_google_map_api_key') : "https://maps.googleapis.com/maps/api/staticmap?center=[%location%]&maptype=[%maptype%]&zoom=[%zoom%]&size=[%static_width%]x[%static_height%]&key=[%api_key%]" |
|
|
|
|
|
|
41
|
|
|
), |
|
42
|
|
|
array( |
|
43
|
|
|
'element' => 'div', |
|
44
|
|
|
'class' => 'sd-map-iframe-cover', |
|
45
|
|
|
'style' => '{overflow:"hidden", position:"relative"}', |
|
46
|
|
|
array( |
|
47
|
|
|
'element' => 'iframe', |
|
48
|
|
|
'title' => __( 'Placeholderx', 'ayecode-connect' ), |
|
49
|
|
|
'class' => '[%className%]', |
|
50
|
|
|
'width' => '[%width%]', |
|
51
|
|
|
'height' => '[%height%]', |
|
52
|
|
|
'frameborder' => '0', |
|
53
|
|
|
'allowfullscreen' => 'true', |
|
54
|
|
|
'style' => '{border:0}', |
|
55
|
|
|
'element_require' => '[%type%]!="image"', |
|
56
|
|
|
'src' => get_option( 'rgmk_google_map_api_key', false) ? "https://www.google.com/maps/embed/v1/[%type%]?q=[%location%]&maptype=[%maptype%]&zoom=[%zoom%]&key=".get_option( 'rgmk_google_map_api_key') : "https://www.google.com/maps/embed/v1/[%type%]?q=[%location%]&maptype=[%maptype%]&zoom=[%zoom%]&key=[%api_key%]" |
|
57
|
|
|
), |
|
58
|
|
|
), |
|
59
|
|
|
array( |
|
60
|
|
|
'element' => 'style', |
|
61
|
|
|
'content' => '.sd-map-iframe-cover:hover:before {background: #4a4a4a88; content: "'.__( 'Click here, Settings are in the block settings sidebar', 'ayecode-connect' ).'";} .sd-map-iframe-cover:before{cursor: pointer; content: ""; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0;padding-top: 33%; text-align: center; color: #fff; font-size: 20px; font-weight: bold;}', |
|
62
|
|
|
'element_require' => '[%type%]!="image"', |
|
63
|
|
|
), |
|
64
|
|
|
), |
|
65
|
|
|
'class_name' => __CLASS__, |
|
66
|
|
|
// The calling class name |
|
67
|
|
|
'base_id' => 'sd_map', |
|
68
|
|
|
// this is used as the widget id and the shortcode id. |
|
69
|
|
|
'name' => __( 'Map', 'ayecode-connect' ), |
|
70
|
|
|
// the name of the widget/block |
|
71
|
|
|
'widget_ops' => array( |
|
72
|
|
|
'classname' => 'sd-map-class', |
|
73
|
|
|
// widget class |
|
74
|
|
|
'description' => esc_html__( 'This is an example that will take a text parameter and output it after `Hello:`.', 'ayecode-connect' ), |
|
75
|
|
|
// widget description |
|
76
|
|
|
), |
|
77
|
|
|
'arguments' => array( // these are the arguments that will be used in the widget, shortcode and block settings. |
|
78
|
|
|
'type' => array( |
|
79
|
|
|
'title' => __('Map Type:', 'ayecode-connect'), |
|
80
|
|
|
'desc' => __('Select the map type to use.', 'ayecode-connect'), |
|
81
|
|
|
'type' => 'select', |
|
82
|
|
|
'options' => array( |
|
83
|
|
|
"image" => __('Static Image', 'ayecode-connect'), |
|
84
|
|
|
"place" => __('Place', 'ayecode-connect'), |
|
85
|
|
|
// "directions" => __('Directions', 'ayecode-connect'), |
|
86
|
|
|
// "search" => __('Search', 'ayecode-connect'), |
|
87
|
|
|
// "view" => __('View', 'ayecode-connect'), |
|
88
|
|
|
// "streetview" => __('Streetview', 'ayecode-connect'), |
|
89
|
|
|
), |
|
90
|
|
|
'default' => 'image', |
|
91
|
|
|
'desc_tip' => true, |
|
92
|
|
|
'advanced' => false |
|
93
|
|
|
), |
|
94
|
|
|
'location' => array( |
|
95
|
|
|
'type' => 'text', |
|
96
|
|
|
'title' => __( 'Location:', 'ayecode-connect' ), |
|
97
|
|
|
'desc' => __( 'Enter the location to show on the map, place, city, zip code or GPS.', 'ayecode-connect' ), |
|
98
|
|
|
'placeholder' => 'Place, city, zip code or GPS', |
|
99
|
|
|
'desc_tip' => true, |
|
100
|
|
|
'default' => 'Ireland', |
|
101
|
|
|
'advanced' => false |
|
102
|
|
|
), |
|
103
|
|
|
'static_width' => array( |
|
104
|
|
|
'type' => 'number', |
|
105
|
|
|
'title' => __( 'Width:', 'ayecode-connect' ), |
|
106
|
|
|
'desc' => __( 'This is the width of the map, for static maps you can only use px values.', 'ayecode-connect' ), |
|
107
|
|
|
'placeholder' => '600', |
|
108
|
|
|
'desc_tip' => true, |
|
109
|
|
|
'default' => '600', |
|
110
|
|
|
'custom_attributes' => array( |
|
111
|
|
|
'max' => '2000', |
|
112
|
|
|
'min' => '100', |
|
113
|
|
|
), |
|
114
|
|
|
'element_require' => '[%type%]=="image"', |
|
115
|
|
|
'advanced' => false |
|
116
|
|
|
), |
|
117
|
|
|
'static_height' => array( |
|
118
|
|
|
'type' => 'number', |
|
119
|
|
|
'title' => __( 'Height:', 'ayecode-connect' ), |
|
120
|
|
|
'desc' => __( 'This is the height of the map, for static maps you can only use px values.', 'ayecode-connect' ), |
|
121
|
|
|
'placeholder' => '400', |
|
122
|
|
|
'desc_tip' => true, |
|
123
|
|
|
'default' => '400', |
|
124
|
|
|
'custom_attributes' => array( |
|
125
|
|
|
'max' => '2000', |
|
126
|
|
|
'min' => '100', |
|
127
|
|
|
'required' => 'required', |
|
128
|
|
|
), |
|
129
|
|
|
'element_require' => '[%type%]=="image"', |
|
130
|
|
|
'advanced' => false |
|
131
|
|
|
), |
|
132
|
|
|
'width' => array( |
|
133
|
|
|
'type' => 'text', |
|
134
|
|
|
'title' => __( 'Width:', 'ayecode-connect' ), |
|
135
|
|
|
'desc' => __( 'This is the width of the map, you can use % or px here.', 'ayecode-connect' ), |
|
136
|
|
|
'placeholder' => '100%', |
|
137
|
|
|
'desc_tip' => true, |
|
138
|
|
|
'default' => '100%', |
|
139
|
|
|
'element_require' => '[%type%]!="image"', |
|
140
|
|
|
'advanced' => false |
|
141
|
|
|
), |
|
142
|
|
|
'height' => array( |
|
143
|
|
|
'type' => 'text', |
|
144
|
|
|
'title' => __( 'Height:', 'ayecode-connect' ), |
|
145
|
|
|
'desc' => __( 'This is the height of the map, you can use %, px or vh here.', 'ayecode-connect' ), |
|
146
|
|
|
'placeholder' => '425px', |
|
147
|
|
|
'desc_tip' => true, |
|
148
|
|
|
'default' => '425px', |
|
149
|
|
|
'element_require' => '[%type%]!="image"', |
|
150
|
|
|
'advanced' => false |
|
151
|
|
|
), |
|
152
|
|
|
'maptype' => array( |
|
153
|
|
|
'type' => 'select', |
|
154
|
|
|
'title' => __( 'Mapview:', 'ayecode-connect' ), |
|
155
|
|
|
'desc' => __( 'This is the type of map view that will be used by default.', 'ayecode-connect' ), |
|
156
|
|
|
'options' => array( |
|
157
|
|
|
"roadmap" => __( 'Road Map', 'ayecode-connect' ), |
|
158
|
|
|
"satellite" => __( 'Satellite Map', 'ayecode-connect' ), |
|
159
|
|
|
// "hybrid" => __( 'Hybrid Map', 'ayecode-connect' ), |
|
160
|
|
|
// "terrain" => __( 'Terrain Map', 'ayecode-connect' ), |
|
161
|
|
|
), |
|
162
|
|
|
'desc_tip' => true, |
|
163
|
|
|
'default' => 'roadmap', |
|
164
|
|
|
'advanced' => true |
|
165
|
|
|
), |
|
166
|
|
|
'zoom' => array( |
|
167
|
|
|
'type' => 'select', |
|
168
|
|
|
'title' => __( 'Zoom level:', 'ayecode-connect' ), |
|
169
|
|
|
'desc' => __( 'This is the zoom level of the map, `auto` is recommended.', 'ayecode-connect' ), |
|
170
|
|
|
'options' => range( 1, 19 ), |
|
171
|
|
|
'placeholder' => '', |
|
172
|
|
|
'desc_tip' => true, |
|
173
|
|
|
'default' => '7', |
|
174
|
|
|
'advanced' => true |
|
175
|
|
|
), |
|
176
|
|
|
'api_key' => array( |
|
177
|
|
|
'type' => 'text', |
|
178
|
|
|
'title' => __( 'Api Key:', 'ayecode-connect' ), |
|
179
|
|
|
'desc' => __( 'This is the height of the map, you can use %, px or vh here.', 'ayecode-connect' ), |
|
180
|
|
|
'placeholder' => '', |
|
181
|
|
|
'desc_tip' => true, |
|
182
|
|
|
'default' => '', |
|
183
|
|
|
'element_require' => get_option( 'rgmk_google_map_api_key', false) ? '1==0' : '1==1', |
|
184
|
|
|
'advanced' => false |
|
185
|
|
|
), |
|
186
|
|
|
) |
|
187
|
|
|
); |
|
188
|
|
|
|
|
189
|
|
|
parent::__construct( $options ); |
|
190
|
|
|
} |
|
191
|
|
|
|
|
192
|
|
|
|
|
193
|
|
|
/** |
|
194
|
|
|
* This is the output function for the widget, shortcode and block (front end). |
|
195
|
|
|
* |
|
196
|
|
|
* @param array $args The arguments values. |
|
197
|
|
|
* @param array $widget_args The widget arguments when used. |
|
198
|
|
|
* @param string $content The shortcode content argument |
|
199
|
|
|
* |
|
200
|
|
|
* @return string |
|
201
|
|
|
*/ |
|
202
|
|
|
public function output( $args = array(), $widget_args = array(), $content = '' ) { |
|
203
|
|
|
|
|
204
|
|
|
// options |
|
205
|
|
|
$defaults = array( |
|
206
|
|
|
'type' => 'image', // image, place |
|
207
|
|
|
'location' => 'Ireland', |
|
208
|
|
|
'static_width' => '600', |
|
209
|
|
|
'static_height' => '400', |
|
210
|
|
|
'width'=> '100%', |
|
211
|
|
|
'height'=> '425px', |
|
212
|
|
|
'maptype' => 'roadmap', |
|
213
|
|
|
'zoom' => '7', |
|
214
|
|
|
'api_key' => 'AIzaSyBK3ZcmK0ljxl5agNyJNQh_G24Thq1btuE', |
|
215
|
|
|
); |
|
216
|
|
|
|
|
217
|
|
|
/** |
|
218
|
|
|
* Parse incoming $args into an array and merge it with $defaults |
|
219
|
|
|
*/ |
|
220
|
|
|
$args = wp_parse_args($args, $defaults ); |
|
221
|
|
|
|
|
222
|
|
|
$output = ''; |
|
223
|
|
|
|
|
224
|
|
|
|
|
225
|
|
|
// check if we have a global API key |
|
226
|
|
|
$args['api_key'] = get_option( 'rgmk_google_map_api_key', false ) ? get_option( 'rgmk_google_map_api_key' ) : $args['api_key']; |
|
227
|
|
|
|
|
228
|
|
|
if($args['type']=='image'){ |
|
229
|
|
|
$output .= "<img src='https://maps.googleapis.com/maps/api/staticmap?center=".esc_attr($args['location'])."&maptype=".esc_attr($args['maptype'])."&zoom=".esc_attr($args['zoom'])."&size=".esc_attr($args['static_width'])."x".esc_attr($args['static_height'])."&key=".esc_attr($args['api_key'])."' />"; |
|
|
|
|
|
|
230
|
|
|
}else{ |
|
231
|
|
|
$output .= "<iframe width='".esc_attr($args['width'])."' height='".esc_attr($args['height'])."' frameborder='0' allowfullscreen style='border:0;' src='https://www.google.com/maps/embed/v1/".esc_attr($args['type'])."?q=".esc_attr($args['location'])."&maptype=".esc_attr($args['maptype'])."&zoom=".esc_attr($args['zoom'])."&key=".esc_attr($args['api_key'])."' ></iframe> "; |
|
232
|
|
|
} |
|
233
|
|
|
|
|
234
|
|
|
return $output; |
|
235
|
|
|
|
|
236
|
|
|
} |
|
237
|
|
|
|
|
238
|
|
|
} |
|
239
|
|
|
|
|
240
|
|
|
// register it. |
|
241
|
|
|
add_action( 'widgets_init', function () { |
|
242
|
|
|
register_widget( 'SD_Map' ); |
|
243
|
|
|
} ); |
|
244
|
|
|
|