Crea un plug-in per le mappe statiche di Google

In questo tutorial, imparerai come creare un plug-in che utilizza l'API di Google Maps Static per visualizzare una mappa. Vedremo anche le differenze tra gli shortcode chiusi e non chiusi.

L'API di Google Static Maps

Google fornisce due versioni della sua API di Maps per gli sviluppatori: dinamica, che richiede JavaScript e statica, che restituisce semplicemente un'immagine e non richiede JavaScript.

Le mappe dinamiche consentono di ingrandire e eseguire il panning della mappa e di manipolare la mappa in modo programmatico in risposta agli eventi generati dall'utente. Tutto ciò è fantastico, ma se hai semplicemente bisogno di rilasciare un'immagine di mappa di base sulla tua pagina, stai molto meglio usando l'API della mappa statica.

Vantaggi dell'API di mappe statiche

• Non è necessario che JavaScript sia abilitato
• Riduzione delle richieste al server
• Non c'è bisogno di scrivere alcun JavaScript
• La risposta delle mappe statiche è molto veloce

Tutto ciò di cui hai bisogno è un URL

L'url di base per una mappa statica è: http://maps.googleapis.com/maps/api/staticmap? più alcuni parametri.

Ecco un url dal vivo per Chicago, Illinois, utilizzando i parametri richiesti: centro, dimensioni, zoom e sensore:

http://maps.googleapis.com/maps/api/staticmap?center=chicago,illinois&size=500x300&zoom=12&sensor=false

Questo è ciò che dovresti vedere nel tuo browser:

Pulito e veloce!

Il nostro plugin prenderà argomenti da uno shortcode, li aggiungerà all'URL di base e restituirà l'url completo ai nostri post e pagine.

Useremo i seguenti parametri:

• centro (obbligatorio): la posizione del centro della mappa come testo o come latitudine, longitudine, esempio: "chicago, illinois" o "41 .88, -87.63 "
• dimensione (obbligatorio): la dimensione dell'immagine della mappa in pixel, larghezza x altezza, esempio: '400x350'
• zoom (richiesto) - il livello di ingrandimento (ingrandimento), 0 (tutto il mondo) a 21 (più dettagliato)
• sensore (richiesto) - vero o falso, vedere la spiegazione dei parametri del sensore
• maptype (opzionale) - il tipo di mappa: roadmap, satellite, terreno, ibrido, vedere la spiegazione dei parametri di maptype
• scala (opzionale) - ridimensionamento per uso desktop o mobile, vedere spiegazione dei parametri di scala
• formato (opzionale) - formato immagine richiesto, png, jpg, gif e altri, vedere la spiegazione dei parametri di formato
• marcatori (facoltativo): utilizzeremo un semplice indicatore per mostrare il centro della nostra mappa

Facciamolo.

Passaggio 1 Configurare il plug-in

La cartella del plugin WordPress si trova nella cartella di installazione di WordPress all'indirizzo wp-content / plugins

Crea una cartella all'interno della cartella dei plugin. Chiamiamolo google-static-map

Ora crea il file di plugin stesso. Chiamiamolo google_static_map.php

Il percorso del tuo file plugin dovrebbe ora essere: wp-content / plugins / google-static-map / google_static_map.php

Ogni plugin Wordpress necessita di alcune informazioni di intestazione in modo che WordPress possa identificarlo e renderlo disponibile nella pagina del plug-in del dashboard. Inserisci questo codice nella parte superiore del tuo file di plugin e salvalo.

  
Puoi modificare queste informazioni secondo le tue esigenze.
 
Ora vai al tuo dashboard di WordPress e seleziona il menu Plugin. Vedrai il plugin elencato in questo modo:
  
Non attivarlo ancora.
 
 
 Passaggio 2: impostazione shortcode
 
Gli shortcode di Wordpress ti consentono di inserire l'output del plugin nei tuoi post e pagine.
 
Lo shortcode
 
Lo shortcode di WordPress verrà utilizzato in post e pagine come questo: [gsm_google_static_map center = 'chicago, illinois' zoom = '10' size = '400x350']
 
Poiché stiamo usando uno shortcode, dobbiamo dirlo a WordPress. Per farlo usiamo la funzione WordPress add_shortcode.
 
