| 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 |
|
