Extensión de Contact Form 7 para campos de Google Map

FAQ

1. Mi mapa está oscurecido o es «negativo» y tiene una marca de agua con el texto «solo para fines de desarrollo».

Este es un problema con tu clave API de Google que no tiene las API activadas. Debes asegurarte de varias cosas. Si has activado tanto la opción API de codificación geográfica como Google Places en los ajustes del plugin, entonces debes asegurarte de que esas API estén activadas en tu clave. Para activar las API, inicia sesión en tu escritorio de Google, selecciona tu proyecto (o crea uno nuevo) y navega hasta la sección API y servicios. Luego puedes activar/añadir API y buscar la API de codificación geográfica y la API de Google Places y activar las que necesites. Si aún tienes este problema, consulta los otros pasos de Google en estas FAQ acerca de este problema.

2. Soy de Brasil/Canadá/India y mi mapa no funciona.

Si tienes el problema descrito en la FAQ n.° 1 anterior y has activado todas las API necesarias, pero tu mapa sigue sin funcionar, es probable que el problema esté relacionado con la facturación. Las solicitudes de Brasil, Canadá e India deben tener claves API para proyectos vinculados a una cuenta con facturación activada. Consulta este problema en las FAQ de Google.

3. ¿Cómo recupero un valor de latitud/longitud cuando envío mi formulario?

Los formularios envían un $_POST['lat-<map-field-name>'] y un $_POST['lng-<map-field-name>'] a los que puedes acceder conectando el gancho de acción cf7 wpcf7_mail_sent así como wpcf7_mail_failed en caso de que el correo haya fallado, pero el formulario aún se haya enviado correctamente.

add_action('wpcf7_mail_sent', 'get_lat_lng_values');
add_action('wpcf7_mail_failed', 'get_lat_lng_values');
function get_lat_lng_values(){
  //assuming your map field is named your-location,
  if(!isset($_POST['lat-your-location'])) return;
  $lat = $_POST['lat-your-location'];
  $lng = $_POST['lng-your-location'];
}

4. ¿Cómo puedo mostrar un enlace a una ubicación en el mapa de Google en el correo de aviso?

Suponiendo que creaste un campo de mapa llamado «tu-ubicación», la etiqueta de correo [tu-ubicación], mostrará por defecto las coordenadas «lat,lng» de la ubicación que tu usuario seleccionó.
Puedes crear un enlace de mapa de Google como,

<a href="http://maps.google.com/maps?q=[lat-your-location],[lng-your-location]&ll=[lat-your-location],[lng-your-location]&z=8">Location map</a>

esto creará un enlace a un mapa centrado en las coordenadas con un marcador de ubicación en las coordenadas. También puedes cambiar el valor de zoom z al nivel deseado.

5. ¿Cómo configurar campos de dirección personalizados?

En algunos países (Japón, Alemania, España…) el orden de los campos de dirección cambia, por lo que puede ser conveniente diseñar un formulario con campos de dirección en el orden en el que el usuario escribiría naturalmente una dirección postal. Para ello, la versión 1.4 de este plugin introduce la funcionalidad de campos personalizados. Depende de ti crear o añadir campos de texto adicionales en tu formulario que se completarán mediante eventos de JavaScript.

A continuación se muestra un ejemplo de un formulario con una etiqueta de mapa y campos de dirección adicionales, junto con algo de JavaScript personalizado para garantizar que los campos se completen correctamente cuando un usuario interactúa con el mapa.

  <p>[map your-location custom_address "zoom:7;clat:12.044014700107471;clng:79.32083256126546;lat:12.007089;lng:79.810600"]
 <p id="line">Your address (street) [text your-address-line]</p>
 <p id="city">Your address (city) [text your-address-city]</p>
 <p id="pincode">Your address (pin) [text your-address-pin]</p>
 [submit "Send"]
 <script type="text/javascript">
   (function($){
     $(document).ready( function(){
       $('.cf7-google-map-container.your-location').on('update.cf7-google-map', function(e){
         //the event has 5 address fields, e.address.line, e.address.city, e.address.pin, e.address.state, e.address.country.
         //some fields may be empty.
         $('p#line input').val(e.address.line);
         $('p#city input').val(e.address.city);
         $('p#pincode input').val(e.address.pin);
       })
     })
   })(jQuery)
 </script>

