Un usuario preguntó 👇
Ciao Nicola,
Estoy usando AFC para incrustar mapas de Google, pero con SCK instalado obtuve el Error de referencia sin comillas: google no definido error. Solo para estar seguro de que desactivé Autoptimize, pero el error aún existe.
(@ siorc986)
Hace 2 años, 4 meses
Hola @troglos, el problema es que inicias el mapa incluso si el script de Google Maps no está cargado.
La forma común (como he visto en temas y constructores) es configurar mapas en un documento. Listo, pero esa no es la forma correcta. Los mapas deben ingerirse volviendo a llamar al script de Maps. Consulte el primer fragmento de código del siguiente enlace como referencia: ¿ve el parámetro «recuperar» en la secuencia de comandos de Maps?
https://developers.google.com/maps/documentation/javascript/tutorial.
ACF proporciona un filtro para personalizar el comportamiento del mapa (https://www.advancedcustomfields.com/resources/google-map/#google-map%20api) para que puedas:
1) Use ese filtro en las funciones .php del tema hijo para agregar el parámetro de recuperación al script de Maps.
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
function my_acf_google_map_api( $api ){
$api['callback'] = 'initMaps';
return $api;
}2) Cambie el modo de inicio del mapa en su código JavaScript, desde aquí
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});por la presente:
function initMaps() {
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
}De esta manera, el origen del mapa dependerá del script de Maps (independientemente de POR QUÉ se cargue el script de Maps).
Por favor avísame 🙂 Nicola
PD: agregué un poco de teoría y enlaces de referencias a este rompecabezas porque este hilo podría ayudar a otras comunidades.
PD: No probé el código, ten cuidado con él.
(@troglos)
Hace 2 años, 4 meses
Ciao Nicola,
Gracias por la respuesta, pero no lo logré.
Puse el filtro en functions.php y modifiqué la función jQuery como sugirió. No hay error de consola ahora, pero tampoco mapa.
(@ siorc986)
Hace 2 años, 4 meses
@troglos, ¡culpa mía!
¡He leído mejor la documentación de ACF y el filtro que mencioné anteriormente parece personalizar el mapa del mercado de accesorios! De hecho, luego explican lo que debe estar en la página de la plantilla (¡incluido el script de Google Maps!) Para que todo funcione.
¿Me asegura que agregó manualmente un script de Google Map a la interfaz?
Si:
1) No es necesario el elemento «recuperar» en la matriz en la función de filtro (debe retroceder en este punto; creo que debería permanecer como un filtro para personalizar la clave API);
2) Cambie el código JavaScript (lo reescribí):
// ACF Google Map
// https://www.advancedcustomfields.com/resources/google-map/
// global var
var map = null;
function initMaps() {
(function($) {
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker( $(this), map );
});
// center map
center_map( map );
// return
return map;
}
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// marker
var image = '/wp-content/uploads/marker.png';
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: image
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
})(jQuery);
}3) Cambie la inclusión de una secuencia de comandos de Google Map, agregando ambos valores / clave al parámetro de recuperación: la fuente debe ser
https://maps.googleapis.com/maps/api/js?key=[your_key]&callback=initMaps
Nicola
(@troglos)
Hace 2 años, 4 meses
Ahora obtengo Ob {mensaje: «initMaps no es una función», nombre: «InvalidValueError», … «
Agregué el recuerdo de esta manera:
wp_enqueue_script( 'maps.googleapis.com', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyD6B_5U-B260qjKls1E1Oe1qGdQAVBxYj0&callback=initMaps', array( ), '', true );
En el archivo de plantilla acabo de tener
<?php if( have_rows('mappa_locations') ): ?>
<div class="acf-map">
<?php while ( have_rows('mappa_locations') ) : the_row();
$location = get_sub_field('location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<?php /* popup infowindow */ ?>
<strong><?php the_sub_field('titolo_location'); ?></strong>
<div><?php the_sub_field('indirizzo_location'); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>Esta respuesta fue modificada hace 2 años, 4 meses.
(@ siorc986)
Hace 2 años, 4 meses
@troglos ¿Ha intentado eliminar el «async» de app.js?
(@troglos)
Hace 2 años, 4 meses
Sí, lo intenté pero aún no usé «async» para maps.googleapis.com
(@ siorc986)
Hace 2 años, 4 meses
@troglos, si puede proporcionar algún acceso al sitio, podría hacer algunas pruebas (pero ftp si deshabilita la caché para las pruebas).
La ruta de devolución de llamada es correcta, reproduje su código en un tema personalizado y cargué el mapa correctamente.
wp_register_script( 'fe_map_script1' , get_stylesheet_directory_uri() . '/res/test.js#async', array( 'jquery' ) , '', true );
wp_register_script( 'fe_map_script', 'https://maps.googleapis.com/maps/api/js?key=___&callback=initMaps', array(), '', true );<script type='text/javascript' async="async" src='https://localhost:8888/Wordpress/wp-content/themes/___/res/test.js?ver=4.9.8'></script>
<script type='text/javascript' src='https://localhost:8888/Wordpress/wp-content/plugins/smart-cookie-kit/res/empty.js' data-blocked="https://maps.googleapis.com/maps/api/js?key=___&callback=initMaps&ver=4.9.8" data-sck_type="2" data-sck_unlock="profiling" data-sck_ref="Google Maps" data-sck_index="1" class="BlockedBySmartCookieKit"></script>Creo que algo en app.js está causando el problema. Lo que noté fue que las funciones ubicadas después del bloque de código original mencionado no estaban cargadas: en la consola todas estaban indefinidas.
Esta respuesta fue modificada hace 2 años, 4 meses.
(@troglos)
Hace 2 años, 4 meses
Envié un correo electrónico con las credenciales de ftp
Déjeme saber si usted necesita más información
(@ siorc986)
Hace 2 años, 4 meses
@troglos, el problema era que el código JS que reescribí estaba incrustado dentro de otro
jQuery(function ($). Moví ese código en la parte inferior del archivo app.js y ahora el mapa es visible.
Compruébalo 🙂
(@troglos)
Hace 2 años, 4 meses
¡Excelente!
¡Muchas gracias Nicola!
¿Solucionó tu problema??
0 / 0