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