Add "Your Location" button

[benkeen]

As per discussion here: https://github.com/formtools/core/issues/632

Also relates to #2.

This will always add the button for all sites. No great point adding a customizable setting for this, I don't think - it'll be useful in a wide variety of cases.

[nelsondcosta23]

Hi Ben, so I just upgrade to 2.1.0, cant find the way to activate de button for my location. Any tip?

[benkeen]

Are you on a secure server? It'll only appear for https websites unfortunately. The spec says that for security reasons browsers aren't encouraged to let the feature work without https. I made a note in the documentation.

[nelsondcosta23]

Hi Ben, how are you? Yes I tested localhost, and inside a server with https:// ( I used letsencrypted ) I will tested with another browser...

[benkeen]

Strange! Any luck? What browser were you using?

[nelsondcosta23]

Tested with google chrome and firefox. hmmm do you think maybe this have something about the problem?

[benkeen]

I doubt it.. does the map at least show up?

Try this, look at this particular request: [your URL and path to]/global/scripts/field_types.php

That'll be loaded on your Edit Submission page that shows the google map(s).

And look to see if the JS returned by that file contains a addYourLocationButton method.

[nelsondcosta23]

Yes the maps shows up

Hmmm strange "addYourLocationButton" doesnt show inside the script hmmmm I ll look arround

`$(function() { $(".fancybox").fancybox(); }); /**

• The following code provides a simple text/word counter option for any
• textarea. It either just keeps counting up, or limits the results to a
• certain number - all depending on what the user has selected via the
• field type settings. */ var cf_counter = {}; cf_counter.get_max_count = function(el) { var classes = $(el).attr('class').split(" ").slice(-1); var max = null; for (var i=0; i<classes.length; i++) { var result = classes[i].match(/max(\d+)/); if (result != null) { max = result[1]; break; } } return max; }

$(function() { $("textarea[class~='cf_wordcounter']").each(function() { var max = cf_counter.get_max_count(this); if (max == null) { return; } $(this).bind("keydown", function() { var val = $(this).val(); var len = val.split(/[\s]+/); var field_name = $(this).attr("name"); var num_words = len.length - 1; if (num_words > max) { var allowed_words = val.split(/[\s]+/, max); truncated_str = allowed_words.join(" "); $(this).val(truncated_str); } else { $("#" + field_name + "_counter").find("span").html(parseInt(max) - parseInt(num_words)); } }); $(this).trigger("keydown"); }); $("textarea[class~='cf_textcounter']").each(function() { var max = cf_counter.get_max_count(this); if (max == null) { return; } $(this).bind("keydown", function() { var field_name = $(this).attr("name"); if (this.value.length > max) { this.value = this.value.substring(0, max); } else { $("#" + field_name + "_counter").find("span").html(max - this.value.length); } }); $(this).trigger("keydown"); }); });

$(function() { // the datetimepicker has a bug that prevents the icon from appearing. So // instead, we add the image manually into the page and assign the open event // handler to the image var default_settings = { changeYear: true, changeMonth: true } $(".cf_datepicker").each(function() { var field_name = $(this).attr("name"); var settings = default_settings; if ($("#" + field_name + "_id").length) { settings.dateFormat = $("#" + field_name + "_format").val(); } $(this).datepicker(settings); $("#" + field_name + "_icon_id").bind("click", { field_id: "#" + field_name + "_id" }, function(e) { $.datepicker._showDatepicker($(e.data.field_id)[0]); }); });

$(".cf_datetimepicker").each(function() { var field_name = $(this).attr("name"); var settings = default_settings;

if ($("#" + field_name + "_id").length) {
  var settings_str = $("#" + field_name + "_format").val();
  settings_str = settings_str.replace(/datetime:/, "");
  var settings_list = settings_str.split("|");
  var settings = {};
  settings.dateFormat = settings_list[0];
  settings.timeFormat = settings_list[1];
  for (var i=2; i<settings_list.length; i++) {
    var parts = settings_list[i].split("`");
    if (parts[1] === "true") {
      parts[1] = true;
    }
    settings[parts[0]] = parts[1];
  }
}

