Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
3 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.
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
3 posts Page 1 of 1

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest