Add Google Maps meta field to taxonomy using bainternet/Tax-Meta-Class

MyTax-meta-class.php

<?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 );
    }

}