Share
Hva du skal skapeI denne veiledningen vil vi gå gjennom prosessen med å skape et Google-kart for en imaginær klient. Vårt kart vil inneholde tre hovedtrekk:
I dette tilfellet vil vår imaginære klient være "The Hobby Shoppe", leverandører av fine brettspill og andre hobbyapparater rundt Melbourne, Australia.
Vi får ballen til å rulle ved å lage et grunnleggende kart sentrert på byen Melbourne. Etter at vi legger til våre grenmarkører, vil vi avgrense sentrumsposisjonen til kartet, men for nå begynner vi å finne riktig breddegrad og lengdegrad for å vise byen som en helhet.
For å gjøre dette, gå til Google Maps og søk etter Melbourne, så zoom inn litt, slik at du ikke inkluderer ubefolkede områder. Når du justerer plasseringen av kartet, vil du legge merke til at URL-endringene reflekterer den nye bredde-, breddegraden og zoomnivået. Når du har plassert kartet der du vil, kopiere nettadressen et sted for senere referanse, for eksempel:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
Etter @ symbol i nettadressen vil du se kommaseparerte verdier for breddegrad, lengdegrad og zoomnivå: -37.8046274,144.972156,12z
Den første verdien -37.8046274 er breddegraden, den andre verdien 144.972156 er lengden, og 12Z verdi betyr at zoomnivået er satt til 12. Vi kommer nå til å koble disse verdiene til et grunnleggende kart.
Lag et tomt HTML-dokument og legg til følgende kode:
Med denne markeringen har vi opprettet et HTML-dokument, inkludert en div med id map-lerret som vil holde kartet vårt. Vi har også lagt til noen grunnleggende CSS til størrelse og plassere map-lerret div.
Til slutt har vi lastet det nødvendige skriptet fra Google Map API med:
og vi har opprettet en JavaScript-funksjon for å angi de grunnleggende alternativene på kartet og laste det inn i vår tomme div.
Merk: Se hvordan verdiene vi tok fra Google Maps-nettadressen tidligere, har blitt brukt i centerPos og zoomLevel variabler, som igjen brukes i mapOptions array. De centerPos variabel bruker kommaseparerte breddegrad og lengdegradverdier for -37.8046274,144.972156, og zoomLevel variabel bruker verdien av 12.
Lagre HTML-filen din og åpne den i en hvilken som helst nettleser. Ditt grunnleggende kart bør se litt ut som dette:
Det neste trinnet er å finne breddegrad og lengdegrad for hver av klientens grenklasser, slik at vi kan skape markører for dem på disse stillingene. Den enkleste måten å gjøre dette på er å finne hver grenadresse via et Google Maps-søk og ta tak i breddegrad og lengdegrad derfra.
Gå tilbake til Google Maps igjen og kjør et søk etter hver avdeling. Forutsatt at klienten har gitt deg adressene til hvert sted, kan du bare søke etter den adressen og en markør vises på kartet. Høyreklikk den markøren og velg Hva er her? fra kontekstmenyen.
En liten popup vises øverst til venstre på kartet som viser detaljer for denne markøren, inkludert breddegrad og lengdegrad:
Legg merke til breddegraden og lengdegraden for hver av filialposisjonene du vil legge til på kartet. I tilfelle av "The Hobby Shoppe" har vi syv grenlokaler, og vi legger til markører for hver ved å sette inn følgende kode rett før slutten av kartet vårt initialize () funksjon, etter map = nytt google.maps.Map ... linje:
var steder = [['First Shoppe', -37.808204, 144.855579], ['Second Shoppe', -37.675648, 145.026125], ['Third Shoppe', -37.816935, 144.966877], ['Fourth Shoppe', -37.818714, 145.036494 ], ['Fifth Shoppe', -37.793834, 144.987018], ['Sixth Shoppe', -37.737116, 144.998581], ['Seventh Shoppe', -37.765528, 144.922624]]; for (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 );
I denne koden blir vi først opprettet en rekke grensteder med navn, breddegrad og lengdegrad for hver. Vi er deretter iterating gjennom det arrayet for å legge til hvert sted som en markør til kartet, med tittelen som skal vises som et verktøytips hvis markøren svinges over.
Kartet ditt skal nå ha markører lagt til slik:
Men vent, det er noe galt med dette bildet. Vi la til syv steder, og likevel vises bare seks markører. Hvorfor?
Det er rett og slett fordi vår syvende markør bare er ute av syne basert på den opprinnelige breddegraden og lengdegraden vi satte for kartet, så vi må forfine senterposisjonen.
Nå som vi har alle våre markører på plass, kan vi finjustere startposisjonen på kartet for å sikre at de er synlige på lasten. For å gjøre det, legger vi til en knapp som vi kan klikke for å gi oss nye koordinater når vi finner den perfekte kartens startposisjon.
Legg til denne knappekoden på siden din, hvor som helst i kropp seksjon:
Nå kan du flytte kartet rundt og deretter klikke på det nye Få kartkoordinater knappen når du finner riktig sted.
Breddegrad, lengdegrad og zoomnivå på posisjonen din blir skrevet til konsollen din, så sørg for at Chrome Dev Tools eller Firebug-konsollen er åpen.
Oppdater kartet ditt senter alternativ med ny breddegrad og lengdegrad, så vel som zoom alternativ hvis det har endret seg også:
var mapOptions = senter: new google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Lagre og oppdatere kartet, og nå skal alle syv kartmarkørene være synlige. Når du er fornøyd med den raffinerte senterposisjonen, kan du fjerne Få kartkoordinater knappekode.
Nå som vi har alle markørene på plass og synlige for filialstedene, skal vi konvertere dem til et egendefinert bilde, en som går med klientens merkevarebygging og stilen på kartet. Ethvert bilde som er opprettet for bruk som kartmarkør, skal ha en gjennomsiktig bakgrunn, f.eks.
Plasser din egendefinerte markør i en "bilder" -mappe, i forhold til mappen din basekart er i, legg deretter til følgende variabel direkte under steder variabel du opprettet tidligere:
var image = 'images / shoppe_icon.png';
Deretter legger du til et ekstra valg av ikon: bilde til til sløyfe vi opprettet tidligere for å plassere kartmarkører. Ved å sende denne variabelen til kartmarkeringsgenereringsalternativene angis at du vil at markørikonene skal erstattes med ditt egendefinerte bilde:
for (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 );
Ta en titt på kartet ditt, og du bør nå se små hus på hver av de syv grenene:
Vi skal nå legge til klientens logo på en slik måte at den forblir i samme størrelse og i samme posisjon uansett hvor kartet er zoomet eller pannet til.
De eneste elementene i et Google Map som ikke beveger seg med panorering og zooming, er kontroll-UI-elementene, vanligvis brukt for ting som å engasjere gatevisning eller bytte karttyper. Vi kan imidlertid bruke den egendefinerte kontroll-API like godt til å plassere en logo på skjermen. Vi har også vår nye egendefinerte kontroll tilbakestill zoomen og senterposisjonen til kartet når du klikker så, så vel som å vise logoen som det utfører en nyttig UI-funksjon.
Begynn med å legge til klientens logo bilde i samme "bilder" -mappen du plasserte ditt egendefinerte markørbilde. Legg deretter til følgende JavaScript-funksjon like før din eksisterende initialize () funksjon:
Accentsconagua
funksjon LogoControl (controlDiv, kart) controlDiv.style.padding = '5px'; var controlUI = document.createElement ('div'); controlUI.style.backgroundImage = 'url (images / logo.png)'; controlUI.style.width = '600px'; controlUI.style.height = '116px'; controlUI.style.cursor = 'pointer'; controlUI.title = 'Klikk for å angi kartet til Hjem'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, 'klikk', funksjon () map.setCenter (centerPos) map.setZoom (zoomLevel)); Når den utføres, vil denne funksjonen opprette et kontroll-grensesnittelement 600px med 116px i størrelse, ved hjelp av logo-bildet som bakgrunn. Det vil også lage en lytter som vil tilbakestille senteret og zoome på kartet hvis logoen klikkes.
Da, på slutten av din initialize () funksjon, sett inn følgende kode:
var logoControlDiv = document.createElement ('div'); var logoControl = ny LogoControl (logoControlDiv, kart); logoControlDiv.index = 1; map.Controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);Når initialize () funksjonen kjører det vil nå ringe LogoControl () funksjonen vi nettopp har opprettet og legger dens utgang til kartkontroller.
Ditt kart burde nå se slik ut:
Hvis du vil sette opp fargene på kartet, vil du nesten sikkert bruke Googles veiviser for stiplede kart for å få rask visuell tilbakemelding på dine valg.
De Funksjonstype menyen i veiviseren gir deg en rekke kartkomponenter tilgjengelig for styling. De er organisert fra de mest generelle, ned til de mest spesifikke. På det mest generelle nivået kan du bruke fargevalg til Alle funksjonstype, for å påvirke alt på kartet like. På den andre enden av spekteret kan du bore ned så spesifikt som Alle> Transitt> Stasjon> Buss for eksempel.
Med en Funksjonstype valgt kan du også gjøre et valg fra Element type menyen for å finne ut om du vil at fargevalgene dine skal påvirke funksjonens geometri eller dets etiketter (for eksempel de små tekstetikettene du ser flytende rundt kartet). Videre kan du også velge enten fyll- eller strekkfarge for å modifisere.
Når det gjelder å velge farger, er det to hovedområder du vil jobbe med; de Farge panel og Hue panel. De Farge panelet vil bruke en fargeheksekode flatt til funksjonene og elementene du har valgt, mens Hue panelet vil tynne utvalget ditt med en rekke lysstyrke og mørke påvirket av hvert elements opprinnelige farge.
Som en generell regel bør du begynne med å bruke en Hue til de mest generelle nivåene på kartet ditt, slik at du har litt ensartethet i fargeskjemaet ditt - du kan sammenligne dette med et grunnlag av maling. Derfra kan du så bore ned til "male" over toppen med flat Farge innstillinger for mer spesifikke funksjoner og elementer.
Start med å søke i veiviseren for "Melbourne" og deretter plassere forhåndsvisningskartet for å vise deg omtrent det samme området du angir ditt eget kart for å vise.
Under Funksjonstype menyen i veiviseren velg Alle, og under Element type menyvalg Geometry. Sjekk deretter Hue boksen og klikk på fargelinjen til du får en verdi av et sted rundt # ffa200. Av en eller annen grunn kan du ikke direkte angi en verdi i dette feltet, så du må få det så nært som mulig ved å klikke. Sjekk deretter Inverter letthet boks, aktivere metning sette inn og dra den til 35, aktivere letthet sette inn og plasser den på 50, og aktiver gamma sette inn og få det så nært som mulig 1.3.
Disse innstillingene burde ha tonet hele kartet slik:
Kartet ditt ser litt morsomt ut på dette stadiet fordi vi tar sikte på å lage et fargerikt kart, slik at tintinnstillingene her har blitt forsterket for å sikre at det ikke er noen drabsområder hvor som helst. De altfor lyse områdene vil bli tilsidesatt med mer dype farger i etterfølgende trinn.
Nå som du har brukt din første stil, klikker du på Legg til knappen i øverste høyre hjørne av Kartstil panelet, (plassert på høyre side av kartveiviseren). Ved å klikke på denne knappen opprettes en annen stil som heter "Stil 1", der du kan velge forskjellige elementer og bruke nye stilarter.
Med "Style 1" valgt i Kartstil panel og Alle fremdeles valgt under Funksjonstype Klikk på etiketter alternativ i den andre listen over Element type Meny. Undersøk Hue boksen og igjen sett den til en verdi av # ffa200 så etikettene dine er farget i stedet for å være lyse blå eller grønne som du ser på bildet ovenfor.
Klikk på Legg til knappen på Kartstil panel for å lage en annen ny stil, og klikk deretter Vann i den andre listen over Funksjonstype Meny. Under Element type menyvalg Geometry. Undersøk Farge boksen og skriv inn en fargeheksekode av # 8F9B98.
Du bør nå vite hvordan du lager nye stiler, ved å velge Funksjonstype og Element type menyelementer. Gå videre og legg til resten av disse stilene en om gangen i den guiderte kartveiviseren:
Når du har lagt til alle disse stilene, er du klar til å eksportere innstillingene veiviseren har opprettet og legg dem til i kartet. På Kartstil panelet klikker på Vis JSON knappen nederst. Du får se et hvitt vindu som vises, og viser en rekke JavaScript-alternativer.
Kopier all teksten fra vinduet mellom åpningen [ og lukking ], dvs. alt annet enn hovedoverskriften.
I begynnelsen av din initialize () funksjon legg til denne nye linjen:
var styles =;
Plasser markøren før ; og lim deretter inn koden du kopierte fra veiviseren med stilt kart. Du bør ende opp med:
var styles = invert_lightness: true, "lightness": 50, "metatur": "geometri", "stylers": ["nyanse" 35, "gamma": 1.31], "elementType": "etiketter", "stylere": ["nyanse": "# ffa200"], "featureType" elementType ":" geometri "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," stylers " f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" farge ":" # 6a5035 "], " featureType ":" landscape.natural "," elementType "" geometri "," stylers ": [" color ":" # 9c9743 "], " featureType ":" landscape.man_made "," elementType ":" geometri "," stylers " farge ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometri "," stylers ": [" color ":" # ACA74C "], " featureType " : "road", "elementType": "geometry.fill", "stylers": ["color": "# d3b681"], "featureType": "road", "elementType": "geometry.stroke "," stylers ": [" color ":" # 644F34 "], " featureType ":" road.arterial "," elementType ":" geometry.fill "," stylers ": [" farge ":" # c6a15e "], " featureType ":" road.local "," elementType " : "geometry.fill", "stylers": ["color": "# b09061"], "featureType": "transit.line", "elementType": "geometri" "color": "# 876b48"], "featureType": "transit.station", "elementType": "geometri", "stylers": ["color": "# a58557"]];
Så i slutten av initialize () funksjon legg til disse tre linjene:
var styledMap = new google.maps.StyledMapType (stiler, navn: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId ( 'map_style');Disse kodelinjene gjelder alle fargevalgsdataene du nettopp har trukket inn fra den stiplede kartveiviseren til kartet ditt. Ta en ny titt, og det skal nå vises med alle dine stylingvalg på plass:
Sjekk ut live demoen, slik at du kan se kartet med riktig størrelse og leke med zooming og panorering her.
Som en endelig berøring kan du også legge til en rammeeffekt rundt kartet for å komplimentere stylingen ytterligere. Erstatt eksisterende # kart-lerret ... CSS i filen din med dette:
# kart-lerret høyde: 90%; grense: 5px solid # 33210f; -moz-boks-skygge: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-boks-skygge: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; boksskygge: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Som du kan se, er det ganske mye du kan gjøre med Google Maps utover bare enkel innlemming. I denne opplæringen har vi fremdeles bare utforsket et par aspekter av Google Maps API - du kan lese mer om alle de andre funksjonene som tilbys av API-en i Google Map-hjelpedokumenter.
Hvis du vil ta denne opplæringen enda lenger, kan du også prøve å legge til dine egne tilpassede stilzoom og panekontroller (tilpassede kontrolldokumenter), og opprette info-vinduer som dukker opp når markører klikkes. Disse popupene kan inneholde detaljer som telefonnummer og gateadresse (info windows docs).
Gi disse teknikkene en prøve neste gang en klient spør deg om å inkludere et Google Map på deres nettsted. Du kan bare få en bonus!
