Skip to content

Instantly share code, notes, and snippets.

@luiseduardobraschi
Created July 17, 2016 03:32
Show Gist options
  • Save luiseduardobraschi/c1f1e0e832238105fc7402b7366944a2 to your computer and use it in GitHub Desktop.
Save luiseduardobraschi/c1f1e0e832238105fc7402b7366944a2 to your computer and use it in GitHub Desktop.
Add Google Maps meta field to taxonomy using bainternet/Tax-Meta-Class
<?php
include_once dirname(__FILE__)."/Tax-meta-class/Tax-meta-class.php";
class MyTax_Meta_Class extends Tax_Meta_Class {
public function load_scripts_styles(){
parent::load_scripts_styles();
// enqueue only in the right place
if(isset($_REQUEST['taxonomy'])) {
//script must have been registered previously (priority of at least 10)
wp_enqueue_script( 'google-maps' );
}
}
/**
* Add Google Maps support
* @author CasperBraske
* @since 1.0
* @access public
* @param $id string field id, i.e. the meta key
* @param $args mixed|array
* 'name' => // field name/label string optional
* 'desc' => // field description, string optional
* 'std' => // default value, string optional
* 'style' => // custom style for field, string optional
* 'validate_func' => // validate function, string optional
* @param $repeater bool is this a field inside a repeater? true|false(default)
*/
public function addMap($id, $args, $repeater = false){
$new_field = ['type' => 'map','id'=> $id,'std' => '','desc' => '','style' =>'','name' => 'Google Map','multiple' => false];
$new_field = array_merge($new_field, $args);
if(false === $repeater){
$this->_fields[] = $new_field;
}else{
return $new_field;
}
}
/**
* Show Field map.
*
* @param string $field
* @param string|mixed $meta
* @access public
*/
public function show_field_map($field, $meta){
$this->show_field_begin( $field, $meta );
if ( ! is_array( $meta ) )
$meta = (array) $meta;
?>
<label>
latitude
<input type='text' id='<?=$field['id']?>' name='<?=$field['id']?>[lat]' value='<?=$meta['lat']?>'>
</label>
<label>
longitude
<input type='text' name='<?=$field['id']?>[lng]' value='<?=$meta['lng']?>'>
</label>
<br>
<br>
<div id='map' style='<?=$field['style']?>'></div>
<script>
var latlng = {"lat":<?=$meta['lat']?>,"lng":<?=$meta['lng']?>};
</script>
<script>
window.onload = function() {
var latField = document.querySelector('[name="<?=$field['id']?>[lat]"]');
var lngField = document.querySelector('[name="<?=$field['id']?>[lng]"]');
map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 15
});
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
draggable: true
});
marker.setMap(map);
marker.addListener('dragend', drageEnd);
function drageEnd(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
latField.value = lat;
lngField.value = lng;
var latlng = {'lat':lat,'lng':lng};
}
latField.addEventListener('change', coordChanged);
lngField.addEventListener('change', coordChanged);
function coordChanged(event) {
latlng = new google.maps.LatLng(latField.value,lngField.value);
marker.setPosition(latlng);
map.panTo(latlng);
}
}
</script>
<?php
$this->show_field_end( $field, $meta );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment