Creați un plugin Google Maps static

În acest tutorial, veți afla cum să creați un plugin care folosește API-ul Static Maps al Google pentru a afișa o hartă. Vom analiza, de asemenea, diferențele dintre codurile scurte închise și cele necompletate.

Google Maps Static API

Google oferă două versiuni ale API-ului Maps pentru dezvoltatori: dinamic, care necesită JavaScript și static, care returnează pur și simplu o imagine și nu necesită JavaScript.

Hărțile dinamice vă permit să măriți și să orientați harta, precum și să manipulați programatic harta ca răspuns la evenimentele generate de utilizatori. Toate acestea sunt minunate, dar dacă pur și simplu trebuie să renunțați la o imagine de bază a hărții pe pagina dvs., sunteți mult mai bine să utilizați API-ul hărților statice.

Avantajele API-ului Static Maps

• Nu este necesar să aveți activat JavaScript
• Reducerea cererilor către server
• Nu este nevoie să scrieți niciun JavaScript
• Răspunsul hărților statice este foarte rapid

Tot ce trebuie este o adresă URL

Adresa URL de bază pentru o hartă statică este: http://maps.googleapis.com/maps/api/staticmap? plus câțiva parametri.

Iată un url live pentru Chicago, Illinois folosind parametrii necesari: centru, dimensiune, zoom și senzor:

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

Aceasta este ceea ce ar trebui să vedeți în browserul dvs.:

Curată și rapidă!

Pluginul nostru va lua argumentele de la un scurtcod, le vom adăuga la urlul de bază și vom returna adresa URL completă a postărilor și paginilor noastre.

Vom folosi următorii parametri:

• centru (obligatoriu) - locația centrului hărții fie ca text, fie ca o latitudine, pereche de longitudine, de exemplu: "chicago, illinois" sau "41 .88, -87.63"
• (necesar) - dimensiunea imaginii de hartă în pixeli, lățimea x înălțimea, de exemplu: "400x350"
• zoom (necesar) - nivelul de mărire (mărire), 0 (întreaga lume) până la 21 (cel mai detaliat)
• senzor (necesar) - adevărat sau fals, consultați explicația parametrilor senzorilor
• maptype (opțional) - tipul de hartă: foaie de parcurs, satelit, teren, hibrid, consultați explicația parametrilor hărților
• scalare (opțional) - scalare pentru utilizare desktop sau mobil, vezi explicația parametrului de scală
• format (opțional) - formatul de imagine necesar, png, jpg, gif și altele, consultați explicația parametrilor de formatare
• marcatori (opțional) - vom folosi un marcator simplu pentru a afișa centrul hărții noastre

S-o facem.

Pasul 1 Configurați pluginul

Dosarul plugin WordPress este localizat în folderul de instalare WordPress la wp-content / plugins

Creați un dosar în interiorul dosarului de pluginuri. Să spunem asta google-static-hartă

Acum, creați fișierul plugin-ului însuși. Să spunem asta google_static_map.php

Calea către fișierul pluginului trebuie să fie acum: wp-content / plugins / google-static-harta / google_static_map.php

Fiecare plugin Wordpress are nevoie de câteva informații antet, astfel încât WordPress să o poată identifica și să o pună la dispoziție pe pagina de plugin a tabloului de bord. Plasați acest cod în partea de sus a fișierului dvs. de plugin și salvați-l.

  
Puteți edita aceste informații conform cerințelor dvs..
 
Acum, mergeți la tabloul de bord WordPress și selectați meniul Pluginuri. Veți vedea pluginul afișat astfel:
  
Nu-l activa încă.
 
 
 Pasul 2 Setarea de coduri scurte
 
Codurile scurte Wordpress vă permit să plasați ieșirea pluginului în mesajele și paginile dvs..
 
Codul scurt
 
