Hello all,

Inspired by previous implementations of the jQuery Color Picker and Date Picker I am trying to implement a google map picker for a store locator.

I am using: http://www.wimagguc.com/projects/jquery ... ker-gmaps/

But have it as an addon called gmap-picker (which contains the css and js) then I cam calling it into a message field like the previous examples. I've got it working to the extent it shows in the Couch CMS and updates the default fields for long and lat when you drag, however those fields are inside the "Message" editable therefore I created two new fields called to save the data - however these are not been updated / taking the drag values and it seems the inclusions of the dependent scripts is disabling the "save" button for couch.


This is my store-locator.php

Code: Select all

<?php require_once 'couch/cms.php'; ?>

<cms:template title='Store Locator' clonable='1' commentable='0' dynamic_folders='1'>



   <cms:editable name='google_map' type='message'> 
   
   <!-- Dependencies: JQuery and GMaps API should be loaded first -->
   <script src="<cms:show k_couch_link />addons/gmap-picker/jquery-1.7.2.min.js"></script>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
   <!-- CSS and JS for our code -->
   <link rel="stylesheet" type="text/css" href="<cms:show k_couch_link />addons/gmap-picker/jquery-gmaps-latlon-picker.css"/>
   <script src="<cms:show k_couch_link />addons/gmap-picker/jquery-gmaps-latlon-picker.js"></script>   

   <fieldset class="gllpLatlonPicker">
      <input type="text" class="gllpSearchField">
      <input type="button" class="gllpSearchButton" value="search">
      <br/><br/>
      <div class="gllpMap">Google Maps</div>
      <br/>
      lat/lon:
         <input type="text" id="f_gllpLatitude" value="20"/>
         /
         <input type="text" id="f_gllpLongitude" value="20"/>
      <input type="button" class="gllpUpdateButton" value="update map">
   </fieldset>
   
   </cms:editable>

   <cms:editable name='gllpLatitude' type='text' /> 
   <cms:editable name='gllpLongitude' type='text' /> 

</cms:template>

<?php COUCH::invoke(); ?>

NOTE: I have modified the jquery-gmaps-latlon-picker.js so it references the ID (rather than class) of:

f_gllpLatitude
and
f_gllpLongitude

in order to work with :

Code: Select all

   <cms:editable name='gllpLatitude' type='text' /> 
   <cms:editable name='gllpLongitude' type='text' /> 

but it's not working

Any help would be greatly appreciated.

Attached is the store-locator.php and the addon folder zipped (which includes the modified picker js)


BTW - there are a few implementation options for that original script, I have chosen to store Long and Lat because it will allow me to output multiple markers into a google map on the site front end once I get that far. A simpler output would use a single "address" text input then clean that up to pass into a URL string to load the map, but only for a single map - therefore I think Long and Lat a better option (more flexible).

If I get it working, once I have the front end output of "Stores" on a google map with infobox and link to single store page, I will release the full working code to the forums for other Couchers.

[cheesypoof]

Try this:

Code: Select all

<cms:editable name='first_map' type='message'>
   <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="first">
      <div class="gllpMap" style="width:500px;height:250px;">Google Maps</div>
      <input type="hidden" class="gllpLatitude" value=""/>
      <input type="hidden" class="gllpLongitude" value=""/>
      <input type="hidden" class="gllpZoom" value="3"/>
   </div>
   <script>
      jQuery.noConflict();
      (function($) {
         $(function() {
            var startLat = $("#f_first_latitude").val();
            $("#first>.gllpLatitude").val(startLat).change(function() {
               var newLat = $(this).val();
               $("#f_first_latitude").val(newLat);
            });
            var startLng = $("#f_first_longitude").val();
            $("#first>.gllpLongitude").val(startLng).change(function() {
               var newLng = $(this).val();
               $("#f_first_longitude").val(newLng);
            });
         });
      })(jQuery);
   </script>
</cms:editable>
<cms:editable name='first_latitude' type='text'/>
<cms:editable name='first_longitude' type='text'/>

gmap-picker.zip

(33.6 KiB) Downloaded 976 times

I included the latest jQuery and edited the gmap-picker script so it will not run into library conflict issues. I also added .trigger("change") so we can detect when the latitude and longitude is updated.

You should be able to have many of these map pickers if you simply replace each reference to "first" with something unique and obviously each subsequent 'message' editable region would not need to include the script files again.

If anybody has suggestions for improving this, feel free to contribute.

@cheesypoof - you sir are a legend! That works a charm, I've made a few minor adjustments to id's for my own template and am going to build out the output / list view with the markers after a quick lunch, I'll post the completed template file in the next hour.

Quick Question - if one wanted to include the "Address" (now I'm just thinking it might be handy to purely display the address as text, i.e. not have to type it into another field)

Code: Select all

<input type="text" class="gllpLocationName" size=42/>

how would it be worked into the function:

Code: Select all

   <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>

[cheesypoof]

I'm glad it worked for you.

You need to add an editable region:

Code: Select all

<cms:editable name='gmap_location' type='text'/>

Also, add the following to your #gmap div:

Code: Select all

<input type="text" class="gllpLocationName" size="42" value=""/>

Here are the script additions:

Code: Select all

   <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);
            });
            var startLoc = $("#f_gmap_location").val();
            $("#gmap>.gllpLocationName").val(startLoc).change(function() {
               var newLoc = $(this).val();
               $("#f_gmap_location").val(newLoc);
            });
         });
      })(jQuery);
   </script>

In jquery-gmaps-latlon-picker.js you will also need to add .trigger("change") to line 86 and 88 before the semicolons.

I realize now that I should have used the custom events instead of forcing these .trigger("change") additions.

Hi cheesypoof - thanks again, I've left out the address bit for now, I wanted to just keep this simple and by storing the address separately it gives scope down the line to filter by other custom fields.

I have posted full working addon and code samples in the post thread below (tips 'n' tricks) for it to live and serve anyone who might find use for this technique.

viewtopic.php?f=8&t=7432