Inserisci il seguente codice nel tuo file plugin:
 
 add_shortcode ('gsm_google_static_map', 'gsm_google_static_map_shortcode');
 
Il primo parametro gsm_google_static_map definisce il nome dello shortcode che useremo nei nostri post e pagine. Il secondo parametro gsm_google_static_map_shortcode è il nome della funzione chiamata dallo shortcode.
 
Le funzioni shortcode e plugin sono precedute da gsm (mappa statica google) per evitare possibili collisioni di nomi con qualsiasi altra funzione che WordPress potrebbe utilizzare. Le probabilità sono magre che WordPress o qualsiasi plugin abbia una funzione chiamata google_static_map ma vale la pena di giocare sul sicuro.
 
 Passaggio 3 La funzione Shortcode
 
Ecco la funzione chiamata da gsm_google_static_map. Inserisci il seguente codice nel tuo file plugin:
 
 function gsm_google_static_map_shortcode ($ atts) $ args = shortcode_atts (array ('center' => '41 .88, -87.63 ',' zoom '=>' 14 ',' size '=>' 400x400 ',' scale '=>' 1 ',' sensor '=>' false ',' maptype '=>' roadmap ',' format '=>' png ',' markers '=> $ atts [' center ']), $ atts); $ map_url = ''; return $ map_url;
 
Ottenere buoni dati
 
La nostra funzione shortcode gsm_google_static_map_shortcode accetta gli attributi shortcode (parametri) contenuti in $ atts array. Questi attributi dovrebbero essere un set solido di parametri di mappa. Ma cosa succede se non lo sono? L'API shortcode ci fornisce un modo per fornire valori predefiniti per questi attributi attesi, il shortcode_atts funzione.
 
Shortcode_atts accetta due argomenti. Il primo è un array di nome => coppie di valori. Il nome è l'attributo shortcode previsto e il valore è il suo valore predefinito. Se il nome non è presente in $ atts, viene creato con il valore predefinito. Questo ci permette di assicurarci che la nostra funzione abbia gli attributi attesi con i valori predefiniti.
 
Quello che stiamo veramente dicendo qui è: confrontare il $ atts con il nome elencato => coppie di valori e se nessuna di esse non esiste $ atts quindi crearli e utilizzare il valore predefinito.
 
 $ args = shortcode_atts (array ('center' => '41 .88, -87.63 ',' zoom '=>' 14 ',' size '=>' 400x400 ',' scale '=>' 1 ',' sensore '= > 'false', 'maptype' => 'roadmap', 'format' => 'png', 'markers' => $ atts ['center']), $ atts);
 
Nota che per il parametro marcatori abbiamo assegnato il valore centrale che è stato passato dallo shortcode.
 
Crea un URL piacevole
 
Ora che shortcode_atts ha fatto in modo di avere un buon set di parametri, tutto ciò che dobbiamo fare è creare un buon URL delle mappe statiche per tornare al nostro post o pagina.
 
Noi usiamo per ciascuno per eseguire il ciclo su nome => coppie di valori in $ args concatenandoli con gli elementi corretti per creare un url correttamente formato.
 
 $ map_url = '';
 
Il trucco con questo è quello di assicurarsi che il fornito $ args i nomi degli elementi (centro, zoom, ecc.) sono esattamente uguali ai nomi dei parametri previsti nella richiesta di Google Maps.
 
Noi usiamo UrlEncode sui valori per assicurarsi che tutti i caratteri non standard siano convertiti in modo sicuro. Ad esempio, gli spazi vengono convertiti nel carattere +.
 
 
 Step 4 Test
 
Attiva il plugin nella tua pagina Plugin.
 
Aggiungi questo shortcode a un post o una pagina:
 
[gsm_google_static_map center = 'sydney, australia' zoom = '10' size = '600x350']
 
Dovresti vedere questa mappa:
  
Gioca con gli attributi shortcode per vedere diverse mappe. Forse questo:
 
[gsm_google_static_map center = 'auckland, nz' zoom = '6' size = '600x350' maptype = 'terrain']
  
 Step 5 A Better Plugin
 
Valore aggiunto: racchiudere codici brevi
 
Il modulo shortcode che abbiamo usato sopra è noto come shortcode a chiusura automatica. Ciò significa che il nome dello shortcode e i suoi attributi sono contenuti tra una coppia di parentesi quadre.
 
[gsm_google_static_map center = 'chicago, illinois' zoom = '10' size = '400x350']
 
Ma c'è una variazione su questo modulo noto come allegato shortcode.
 
[gsm_google_static_map center = 'chicago, illinois' zoom = '10'] Mappa di Chicago, Illinois [/ gsm_google_static_map]
 
Il testo "Mappa di Chicago, Illinois" è racchiuso tra i tag di apertura e di chiusura dello shortcode. Questo è chiamato il "contenuto" e possiamo usarlo a nostro vantaggio.
 
SEO migliore e un fallback
 
L'API shortcode ci consente di catturare il contenuto come secondo parametro della funzione shortcode, nel nostro caso il gsm_google_static_map_shortcode funzione.
 
Aggiorniamo / sostituiamo questa funzione con questo:
 
 function gsm_google_static_map_shortcode ($ atts, $ content = NULL) $ args = shortcode_atts (array ('center' => '41 .88, -87.63 ',' zoom '=>' 14 ',' size '=>' 400x400 ',' scale '=>' 1 ',' sensor '=>' false ',' maptype '=>' roadmap ',' format '=>' png ',' markers '=> $ atts [' center ']), $ atts); $ map_url = ''; return $ map_url;
 
Ora abbiamo un $ content argomento che possiamo usare. Ma per cosa? Beh, che ne dici di un valore per i nostri attributi del tag IMG, ALT e TITLE?
 
Il codice sopra non fa alcuna differenza per la visualizzazione della mappa stessa, ma se passi il mouse sopra la mappa, vedrai un suggerimento che mostra un'informazione utile, "Mappa di Chicago, Illinois". E se visualizzi l'origine della pagina, vedrai che gli attributi ALT e TITLE hanno lo stesso valore. Questo è utile per la SEO in quanto i robot dei motori di ricerca non sono in grado di interpretare le immagini, ma possono, e lo fanno, leggere i tag ALT e TITLE. Inoltre, se le immagini sono disabilitate o non funzionano nel browser di un utente, almeno visualizzeranno almeno una descrizione della tua mappa nel browser.
 
Puoi persino usarlo per visualizzare un'intestazione sopra la mappa controllando il contenuto $ non NULL e aggiungendolo a un tag intestazione:
 
 if ($ content! = NULL) $ map_url = '
'. $ contenuto. '
'; $ map_url. = '';
 
Shortcode per L'Avana, Cuba con titolo: [gsm_google_static_map center = "havana, cuba" zoom = "11" scala = "1" dimensione = "500x250"] L'Avana, Cuba [/ gsm_google_static_map]
  
Nota: l'API di shortcode Wordpress è molto permissiva. Puoi utilizzare i moduli di chiusura automatica o di chiusura di uno shortcode e l'API correggerà le variazioni. Vedi la documentazione.
 
 
Utilizzo di Shortcode nei file di modello
 
I codici brevi sono progettati per essere utilizzati nei post e nelle pagine, ma possono essere utilizzati nei file del modello se inseriti nel do_shortcode funzione.
 
Apri il footer.php file nella cartella dei temi del tuo sito. Aggiungi quanto segue subito dopo 
 etichetta:
 
echo do_shortcode ('[gsm_google_static_map center =' chicago, illinois 'zoom =' 8 'size =' 300x250 ']');
 
Aggiorna la tua pagina e dovresti vedere una mappa nel footer.
 
 
Limiti di utilizzo di mappe statiche
 
Dalla sezione Limiti di utilizzo dell'API di Static Maps:
 
 
"L'utilizzo dell'API di Google Static Maps è soggetto a un limite di query di 1000 richieste di immagini (diverse) uniche per spettatore al giorno. Poiché questa restrizione è una quota per spettatore, la maggior parte degli sviluppatori non dovrebbe preoccuparsi di superare la loro quota."
 
 
Inoltre, le dimensioni della mappa sono limitate a 640x640, ma utilizzando il parametro di scala impostato su 2, puoi effettivamente raddoppiare le dimensioni della mappa.
 
 
link utili
 
 
API Google Static Maps
 
Scrivere un plugin WordPress
 
Shortcode di Wordpress
 
Racchiudere contro i codici brevi auto-chiudenti
 
Wordpress do_shortcode function
 



		
			
	   
	




Codice