The idea and reasoning behind creating this snippet / addon is as follows:
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).
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.
- 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.