Codul scurt WordPress va fi folosit în postări și pagini de genul: [gsm_google_static_map center = 'chicago, zoom illinois =' 10 'size =' 400x350 ']
 
Pentru că folosim un shortcode, trebuie să-i spunem lui WordPress despre asta. Pentru a face acest lucru vom folosi funcția WordPress add_shortcode.
 
Plasați următorul cod în fișierul plugin:
 
 add_shortcode ('gsm_google_static_map', 'gsm_google_static_map_shortcode');
 
Primul parametru gsm_google_static_map definește numele codului scurt pe care îl vom folosi în postările și paginile noastre. Al doilea parametru gsm_google_static_map_shortcode este numele funcției care este numită de codul scurt.
 
Funcțiile shortcut și plugin sunt prefixate cu GSM (harta statică google) pentru a evita orice coliziuni de nume posibile cu orice alte funcții pe care le poate utiliza WordPress. Șansele sunt slabe că WordPress sau orice plugin va avea o funcție numită google_static_map dar plătește să o joci în siguranță.
 
 Pasul 3 Funcția Shortcode
 
Iată funcția numită de gsm_google_static_map. Plasați următorul cod în fișierul plugin:
 
 gsm_google_static_map_shortcode ($ atts) $ args = shortcode_atts (array ('center' => '41 .88, -87.63 ',' zoom '=>' 14 ',' size '=>' 400x400 ' 1 ',' sensor '=>' false ',' maptype '=>' roadmap ',' format '=>' png ',' markers '=> $ atts [' center ']), $ atts); $ map_url = ' $ valoare) $ map_url. = $ arg. '='. cod urlen (valoare $). '&';  $ map_url. = '' /> ';
 
Trucul cu acest lucru este să vă asigurați că este furnizat $ args nume de elemente (centru, zoom, etc.) sunt exact identice cu numele parametrilor așteptați în solicitarea Hărților Google.
 
Folosim urlencode pe valorile pentru a vă asigura că orice caractere non-standard sunt convertite în siguranță. De exemplu, spațiile sunt convertite în caracterul +.
 
 
 Pasul 4 Test
 
Activați plugin-ul în pagina Plugin.
 
Adăugați acest cod scurt la o postare sau o pagină:
 
[gsm_google_static_map center = 'sydney, australia' zoom = '10' size = '600x350']
 
Ar trebui să vedeți această hartă:
  
Redați-vă cu atributele scurte pentru a vedea diferite hărți. Poate că aceasta:
 
[gsm_google_static_map center = 'auckland, nz' mărime = '6' size = '600x350' maptype = 'teren']
  
 Pasul 5 Un plug mai bun
 
Valoarea adăugată: Introducerea codurilor scurte
 
Formularul de cod scurt pe care l-am utilizat mai sus este cunoscut sub numele de cod scurt. Aceasta înseamnă că numele de cod scurt și atributele sale sunt cuprinse între o pereche de paranteze pătrate.
 
[gsm_google_static_map center = 'chicago, zoom illinois =' 10 'size =' 400x350 ']
 
Dar există o variantă pe acest formular cunoscut sub numele de coduri scurte.
 
[gsm_google_static_map center = 'chicago, illinois' zoom = '10'] Harta Chicago, Illinois [/ gsm_google_static_map]
 
Textul "Harta din Chicago, Illinois" este închis de etichetele de deschidere și de închidere ale codului scurt. Acesta este numit "conținutul" și îl putem folosi în avantajul nostru.
 
SEO mai bun și un Fallback
 
API-ul shortcode ne permite să luăm conținutul ca al doilea parametru pentru funcția shortcode, în cazul nostru gsm_google_static_map_shortcode funcţie.
 
Să actualizăm / înlocuim această funcție cu aceasta:
 
 gsm_google_static_map_shortcode ($ atts, $ content = NULL) $ args = shortcode_atts (array = 'center' => '41 .88, -87.63 ',' zoom '=>' 400 ' scară '=>' 1 ',' senzor '=>' false ',' maptype '=>' roadmap ',' format ' atts); $ map_url = ' 
Puteți chiar să o utilizați pentru a afișa o rubrică deasupra hărții, verificând pentru conținutul $ nu NULL și adăugându-l la un titlu:
 
 dacă ($ content! = NULL) $ map_url = '
". $ conținut. '
„; $ map_url. = '
  
Notă: API-ul Wordpress shortcode este foarte iertător. Puteți utiliza formularele de auto-închidere sau închidere ale unui scurtcod și API-ul va corecta pentru variații. Consultați documentația.
 
 
Utilizarea codurilor scurte în fișierele de șabloane
 
Codurile scurte sunt concepute pentru a fi utilizate în mesaje și pagini, dar pot fi utilizate în fișierele șablon dacă sunt împachetate în do_shortcode funcţie.
 
Deschide footer.php fișier în dosarul temei site-ului dvs. Adăugați următoarele imediat după 
 etichetă:
 
echo do_shortcode ('[gsm_google_static_map center =' chicago, zoom ilinois = '8' size = '300x250'] ');
 
Actualizați-vă pagina și ar trebui să vedeți o hartă în subsolul paginii.
 
 
Limitele de utilizare a hărților statice
 
Din secțiunea Limite de utilizare API pentru hărți statice:
 
 
"Utilizarea API-ului Google Maps Static este supusă unei limite de interogare de 1000 de solicitări de imagini unice pe un vizualizator pe zi. Deoarece această restricție este o cotă per vizualizator, majoritatea dezvoltatorilor nu ar trebui să-și facă griji pentru depășirea cotei."
 
 
De asemenea, dimensiunile hărților sunt limitate la 640x640, dar prin utilizarea parametrului de scară setat la 2, puteți dubla efectiv dimensiunea hărții.
 
 
Link-uri utile
 
 
Google Maps API Static
 
Scrierea unui plug-in WordPress
 
Wordpress Shortcodes
 
Închidere față de codurile scurte de auto-închidere
 
Funcția Wordpress do_shortcode
 



		
			
	   
	




Cod