Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
9 posts Page 1 of 1
The idea and reasoning behind creating this snippet / addon is as follows:
  • The current addons that are available were not user (client) friendly
  • There was no clean way to capture the geocode (LAT/LNG) from the back-end of Couch
  • All the addons captured geocode from the front-end


So, this snippet / addon that I created can easily capture and save the geocode (lat/lng) to the database from the back-end of Couch in a clean manner, by implementing a clonable template (for multiple locations / markers).
Capturing the geocode from the back-end saves your Google Maps Geocoding API daily query count (usage limit), which helps if you have a lot of locations and a high traffic site.
This is currently running and utilizing over 130+ locations / markers (@Samurai).


map.php -- Take note of line 26 & 27 || The editable at line 4-6 is hiding the m_geo input box

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Add New Location' clonable='1'>
   
        <cms:editable name='hiddener' type='message'>
            <style>#k_element_m_geo{display: none;}</style>
        </cms:editable>
   
        <cms:editable name='m_address' label='Address:' type='text' validator='AddGeo::geo=m_geo' />
   
        <cms:editable name='m_geo' label='GeoCode -- LatLng:' type='text' />
       
</cms:template>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Google Maps Geocoding API | Multiple Locations | Admin-side</title>
   
    <!--  Jquery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--  Google Maps API || Hardcode your API key or use the config.php key (#16)  -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>

</head>
    <body>
        <script type="application/javascript">
         $(document).ready(function() {
            // execute
           (function() {
                var locations = [
                    <cms:pages masterpage='map.php'>
                        ['<cms:show k_page_title />', '<cms:show m_geo />']
                            <cms:php> echo( <cms:show k_current_record /> < <cms:show k_total_records /> ? ',':'');</cms:php>
                    </cms:pages>
                ];
                // map options
                var options = {
                    zoom: 4,
                    center: new google.maps.LatLng(38.40669759323237, -94.74804687500001), // centered US
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false
                };
                // init map
                var map = new google.maps.Map(document.getElementById('map'), options);
                var infoWindow = new google.maps.InfoWindow();
                // set multiple marker
                for (var i=0; i<locations.length; i++) {
                    // init markers
                    var data =  locations[i][0];
                    var lati =  locations[i][1].split(",")[0];
                    var lngi =  locations[i][1].split(",")[1];
                   
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng( lati, lngi ),
                        map: map,
                        title: data
                    });
                    // process multiple info windows
                    (function(marker, data) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: data
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, data);
                }
            })();
        });
        </script>
       
    <cms:if k_is_page >
        <h1>PAGE View</h1>
        <p>Single Location Display</p>
    <cms:else />
        <h1>LIST View</h1>
        <p>Display the map and/or list out all locations</p>
        <div id="map" style="width: 800px; height: 800px;"></div>
    </cms:if>

    </body>
</html>
<?php COUCH::invoke(); ?>



Add this snippet to your kfunctions.php file (/couch/addons/kfunctions.php) -- Take note of line 12 -14

Code: Select all
// - //
// Custom - Address|Geo
class AddGeo{
    function geo( $field, $args ){
        global $FUNCS;
       
        $address = trim($field->get_data());
       
        // url encode the address
        $addurl = urlencode($address);

        // Google Maps Geocode API URL --- MUST USE *HTTPS* in the url below --- trust me xD
        // Google Maps Geocode API || Hardcode your API key or use the config.php key (#16)
        $url = "https://maps.googleapis.com/maps/api/geocode/json?address=".$addurl."&key=YOUR-KEY-HERE";

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $geoloc = json_decode(curl_exec($ch), true);
       
       
        // response status will be 'OK', if able to geocode given address
        if( $geoloc['status']==='OK' ){

            // get the important data
            $lati = $geoloc['results'][0]['geometry']['location']['lat'];
            $longi = $geoloc['results'][0]['geometry']['location']['lng'];

            $latlng = $lati . ',' . $longi;
           
            // verify if data is complete
            if($lati && $longi){
                foreach( $field->siblings as $f ){
                    if( $f->name==$args ){
                        $geo = trim( $f->get_data() );
                        if( $geo != $latlng ){
                            $f->store_posted_changes( $latlng );
                        }
                        break;
                    }
                }
            }else{
                return KFuncs::raise_error( "BAD DATA" );
            }
        }else{
            if( $geoloc['status']==='ZERO_RESULTS' ){
                return KFuncs::raise_error( "ZERO_RESULTS" );
            }
            if( $geoloc['status']==='OVER_QUERY_LIMIT' ){
                return KFuncs::raise_error( "OVER_QUERY_LIMIT" );
            }
            if( $geoloc['status']==='REQUEST_DENIED' ){
                return KFuncs::raise_error( "REQUEST_DENIED" );
            }
            if( $geoloc['status']==='INVALID_REQUEST' ){
                return KFuncs::raise_error( "INVALID_REQUEST" );
            }
            if( $geoloc['status']==='UNKNOWN_ERROR' ){
                return KFuncs::raise_error( "UNKNOWN_ERROR" );
            }
            return KFuncs::raise_error( "NOT OK" );
        }
        unset( $f );
        return true;
    }
}


Any questions, comments, or concerns (general usage help)....just let me know.

UPDATE: 08/29/2021
Sorry to those that need assistance, I'm not very active on here anymore, wish I could be though.
When I find time, I'll be looking into updating and/or upgrading the functionality (php/javascript/mapbox).
Might be awhile. Sorry again.
Wow this is good...
Does this work on couchcms v2.1 and does it work for just one location as need a way of the google maps being controlled from the admin side so the user can change the location of the google maps if needed in the future

Thank you in advance
Does this work on couchcms v2.1?
- Not sure, works just fine on v2.0

does it work for just one location?
- Yes


EDIT: Sorry for late reply
I wonder if it can be merged with viewtopic.php?f=8&t=11891#p32439 - to have a 'clickable' map in backend which auto-sets coordinates.
Hi RiPiGs,

When I implement this on my localhost everything works perfectly. But after uploading to my server I get the following error: Address:: Validator 'addgeo::geo' not found

Any idea how this can be resolved?
Thanks in advance,
Bert
@bertdepoortere, ss mentioned by OP -
Add this snippet to your kfunctions.php file (/couch/addons/kfunctions.php)

- please make sure you have placed the code in /couch/addons/kfunctions.php file (if that file is missing, please rename kfunctions.example.php to kfunctions.php.

Hope this helps.
KK wrote: @bertdepoortere, ss mentioned by OP -
Add this snippet to your kfunctions.php file (/couch/addons/kfunctions.php)


Hi KK,

The snippet is placed in the /couch/addons/kfunctions.php file.
When i try it on my localhost, everything works fine. But when running on the webserver then i get the error.
@KK & @RiPiGs

The problem is solved, I changed the PHP version off the server from 8.0 to 7.4, now everything is working fine.

Greetings
Bert
9 posts Page 1 of 1