Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
14 posts Page 1 of 2
EDIT: A revised version of this addon for v2.0 can be found here - viewtopic.php?f=4&p=28139#p28139

Hello all,

Firstly - thanks @cheesypoof for his help getting this working, as promised, here is the gmap-picker addon and example template code (working) to create a "Store Locator" (or office, places of interest or anything map orientated).

This is inspired by the previous Color and Date picker addons and born from a need to provide a nice easy way for a client to add a map location (like many WordPress or Expression Engine modules / plugins).

It's very simple and could be modified to suit your needs, in this instance it uses a "message" field to load in the "jquery-latitude-longitude-picker-gmaps" by Richard Dancsi (free to use and modify).
http://www.wimagguc.com/projects/jquery ... ker-gmaps/

The marker then essentially populates the Lat and Long in two editable regions that are pulled into a map in a single instance and multiple marker instance (single and list view).

Usage

1. Put whole "gmap-picker" folder in couch > addons
2. Add those editable options to your existing globals.php - these are a convenient way for setting the default zoom, lat and long on the "front end". If you wish you can refrain from using a globals type scenario and instead hard code the values in the store-locator.php template lines 127 & 128 (replace the couch tags referencing the master page with your values).
3. Throw either the whole of store-locator.php or porttions of it into your exisiting build. The important parts / bare min setup requires:

Code: Select all
<cms:editable name='gmap' type='message' desc='Drag the marker into position'>
   <script src="<cms:show k_couch_link/>addons/gmap-picker/jquery-1.9.1.min.js"></script>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
   <script src="<cms:show k_couch_link/>addons/gmap-picker/jquery-gmaps-latlon-picker.js"></script>
   <div class="gllpLatlonPicker" id="gmap">
      <div class="gllpMap" style="width:750px;height:450px;"></div>
      <input type="hidden" class="gllpLatitude" value=""/>
      <input type="hidden" class="gllpLongitude" value=""/>
      <input type="hidden" class="gllpZoom" value="1"/>
   </div>
   <script>
      jQuery.noConflict();
      (function($) {
         $(function() {
            var startLat = $("#f_gmap_latitude").val();
            $("#gmap>.gllpLatitude").val(startLat).change(function() {
               var newLat = $(this).val();
               $("#f_gmap_latitude").val(newLat);
            });
            var startLng = $("#f_gmap_longitude").val();
            $("#gmap>.gllpLongitude").val(startLng).change(function() {
               var newLng = $(this).val();
               $("#f_gmap_longitude").val(newLng);
            });
         });
      })(jQuery);
   </script>
</cms:editable>
<cms:editable name='gmap_latitude' type='text'/>
<cms:editable name='gmap_longitude' type='text'/>



Good luck!

NB: You must use the attached addon as there were minor modifcations made to the original jquery-gmaps-latlon-picker.js file.

Attachments

Hi Patrick,

This looks pretty useful indeed.
You mentioned store-locator.php template lines 127 & 128 in the directions
but I couldn't find that template in the attached files.
Am I missing something?
Sorry KK and everyone else - wrong file attached.

Attached is the completed addon and template examples I referred to previously.

Attachments

Wow! Great work, Patrick.
Hi All,

Below are a few screen shots to accompany my initial post about the addon / tip (I should have thought of including these, thanks KK).

Attachments

And finally a few front end grabs.

Attachments

WOW! really great work.
now all that is needed is a way to search and display the located stores/offices.
let's say you have a input field and you enter a "zip code/city/town" and hit submit. the user would be directed to the locator page and the stores with the associated "zip code/city/town" would be displayed. also the same could be done with a pull down populated with countries. ;)
Thanks ;) shouldn't be too hard to put a search in. The example above is very basic, you could add more fields, I may have a mess around with it in the sandbox and see what happens...

I'm wondering if we can use the native search and results page could be used just displaying results by coords
@cheesypoof had created a store locator that used latitude/longitude to search for available entries. It had to make use of the custom query feature of Couch, though.

I hope he can share the recipe here :)
Should be a straightforward affair to merge his solution with that of Patricks to create exactly what @cmdillon asked for.
Hi KK, sounds good / promising, I am keen to educate myself on custom queries and really open up search perimeters it would certainly help with future builds that require knuckle down searches.
14 posts Page 1 of 2
cron