Si usas la etiqueta de dirección de correo electrónico en tu aviso de correo electrónico y quieres que tus usuarios modifiquen la dirección que se muestra a través de tus campos personalizados, entonces es importante que actives un evento similar al anterior en el contenedor del mapa. Esto notificará al plugin para que actualice el campo de dirección completo que se usará para completar la etiqueta de correo electrónico.

$('p#line input, p#city input, p#pincode input').on('change', function(){
  var event = $.Event("update.cf7-google-map", {
      'address': {
        'line': '', /*insert the first line here*/
        'city': '', /*insert the city here*/
        'state': '',/*insert the state here*/
        'country': ''/*insert the country here*/
      },bubbles: true,cancelable: true});
  /*NOTE: it is not important how many details you enter, only the values will be submitted in the same order.*/
  $('.cf7-google-map-container').trigger(event);
}

6. ¿Cómo puedo personalizar la visualización de la dirección en el correo de aviso?

si incluyes la etiqueta de dirección de correo [dirección-] en el cuerpo del correo de aviso, se mostrará por defecto con cada campo en una nueva línea. Si necesitas cambiar esto, engancha el siguiente filtro,

add_filter('cf7_google_map_mailtag_address', 'change_address_format',10,3);
function change_address_format($formatted_address, $address, $field){
  if('my-location'==$field){ //make sure you're handling the right form field.
    $formatted_address=implode(', ',$address);
  }
  return $formatted_address;
}

7. ¿Puedo cambiar los ajustes por defecto del mapa?

sí, puedes usar el siguiente gancho para filtrar el tipo de mapa (establecido en ROADMAP por defecto),

add_filter('cf7_google_map_default_type', 'change_map_type', 10,2);
function change_map_type($type, $field){
  //type must be either ROADMAP/SATELLITE/TERRAIN/HYBRID.
  if('your-location' ==$field) $type = 'SATELLITE';
  return $type;
}

puedes desactivar/activar los controles del mapa,

add_filter('cf7_google_map_settings', 'use_custom_map_settings',10,2);
function use_custom_map_icon($settings, $field_name){
  if( 'your-location' == $field_name ){
    $settings['mapTypeControl']= false; //hide (true by default).
    $settings['navigationControl']= false; //hide (true by default).
    $settings['streetViewControl']= false; //hide (true by default).
    $settings['zoomControl']=false; //hide (false by default).
    $settings['rotateControl']=true; //show (false by default).
    $settings['fullscreenControl']=true; //show (false by default).
    $settings['rotateControl']= true; //show (false by default).
    $settings['zoom']= 12; //set by default to the value initialised at the time of creating the form tag.
    $settings['center'] = array('11.936825', '79.834278'); //set by default to the value initialised at the time of creating the form tag.

  }
  return $settings;
}

puedes filtrar los ajustes del marcador del mapa,

add_filter('cf7_google_map_marker_settings', 'use_custom_marker_settings',10,2);
function use_custom_marker_settings($settings, $field_name){
  if( 'your-location' == $field_name ){
    $settings['icon'] = ... //set your image url here.
    $settings['draggable'] = false; //true by default.
    $settings['position'] = array('11.936825', '79.834278'); //set by default to the value initialised at the time of creating the form tag.

  }
  return $settings;
}

9. ¿Puedo traducir las etiquetas de los campos de mi dirección?

Si estás usando los campos de dirección integrados brindados por el plugin, puedes cambiar las etiquetas de los campos utilizando los siguientes ganchos:

add_filter('cf7_google_map_address_label', 'change_address_label',10,2)
function change_address_label($label, $field_name){
  if('your-location'==$field_name){
    $label = 'Adresse';
  }
  return $label;
}
add_filter('cf7_google_map_city_label', 'change_city_label',10,2)
function change_city_label($label, $field_name){
  if('your-location'==$field_name){
    $label = 'Ville';
  }
  return $label;
}
add_filter('cf7_google_map_pincode_label', 'change_pincode_label',10,2)
function change_pincode_label($label, $field_name){
  if('your-location'==$field_name){
    $label = 'Code postal';
  }
  return $label;
}
add_filter('cf7_google_map_country_label', 'change_country_label',10,2)
function change_country_label($label, $field_name){
  if('your-location'==$field_name){
    $label = 'Pays'
  }
  return $label;
}

10. ¿Es posible interactuar con el mapa y vincular cambios de eventos?

A partir de la versión 1.6, es posible interactuar con el objeto de la biblioteca gmap3 una vez inicializado, cada vez que un usuario arrastra el marcador, o si activas la API de geocodificación, para vincular las actualizaciones de direcciones cuando se selecciona un nuevo resultado de búsqueda.

Puedes obtener ejemplos de fragmentos de código de JavaScript si usas la extensión Smart Grid que tiene un editor de interfaz de usuario de cuadrícula con atajos de código para ahorrar tiempo en el desarrollo (consulta la Captura de pantalla n.° 17 en la página del plugin); de lo contrario, puedes vincular los siguientes eventos:

$('.cf7-google-map-container').on('init.cf7-google-map drag.cf7-google-map update.cf7-google-map', function(e){
  //event e contains various object references. e.gm3 for the gmap3 object, e.marker, e.gmap are the google marker and map respectively.
  //so to set a circle around the marker...
  e.gm3.circle({
    center: [e.marker.position.lat(),e.marker.position.lng()],
    radius : 750,
    fillColor : '#b0b14eb1',
    strokeColor : '#fff100ff'
  });

});

11. ¿Cuáles son los eventos de JavaScript expuestos?

A partir de la versión 1.8, además de activarse los objetos de eventos jQuery, también se activan eventos simples de JavaScript,
Todos los eventos se activan en el contenedor del mapa .cf7-google-map-container

eventos jQuery:

init.cf7-google-map
drag.cf7-google-map
update.cf7-google-map

el evento init se activa al inicializar un mapa y expone

• gm3 objeto gmap3,
• gmap Objeto del mapa de Google,
• marker el objeto marcador de Google que se ha actualizado.
• settings.center las coordenadas del centro del mapa como un array con [lat,lng]
• settings.zoom el nivel de zoom del mapa.
• settings.type el tipo de mapa usado,
• settings.marker las coordenadas del marcador actual como una matriz [lat,lng]

el evento de arrastre se activa cuando se arrastra un marcador en el mapa, expone,

• settings.center las coordenadas del centro del mapa como un array con [lat,lng]
• settings.zoom el nivel de zoom del mapa.
• settings.type el tipo de mapa usado,
• settings.marker las coordenadas del marcador actual como una matriz [lat,lng]

el evento de actualización se activa y luego se cambia el marcador en el mapa (cuando el campo de búsqueda se usa para ubicar automáticamente un resultado), se expone,

• gm3 objeto gmap3,
• gmap Objeto del mapa de Google,
• marker el objeto marcador de Google que se ha actualizado.
• address la dirección de la ubicación del marcador,

**Eventos equivalentes de JavaScript **

init/cf7-google-map
drag/cf7-google-map
update/cf7-google-map

Sin embargo, ten en cuenta que en los eventos de JavaScript, los objetos del mapa se encuentran en la propiedad event.detail, mientras que en el objeto de evento jQuery estos se exponen directamente en la raíz del objeto del evento.

12. ¿Cómo puedo aplazar la inicialización de un mapa?

Para activar mediante programación una inicialización de mapa, primero debes desactivar la inicialización automática usando el filtro,

add_filter( 'cf7_google_map_initialise_on_document_ready','your_location_stop_initialise',10,2);
/**
* Filter initialisation on document ready event.
* You can stop the automatic intialisation should you want to control the process on a separate popup.
* @param Boolean $do_init weather to initialise or not, true by default.
* @param String $field the field name being populated.
*/
function your_location_stop_initialise($do_init, $field){
  if( 'your-location' !== $field) return $do_init; //check if this is the right map field.
  return false;
}

en la parte pública de la web necesitas disparar el evento initialise-cf7-gmap en el contenedor del mapa,

$(document).ready(function(){
  //assuming your field is 'your-location'
  $('.cf7-google-map-container.your-location').trigger('initialise-cf7-gmap');
})