$(this).datetimepicker(settings);
$("#" + field_name + "_icon_id").bind("click", { 
  field_id: "#" + field_name + "_id"
}, function(e) {
  $.datepicker._showDatepicker($(e.data.field_id)[0]);
});

}); }); $(function() { var default_settings = { buttonImage: g.root_url + "/global/images/clock.png", showOn: "both", buttonImageOnly: true } $(".cf_timepicker").each(function() { var field_name = $(this).attr("name"); var settings = default_settings; if ($("#" + field_name + "_id").length) { var settings_list = $("#" + field_name + "_id").val().split("|"); if (settings_list.length > 0) { settings.timeFormat = settings_list[0]; for (var i=1; i<settings_list.length; i++) { var parts = settings_list[i].split("`"); if (parts[1] === "true") { parts[1] = true; } else if (parts[1] === "false") { parts[1] = false; } settings[parts[0]] = parts[1]; } } } $(this).timepicker(settings); }); }); var cf_phone = {}; cf_phone.check_required = function() { var errors = []; for (var i=0; i<rsv_custom_func_errors.length; i++) { if (rsv_custom_func_errors[i].func != "cf_phone.check_required") { continue; } var field_name = rsv_custom_func_errors[i].field; var fields = $("input[name^=\"" + fieldname + "\"]"); fields.each(function() { if (!this.name.match(/_(\d+)$/)) { return; } var req_len = $(this).attr("maxlength"); var actual_len = this.value.length; if (req_len != actual_len || this.value.match(/\D/)) { var el = document.edit_submission_form[field_name]; errors.push([el, rsv_custom_func_errors[i].err]); return false; } }); } if (errors.length) { return errors; }

return true; } var cf_code = {}; cf_code.check_required = function() { var errors = []; for (var i=0; i<rsv_custom_func_errors.length; i++) { if (rsv_custom_func_errors[i].func != "cf_code.check_required") { continue; } var field_name = rsv_custom_func_errors[i].field; var val = $.trim(window["codemirror" + field_name].getCode()); if (!val) { var el = document.edit_submission_form[field_name]; errors.push([el, rsv_custom_func_errors[i].err]); } } if (errors.length) { return errors; } return true; } / all JS for this module is found in /modules/field_type_file/scripts/edit_submission.js / window.googleMapsInit = function () { var maps = {}; var defaultMapSettings = { zoom: 3, center: new google.maps.LatLng(42.258881, -100.195313), mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false, mapTypeControl: false };

var initMap = function () { var gmf_id = $(this).attr("id"); var address_field = $(this).find(".cf_gmf_address"); var field_name = address_field.attr("name"); var data = $(this).find(".cf_gmf_data").val(); var opts = $.extend(true, {}, defaultMapSettings);

if (data) {
  var parts = data.split("|");
  if (parts.length == 3 && parts[1].length != 0) {
    var lat_lng = parts[1].split(", ");
    opts.zoom = parseInt(parts[2], 10);
    opts.center = new google.maps.LatLng(parseFloat(lat_lng[0]), parseFloat(lat_lng[1]));
  }
}

maps[gmf_id] = {
  map: new google.maps.Map($(this).find(".cf_gmf")[0], opts)
};

if (address_field.val() != "") {
  maps[gmf_id].marker = new google.maps.Marker({ position: opts.center, map: maps[gmf_id].map });
} else {
  maps[gmf_id].marker = new google.maps.Marker();
}

google.maps.event.addListener(maps[gmf_id].map, 'zoom_changed', function (e) {
  $("#" + gmf_id).find("[name=" + field_name + "_zoom]").val(maps[gmf_id].map.getZoom());
});

};

// googleMapsInit may fire before or after DOM ready $(function () { $(".cf_gmf_section").each(initMap);

$(".cf_gmf_address").bind("keydown", function (e) {
  if (e.keyCode === 13) {
    $(e.target).closest(".cf_gmf_section").find(".cf_gmf_update").trigger("click");
    return false;
  }
});

$(".cf_gmf_update").bind("click", update_map);

function update_map (e) {
  var gmf_div = $(e.target).closest(".cf_gmf_section");
  var field_name = gmf_div.find(".cf_gmf_address").attr("name");
  var map_info = maps[gmf_div.attr("id")];
  var map = map_info.map;
  var address = gmf_div.find(".cf_gmf_address").val();
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({'address': address}, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var loc = results[0].geometry.location;
      map.setCenter(loc);
      var coords = loc.lat() + ", " + loc.lng();
      $(gmf_div).find("[name=" + field_name + "_coords]").val(coords);
      $(gmf_div).find("[name=" + field_name + "_zoom]").val(map.getZoom());
      $(".cf_gmf_coords_str").html(coords);
      map_info.marker.setPosition(loc);
      map_info.marker.setMap(map);
    }
  });
}

}); };

$(function () { // if google maps isn't included (found by an ID on the script tag), if ($("#google-maps-field-lib").length) { return; }

$(".cf_gmf_section").each(function () { var address_field = $(this).find(".cf_gmf_address"); var field_name = address_field.attr("name"); $("#cfgmf" + field_name + "_map").after("<div class=\"hint\">Please set your Google Maps API key in the Google Maps Field module settings.

[benkeen]

Interesting... then either that file is cached somehow (try loading it in a separate window and refreshing the page) or the DB hasn't been updated.

Give me a moment and I'll check the module. Perhaps it's not properly updating the DB for upgrades...

[btw - quick fix would be to uninstall & reinstall the module (save your license key first!) - that'll ensure the DB is up to date. Edit - actually this would mean you'd need to reset all your form fields back to Google Maps fields... perhaps hold off... ]

[benkeen]

Yeah apologies @nelsondcosta23 this is my mistake. The upgrade code doesn't update the database.

Hold off, I'll release an update this afternoon.

[nelsondcosta23]

aaahh i might use custom fields to change :)