Cerca
Generic filters
Frase esatta
Cerca nel titolo
Cerca nel contenuto
Filter by Custom Post Type
Filter by Categorie
Quick Snippets
Guide e Tutorial Joomla
Guide e Tutorial Wordpress
Notizie
Programmazione Web
Trucchi e Guide Apple Mac OS
Filtra per Tags
Seleziona / Seleziona tutti
acf
action
aggiornamento joomla
aggiornamento virtuemart
aggiungere campi
akeeba
amazon s3
amazon web services
angularjs
apache
aruba
autopost
aws
backup
backup buddy
blocksit.js
bootstrap
bordi arrotondati
cache
caching
campi personalizzati
captcha recaptcha
cf7
chronoforms
cloud
compressione file
compressione immagini
conditional fields
contact form 7
countdown
cpt
css
css framework
css3
custom post type
custom registration
data di nascita
debug
disegni
downgrade
draw
ec2
endpoints
ergonet
font awesome
font custom
fontweb
form
front end
ftp
functions.php
funzioni
glyphicons
google
hook
hosting
hosts
html
html5
image optim
javascript
joomla
joomla api
joomla development
joomla festival
joomla lombardia
joomla update
jquery
k2
lightbox
login
mac
mac os
mamp
metabox
mobile friendly
multilingua
mysql
news
ottimizzazione
ottimizzazione immagini
override
password
pdf
php
plugin
qtranslate
redis
registrazione
registrazione utente
responsive
restore
ripristino
roolback
rounded tables
select
seo
server php locale
shortcode
shortpixel
sicurezza
smau
social
spotlight
SSL
system cache
table
template
tooltips
trasferimento sito
trucchi
twitter
ubuntu
uikit
user meta
visio alternative
web advisor
widget
widgetkit
windows
woocommerce
wordpress
wordpress api
wp capability
wp user
wp-config.php
wp_query
wug
xampp
yootheme

Come inserire marker multipli su Google Maps con ACF

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

Sto lavorando ad un progetto molto carino su WordPress, appena terminato scriverò un articolo interamente dedicato perchè secondo me ha del potenziale, ma non vi dico altro, vi lascio la pulce nell’orecchio, vi dico solo è che sul mondo di WordPress 🙂

ACF markers multipli su Google MapsPer questo progetto sto utilizzando molto ACF Advanced Custom Fields Pro, un plugin che permette di aggiungere i campi aggiuntivi a pagine, articoli e custom post type di WordPress, personalizzandoli a piacimento.

In questo articolo spiego come inserire più di un marker sulla mappa di Google; in buona sostanza creo un array con tutte le entry degli indirizzi di Google Maps e poi con un ciclo PHP faccio un echo sulla mappa, parlo un’altro lingua ? Bene! Con un esempio pratico è tutto più semplice.

Come configurare un Field Group ACF con campi ripetibili (repeater fields)

La prima cosa da fare è creare un nuovo Gruppo di Campi in ACF (ACF Field Group), poi creeremo un campo che utilizzeremo come array ed al suo interno i relativi campi ripetibili (sub_fields).

Prendete quindi nota :

Creare un nuovo Field Group e date il nome : Google Maps

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

 Etichetta Campo Nome Campo Tipo di Campo
Markers markers Ripetitore
Indirizzo indirizzo Google Map
Sito internet sito_internet Url
Descrizione descrizione Area di Testo

Il risultato che dovreste avere è quello in figura

ACF Multi Markers sulla Mappa di GoogleAdesso che abbiamo creare il nostro Gruppo di Campi ACF, è necessario comunicare quando e dove questi campi personalizzati dovranno apparire nella dashboard di WordPress, quindi alla voce “Posizione” selezionare il tipo di regola, nel mio caso, ho deciso di mostrare i campi aggiuntivi solo se il tipo di Post è un Articolo ma potete creare N regole differenti a seconda delle vostre esigenze, per esempio se la categoria è uguale ad un certo nome, se il tag articolo è di un certo tipo, ecc, ecc.

ACF posizionare i campi nel back end di WP

Fatto ciò salviamo e creiamo un nuovo articolo di Worpdress, ora sotto l’editor predefinito troveremo i campi aggiuntivi appena creati.

Campi personalizzati Worpress ACF con ripetitore Google Map

Per inserire più di un record è sufficiente premere il pulsante “Aggiungi Riga” e compilare nuovamente tutti i campi.

Come mostrare a front end i campi personalizzati di ACF Advanced Custom Field, Google Maps Multi Marker

Adesso che abbiamo creato il “motore”, se salviamo l’articolo ed andiamo a vederlo a front end ci accorgeremo che non ci saranno i campi personalizzati di ACF, infatti è necessario aggiungerli direttamente nel template attualmente attivo.

Do per scontato che se state leggendo questa guida, abbiate un minimo di dimestichezza con PHP, quindi è chiaro che per inserire il codice sottostante è necessario aprire il file via FTP.

Io ho creato un tema child di Worpdress così da non perdere le modifiche ad un eventuale aggiornamento del tema.

Per prima cosa apriamo il file del tema che renderizza l’articolo, di solito single.php, e richiamiamo le API di Google con questa stringa :

poi incolliamo il seguente codice appena sotto il richiamo delle API, questo codice JS renderizza i campi ACF sulla mappa.

Ora incolliamo questa porzione di codice nel punto in cui vogliamo far apparire i campi aggiuntivi, nel mio caso dopo la generazione del contenuto di WordPress.

A questo punto è necessario salvare le modifiche al file e come risultato otteniamo :

Come mostrare i campi personalizzati ACF nel template a front end

Ciao!Alla prossima 🙂

 

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?