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:
Good luck!
NB: You must use the attached addon as there were minor modifcations made to the original jquery-gmaps-latlon-picker.js file.
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.