Share
Ce veți creaÎn acest tutorial vom trece prin procesul de creare a unei hărți Google de marcă pentru un client imaginar. Harta noastră va cuprinde trei caracteristici cheie:
În acest caz, clientul nostru imaginar va fi "The Hobby Shoppe", furnizori de jocuri de bord și alte hobby-uri în jurul orașului Melbourne, Australia.
Vom face rost de minge, creând o hartă de bază centrat pe orașul Melbourne. După ce adăugăm marcatorii de ramură, vom rafina poziția centrală a hărții, dar pentru moment vom începe prin a găsi latitudinea și longitudinea potrivită pentru a arăta orașul ca un întreg.
Pentru a face acest lucru mergeți la Google Maps și căutați Melbourne, apoi măriți puțin, astfel încât să nu includeți zonele nepopulate. Pe măsură ce ajustați poziția hărții, veți observa că modificările adresei URL reflectă noua dvs. latitudine, longitudine și nivel de zoom. Când aveți harta poziționată unde doriți, copiați adresa URL undeva pentru o referință ulterioară, de exemplu:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
După @ simbol în URL veți vedea valori separate prin virgulă pentru latitudine, longitudine și nivel de zoom: -37.8046274,144.972156,12z
Prima valoare -37.8046274 este latitudinea, a doua valoare 144.972156 este longitudinea și 12z înseamnă că nivelul de zoom este setat la 12. Acum vom conecta aceste valori într-o hartă de bază.
Creați un document HTML gol și adăugați următorul cod:
Cu acest marcaj am creat un document HTML care include un div cu id-ul harta-panza care va ține harta noastră. Am adăugat, de asemenea, câteva CSS de bază pentru a dimensiona și poziționa harta-panza div.
În sfârșit, am încărcat scriptul necesar din API-ul Google Map cu:
și am creat o funcție JavaScript pentru a seta opțiunile de bază ale hărții și a le încărca în div div.
Notă: vedeți cum au fost folosite valorile pe care le-am luat de la adresa URL a Hărților Google în trecut centerPos și zoomLevel variabile, care sunt, la rândul lor, utilizate în mapOptions matrice. centerPos variabila utilizează valorile latitudinii și longitudinilor separate prin virgulă -37.8046274,144.972156, si zoomLevel variabila utilizează valoarea 12.
Salvați fișierul HTML și deschideți-l în orice browser. Harta de bază ar trebui să arate cam așa:
Următorul pas este să găsim latitudinea și longitudinea pentru fiecare locație a sucursalelor clientului, astfel încât să putem crea markeri pentru acele poziții. Cea mai ușoară modalitate de a face acest lucru este găsirea fiecărei adrese a unei filiale prin intermediul unei căutări Google Maps și luarea latitudinii și longitudinii de acolo.
Reveniți din nou în Hărți Google și executați o căutare pentru fiecare locație a sucursalei. Presupunând că clientul ți-a dat adresele fiecărei locații, poți pur și simplu să căutați adresa respectivă și un marcator va apărea pe hartă. Faceți clic dreapta pe acest marcator și alegeți Ce e aici? din meniul contextual.
În partea din stânga sus a hărții va apărea un pop-up mic care afișează detalii pentru acest marcator, inclusiv latitudine și longitudine:
Notați latitudinea și longitudinea fiecărei locații de sucursală pe care doriți să o adăugați pe hartă. În cazul "The Hobby Shoppe" avem șapte locații de sucursale și vom adăuga markeri pentru fiecare inserând următorul cod chiar înainte de sfârșitul hărții noastre inițializa () funcție, după map = nou google.maps.Map ... linia:
var locații = [['First Shoppe', -37.808204, 144.855579], ['Second Shoppe', -37.675648, 145.026125], ['Third Shoppe', -37.816935, 144.966877] ], ['Fifth Shoppe', -37.793834, 144.987018], ['Sixth Shoppe', -37.737116, 144.998581], ['Seventh Shoppe', -37.765528, 144.922624]]; pentru (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map );
În acest cod creăm mai întâi o serie de locații ale sucursalelor cu numele, latitudinea și longitudinea fiecăruia. Apoi, iterăm prin acea matrice pentru a adăuga fiecare locație ca pe un marker pe hartă, cu titlul care va fi afișat ca sfat de sculă dacă marcatorul este plutind.
Hărțile dvs. ar trebui să includă marcatori după cum urmează:
Dar așteptați, ceva în neregulă cu această imagine. Am adăugat șapte locații și totuși apar doar șase markere. De ce?
Este doar pentru că cel de-al șaptelea marker este doar în afara vederii bazat pe latitudinea și longitudinea inițială pe care am stabilit-o pentru hartă, așa că trebuie să perfecționăm poziția centrală.
Acum, când avem toate markerele noastre, putem rafina poziția de pornire a hărții pentru a ne asigura că sunt toate vizibile la încărcare. Pentru a face acest lucru, vom adăuga un buton pe care îl putem da clic pentru a ne da noi coordonate odată ce găsim poziția de plecare perfectă a hărții.
Adăugați acest cod de buton în pagina dvs., oriunde în corp secțiune:
Acum puteți muta harta în jurul dvs. și apoi faceți clic pe noul Obțineți co-orade de hartă atunci când găsiți locul potrivit.
Lățimea, longitudinea și nivelul de mărire al poziției dvs. vor fi scrise în consolă, deci asigurați-vă că aveți deschise consola Chrome Dev Tools sau Firebug.
Actualizați hărțile centru opțiune cu noua latitudine și longitudine, precum și zoom opțiune dacă s-a schimbat și ea:
var mapOptions = centru: nou google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Salvați și actualizați hărțile și acum toate cele șapte marcatori de hartă ar trebui să fie vizibile. Când sunteți mulțumit de poziția centrală rafinată, puteți să o eliminați Obțineți co-orade de hartă codul butonului.
Acum, că avem toate marcatorii în loc și vizibile pentru locațiile ramurii, le vom transforma într-o imagine personalizată, una care se potrivește cu branding-ul clientului și cu stilul hărții. Orice imagine creată pentru a fi utilizată ca marcator de hartă ar trebui să aibă un fundal transparent, de ex.
Plasați marcaje personalizate într-un dosar "imagini", în raport cu dosarul în care se află harta de bază, apoi adăugați următoarea variabilă direct sub locații variabilă pe care ați creat-o anterior:
var imagine = 'images / shoppe_icon.png';
Apoi adăugați o opțiune suplimentară de pictogramă: imagine la pentru care am creat mai devreme pentru a plasa marcajele de hartă. Dacă treceți această variabilă în opțiunile de generare a marcajului de hartă, specificați că doriți să înlocuiți pictogramele de marcator cu imaginea personalizată:
pentru (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map, icon: image );
Luați o altă privire la harta dvs. și ar trebui să vedeți acum case mici la fiecare dintre cele șapte locații ale sucursalelor:
Vom adăuga acum sigla clientului astfel încât acesta să rămână la aceeași dimensiune și în aceeași poziție, indiferent de locul în care harta este mărite sau panificată.
Singurele elemente ale unei hărți Google care nu se mișcă prin panoramare și zoom sunt elementele UI de control, utilizate în mod obișnuit pentru lucruri cum ar fi implicarea vizualizării stradale sau comutarea tipurilor de hărți. Cu toate acestea, putem folosi API de control personalizat la fel de bine pentru a plasa pe ecran o siglă. De asemenea, vom avea noul nostru control personalizat pentru a reseta zoom-ul și poziția centrală a hărții atunci când se face clic, precum și afișarea logo-ului pe care îl efectuează o funcție UI utilă.
Începeți prin adăugarea imaginii logo-ului clientului în același director "imagini" pe care l-ați plasat imaginea marcajului personalizat. Apoi adăugați următoarea funcție JavaScript chiar înainte de existența dvs. inițializa () funcţie:
Accentsconagua
funcția LogoControl (controlDiv, hartă) controlDiv.style.padding = '5px'; var controlUI = document.createElement ('div'); controlUI.style.backgroundImage = 'url (imagini / logo.png)'; controlUI.style.width = '600px'; controlUI.style.height = '116px'; controlUI.style.cursor = 'pointer'; controlUI.title = 'Faceți clic pentru a seta harta la Home'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, "clic", functie () map.setCenter (centerPos) map.setZoom (zoomLevel)); Când este executat, această funcție va crea un element UI de control cu o dimensiune de 600 x 116 pixeli, utilizând imaginea logo-ului drept fundal. Acesta va crea, de asemenea, un ascultător care va reseta centrul și zoom-ul hărții în cazul în care se face clic pe logo-ul.
Apoi, la sfârșitul tău inițializa () funcția, introduceți următorul cod:
var logoControlDiv = document.createElement ("div"); var logoControl = nou LogoControl (logoControlDiv, harta); logoControlDiv.index = 1; map.controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);Cand inițializa () funcția rulează, va apela acum LogoControl () funcția pe care tocmai am creat-o și adăugăm ieșirea acesteia în controalele de hartă.
Hărțile ar trebui să arate astfel:
Pentru a configura culorile hărții dvs., veți dori cu siguranță să utilizați Expertul hărților Google Styled Map pentru a obține un feedback vizual rapid cu privire la alegerile dvs..
Tipul de funcție din vrăjitor vă oferă o gamă de componente de hartă disponibile pentru stil. Acestea sunt organizate de la cele mai generale, până la cele mai specifice. La cel mai general nivel, puteți aplica opțiunile de culoare la Toate pentru a afecta totul pe hartă în mod egal. În celălalt capăt al spectrului, puteți să căutați în mod specific Toate> Tranzit> Stație> Autobuz de exemplu.
Cu Tipul de funcție selectat puteți apoi, de asemenea, o selecție de la Tipul elementului pentru a determina dacă doriți ca opțiunile de culoare să influențeze geometria sau etichetele acesteia (cum ar fi etichetele de text pe care le vedeți plutesc în jurul hărții). Mai mult, puteți selecta, de asemenea, fie culoarea de umplere, fie cursa pentru modificarea acesteia.
Când vine vorba de alegerea culorilor, există două domenii principale cu care veți dori să lucrați; Culoare panou și Nuanţă panou. Culoare panoul va aplica un hexacol color în mod clar la caracteristicile și elementele pe care le - ați selectat, în timp ce Nuanţă panoul va tenta selecția cu o gamă de luminozitate și întuneric influențate de culoarea originală a fiecărui element.
Ca regulă generală, ar trebui să începeți prin aplicarea a Nuanţă la cele mai generale niveluri ale hărții, astfel încât să aveți o oarecare uniformitate în schema de culori - ați putea compara acest lucru cu un strat de bază de vopsea. De acolo, puteți să vă sculpați în jos pentru a "picta" peste partea de sus cu plat Culoare setări pentru caracteristici și elemente mai specifice.
Începeți prin a căuta în expertul pentru "Melbourne" și apoi poziționați harta de previzualizare pentru a vă afișa aproximativ aceeași zonă pe care ați setat harta.
Sub Tipul de funcție din meniul selectat Toate, și sub Tipul elementului selectați meniul Geometrie. Apoi verificați Nuanţă și faceți clic pe bara de culoare până când obțineți o valoare de undeva în jur # ffa200. Din anumite motive, nu puteți introduce direct o valoare în acest câmp, deci trebuie să o obțineți cât mai aproape de dvs., făcând clic. Apoi verificați Inversați ușurința caseta, activați Saturare setați și trageți la 35, activați lumină setați-l și plasați-l la 50, și activați Gamma setarea și obțineți cât mai aproape posibil 1.3.
Aceste setări ar fi trebuit să vă vopsise întreaga hartă așa:
Harta dvs. pare a fi puțin amuzantă în această etapă, pentru că vrem să facem o hartă colorată, astfel încât setările de nuanțe de aici au fost ample, pentru a ne asigura că nu există zone libere oriunde. Zonele excesiv de luminoase vor fi suprascrise cu culori mai subtile in etapele ulterioare.
Acum că ați aplicat primul dvs. stil, faceți clic pe Adăuga butonul din colțul din dreapta sus al paginii Stilul hărților panou, (situat în partea dreaptă a expertului hărții). Dacă faceți clic pe acest buton, veți crea un al doilea stil numit "Stil 1", în care puteți selecta diferite elemente și puteți aplica noi stiluri.
Cu "Stil 1" selectat în Stilul hărților panou și Toate încă selectate sub Tipul de funcție apasă pe etichete opțiunea din a doua listă a Tipul elementului meniul. Verifică Nuanţă caseta și din nou setați-o la o valoare de # ffa200 astfel încât etichetele dvs. sunt toate colorate în loc să fie strălucitoare albastru sau verde așa cum vedeți în imaginea de mai sus.
Apasă pe Adăuga pe butonul " Stilul hărților panou pentru a crea un alt stil nou, apoi faceți clic pe Apă în a doua listă a Tipul de funcție meniul. Sub Tipul elementului selectați meniul Geometrie. Verifică Culoare și introduceți un hexcode de culoare din # 8F9B98.
Acum ar trebui să știți cum să creați stiluri noi, selectând Tipul de funcție și Tipul elementului elemente de meniu. Mergeți mai departe și adăugați restul acestor stiluri câte unul câte unul în asistentul de hartă a stilului:
Odată ce ați adăugat toate aceste stiluri, sunteți gata să exportați setările pe care expertul le-a creat și să le adăugați în hartă. Pe Stilul hărților faceți clic pe panou Afișați JSON butonul din partea de jos. Veți vedea o fereastră albă care va afișa o serie de opțiuni JavaScript.
Copiați tot textul din acea fereastră între deschidere [ și închiderea ], adică tot, cu excepția poziției principale.
La începutul tău inițializa () adăugați această nouă linie:
var stiles =;
Poziționați cursorul înainte de ; apoi lipiți în codul pe care l-ați copiat din expertul de hartă a stilului. Ar trebui să ajungeți la:
var stiluri = ["elementType": "geometrie", "stylers": "hue": "# ffa200", "invert_lightness" 35, "gamma": 1.31], "elementType": "etichete", "stylers" elementType ":" geometry "," stylers ": [" color ":" # 8F9B98 " f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" color ":" # 6a5035 "], " featureType " ":" geometrie "," stylers ": [" color ":" # 9c9743 "] color ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometry "," stylers " : "road", "elementType": "geometry.fill", "stylers": ["color": "# d3b681"], "featureType" "," stylers ": [" color ":" # 644F34 "], " caracteristică ":" road.arterial "," elementType ":" geometry.fill "," stylers ": [" color " : "geometry.fill", "stylers": ["color": "# b09061"], "featureType" "color": "# 876b48"], "featureType": "transit.station", "elementType": "geometria", "stylers": [# a58557]];
Apoi, la sfârșitul anului inițializa () adăugați aceste trei linii:
var styledMap = nou google.maps.StyledMapType (stiluri, name: "Harta Styled"); map.mapTypes.set ('map_style', stilMap); map.setMapTypeId ( 'map_style');Aceste linii de cod aplică toate datele din schema de culori pe care tocmai le-ați tras din expertul de hartă pe hartă. Luați o altă privire și ar trebui să apară acum cu toate selecțiile dvs. de stil în loc:
Check out demo-ul live, pentru a putea vedea harta la dimensiunea potrivită și pentru a juca cu zoom și panning aici.
Ca o atingere finală, ați putea dori, de asemenea, să adăugați un efect de cadru în jurul hărții dvs., pentru a completa stilul. Înlocuiți existența # map-canvas ... CSS în fișierul dvs. cu aceasta:
# map-canvas înălțime: 90%; frontieră: 5px solid # 33210f; -moz-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
După cum puteți vedea, există multe lucruri pe care le puteți face cu Google Maps dincolo de integrarea de bază. În acest tutorial am explorat doar câteva aspecte ale API-ului Google Maps - puteți citi mai multe despre toate celelalte funcții oferite de API în doc-urile de ajutor Google Map.
Dacă doriți să utilizați mai departe acest tutorial, puteți încerca să adăugați și propriile comenzi zoom și pan (personalizate), precum și crearea ferestrelor de informații care apar atunci când sunt făcute clic pe marcaje. Aceste ferestre pop-up pot conține detalii precum numărul de telefon și adresa stradală (info windows docs).
Dați aceste tehnici o încercare data viitoare când un client vă va solicita să includeți o hartă Google pe site-ul lor. S-ar putea să obțineți doar un bonus!
