Share
Du har designet et skinnende nytt nettsted; nøye velge farger, typografi og fotografier for å gjenspeile selskapets merkevarebygging. Da ber kunden deg om å legge til et kart. Visst, du kan bruke en kartbygger "veiviser", som den som følger med hver google-konto. Men, la oss innse det, deres funksjonalitet er begrenset og de ser ganske generisk ut!
Google Maps API, derimot, gir deg friheten til å lage helt tilpassede kart, som kan gjøre alle slags kule ting. Portsmouth History Map er et nettsted jeg nylig bygget med denne APIen.
Denne serien av opplæringsprogrammer viser deg hvordan du lager tilpassede kart ved hjelp av Google Maps API. Det vil innebære å få hendene skitne med litt JavaScript, men det vil være verdt det.
Opplæringen vil dekke alle slags ting. For å nevne noen få: tilpassede kartfarger, menyer og markører; bringe ditt eget kartdesign (for eksempel et håndrapportert kart) til livs ved å legge det over på et zoombart google kart; kobler opp til Flickr API; bildeoptimalisering; responsiv utforming; kodeoptimalisering og validering. Eller med andre ord, når du er ferdig, vil du ikke bare kunne lage flotte kart, du har også sett på mange ting som er relevante for å bygge et nettsted.
Disse veiledningene bruker scenariet til et britisk selskap som markedsfører musikkfestivaler. Produktet "Endelig produkt" ovenfor viser hva slags ting vi sikter på. Ta en titt på demoen.
Merk: Bare Glastonbury-merket er "aktivt" i dette eksemplet.
Før du starter, kan du kanskje laste ned filene som er tilknyttet denne opplæringen. Jeg har tatt med en separat html-fil for hver aktivitet.
Et API, eller Application Programming Interface, er en fancy måte å si et sett med kommandoer (for eksempel funksjoner) et selskap (for eksempel Facebook, Twitter, You Tube, Google) publiserer. Tanken er at du kan bruke disse kommandoene til å lage en svært tilpasset versjon av innholdet. For eksempel, når det gjelder Google Maps API, er innholdet kartene, mens i tilfelle av Flickr API er innholdet bildene.
Når folk snakker om "mash-ups", mener de at de har brukt API for to eller flere bedrifter for å kombinere innhold, for eksempel å lage bilder fra Flickr vises på et Google-kart. Det er bokstavelig talt tusenvis av disse APIene rundt; ta en titt på Programmerbar Web for mer info.
Vi vil se på Flickr API i en senere opplæring, men til å begynne med vil vi være fokusert på Google Maps API. Dette lar deg gjøre alle slags ting, inkludert å tilpasse fargene, kartmarkørene, popup-boksestilen, detaljnivået og zoomnivået. For ikke å nevne å faktisk gjøre kartet gjøre noen kule ting, som for eksempel visning av live data, gruppering markører, planleggingsruter, tegning tilpassede overlegg, dynamisk avslørende data ... listen er uendelig!
Med risiko for å påpeke det åpenbare, for å komme i gang trenger du en Google-konto. Hvis du for øyeblikket ikke har en, går du over til Google og registrerer deg.
Bevæpnet med Google-kontoen din, kan du nå gå inn på Google Maps API-sider. Bokmerk denne siden; du blir veldig kjent med det. Hovedområdene er:-
Før du går videre, trenger du også en API-nøkkel (en lang rekke bokstaver og tall, unikt for deg). Få din API-nøkkel her.
OK, du er klar til å begynne å bygge.
For å gjøre det oppgitte kartarbeidet, erstatt hvor det står "YOUR_API_KEY_GOES_HERE" med din egen API-nøkkel. Kartet ditt skal ligne kartet som vist ovenfor.
Den grunnleggende prinsippet i koden er at den skaper en div (kalles festival-kartet) der JavaScript laster kartet. Jeg har lagt til kommentarer i koden for å forklare hvordan det fungerer, men det er verdt å markere hovedbiter.
Koden først erklærer søknaden din som HTML5 ved hjelp av Doctype-deklarasjonen .
Det setter deretter opp styling for kartet; biter mellom tags. Du kan tilpasse stylingen på # Festival-kartet ID avhengig av hvor du vil sette kartet. Hvis du vil ha et "fullskjerm" -kart, må du sette bredden og høyden til 100 prosent og fjerne margene.
Så hopper du over JavaScript for et øyeblikk, og koden mellom kroppskodene setter opp et tomt HTML-objekt, det vil si en div (divfestival-kartet) for å holde kartet. Dette fungerer som en slags "plassholder", der JavaScript laster kartet.
OK - nå ser du på JavaScript - koden kobles først til Google Maps API-nøkkelen.
Den lanserer deretter inn i JavaScript som lager kartet. Rask påminnelse: JavaScript-funksjoner (f.eks. loadFestivalMap) er et sett med kommandoer som bare kjører når de kalles av en annen kode. Dette kan se komplisert ut, men det er faktisk bare å gjøre noen ting -
Accentsconagua
festivalMapOptions) på kartet (for eksempel breddegrad og lengdegrad, zoomnivåer osv.) er angitt, og en tom JavaScript-variabel (festivalMap) opprettes som kartet vil bli tildelt til kort tid. (Tips: itouchmap er et praktisk nettsted for å lete etter breddegrad og lengdegradskoordinater for alle steder.)loadFestivalMap funksjonen utløses for å kjøre av denne linjen:google.maps.event.addDomListener (vindu, 'last', loadFestivalMap); festivalMap). Når du gjør dette, gjelder det også konfigurasjonsalternativene og laster kartet inn i festival-kartet div opprettet for å holde den.loadMapMarkers funksjonen utløses til kjøring av siste linje i loadFestivalMap funksjon.Hvis dette ikke gir mening, må du lese gjennom kommentarene i den fullstendige versjonen av koden som de forklarer det videre.
Nå skal du ha et kart oppe, og med hell har du ikke vært for forvirret av JavaScript! Forutsatt at alt er bra, kan vi begynne å gjøre kartet ser litt mer interessant ut.
Det er enkelt å bruke dine egne bilder som kartmarkører. På samme måte som hvordan du angir egenskapsalternativer for selve kartet (f.eks. senter, zoom etc. som vi gjorde over), kan du også endre egenskapene til kartmarkørene. For å bruke et annet bilde som kartmarkøren, må du bare stille inn ikon egenskapen til kartmarkørene dine. (Hvis du er interessert, viser Google Maps API-markør-delen alle kartmarkøregenskapene, metodene og hendelsene du kan bruke).
Vanligvis er kartmarkørene .pngs fordi de tillater deg å ha en uregelmessig form med gjennomsiktig bakgrunn.
Vi må også sette det "klikkbare" området for hver markør for å sikre at "bilde" -biten av .png er klikkbar og den gjennomsiktige bit ikke er. Dette er veldig viktig hvis markørene overlapper.
Du lager først kartikonbildet (markerIconGlastonbury), og opprett deretter kartikonformen (markerShapeGlastonbury), og til slutt kobler du begge disse til kartmarkøren din (markerGlastonbury).
// Angi posisjonen til Glastonbury kartmarkøren. var markørPositionGlastonbury = nytt google.maps.LatLng (511559803, -2.585585); // Angi ikonet som skal brukes med Glastonbury kartmarkøren. var markørIconGlastonbury = url: 'ikoner / icon_glas_uk.png', // Størrelsesbildefilen. størrelse: new google.maps.Size (225, 120), // Poenget på bildet for å måle ankeret fra. 0, 0 er øverst til venstre. opprinnelse: new google.maps.Point (0, 0), // x-koordinatene til ankerpunktet på markøren. f.eks Hvis kartmarkøren din var en tegnepinne, ville ankeret være spissen av tappen. anker: nye google.maps.Point (189, 116); // Angi formen som skal brukes med Glastonbury kartmarkøren. var markørShapeGlastonbury = koord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56], type: 'poly'; // Opprette Glastonbury kartmarkøren. markørGlastonbury = ny google.maps.Marker (// bruker posisjonen ovenfor. posisjon: markørposisjonGlastonbury, // legger markøren til kartet. kart: festivalkart, tittel: 'glastonbury festival', // tilordner ikonbildet sett over til markøren. ikon: markerIconGlastonbury, // tilordner ikonformen sett over til markøren. form: markørShapeGlastonbury, // angir z-indeksen til kartmarkøren. zIndex: 102);
Du kan laste ned hele html-filen fra toppen av denne siden, eller ta en titt på liveversjonen. For øyeblikket har jeg nettopp lagt til en kartmarkør ... åpenbart vil jeg legge til flere kort tid!
Hint: For å få kartikonets form koordinater, legger jeg ikonbildet inn i en midlertidig webside i Dreamweaver, og bruker deretter Polygon Hotspot Tool til å få koordinatene, og kopier deretter disse koordinatene tilbake til min hovedkortside.Elementer, for eksempel kartmarkører, kan ha både x-, y- og z-koordinater. Z-indeksen er dybden. Det bestemmer hvordan elementene stables over hverandre, og dermed hvordan de overlapper.
Hvis x- og y-koordinatene til et element er det samme, vises elementer med høyere z-indekser på toppen av elementer med lavere z-indekser. (Z-indeksen virker bare på plasserte elementer, for eksempel relativ, fast eller absolutt).
Så langt ser kartet ut, fordi Google Maps API som standard gir elementene som vises lavere ned på skjermen, en høyere z-indeks, slik at de vises på toppen av gjenstander litt lenger opp på skjermen. F.eks Isle of Wight-ikonet ligger på toppen av Glastonbury og Reading-festivalikonene (se bildet nedenfor).
Senere i denne opplæringen tar vi en titt på hvordan du kan endre z-indeksene for å manipulere hvordan kartmarkørene vises.
Selv om kartet begynner å ta form, passer ikke standardkortet egentlig med den samlede effekten jeg vil oppnå. Heldigvis er det veldig enkelt å bruke API-stilalternativene for å tilpasse hvordan kartet ser ut.
Jeg burde også si på dette tidspunktet at jeg bare tok noen musikkfestivaler for å illustrere dette eksemplet. Dette var noe tilfeldig, og mitt valg reflekterer ikke min mening - enten for eller imot - noen festivaler!
Bruk JSON-veiviseren til å trene hvordan du vil at kartet skal se ut. Du kan endre fargene til stort sett alt, legge til og fjerne detaljer, sette fargestoff og geometri uavhengig. Det er verdt å bruke litt tid på å bli vant til hvordan dette fungerer. (Hvis du lurer på, er JSON bare en måte å formatere informasjon på, slik at en datamaskin kan lese den.)
Når du er fornøyd med stilen som vises i veiviseren for JSON-veiviseren, klikker du på Vis JSON trykk og kopier koden.
Gå tilbake til HTML-dokumentet ditt, legg til en variabel like etter åpningens JavaScript-tagg for å holde denne informasjonen, og lim deretter inn koden.
// Først leser vi i datastyringsstilen. var style: featureType: "admin", "stylers": ["synlighet": "off"], "featureType": "poi" av «], " featureType ":" transit "," stylers ": [" synlighet ":" off "], " featureType ":" road " : "color:" # FFE200 "], " featureType ":" water "," stylers ": [ "synlighet": "på", "farge": "# 4f92c6"]];
Du må få kartet til å behandle informasjonen du nettopp har lagt til som en kartstil. Bruk StyledMapType å gjøre dette.
// Da bruker vi disse dataene for å lage stilene. var styled_festival = nye google.maps.StyledMapType (style_festival, name: "Festival stil");
Til slutt må du tilordne den nye stilen til kartet for å "aktivere" stilen.
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId ( 'map_styles_festival'); Bruk lenken ved starten av denne veiledningen for å laste ned en kopi av koden for kartet så langt, eller ta en titt på live demo for denne delen av opplæringen. Jeg har faktisk lagt til to stiler. Den ene er aktivert med en gang, og den andre blir aktivert når kartet er zoomet for å gi et større detaljnivå. (Dette forklares nærmere nedenfor.)
Jeg kunne heller ikke motstå å legge til en bakgrunn på dette punktet :) Ta en titt på kropp css velger for å se hvordan jeg gjorde dette.
Ok, det er nå på tide å gjøre kartet faktisk å gjøre noe! Du kan bruke det innebygde Info Window-overlegget, men de ser ikke ut Fantastisk og de kan ikke lett tilpasses. Så, i stedet, skal vi bruke Infobox-biblioteket.
Last ned en kopi av Infobox-biblioteket. Pak det ut og lagre det i en mappe nær kartet. Legg deretter til denne linjen nær toppen av HTML-filen din.
Legg til z-indekser for hver kartmarkør, slik at de nærmere bunnen av skjermen vises på toppen av de høyere oppe. (dvs. jo nærmere bunnen av skjermen en markør er, jo høyere er z-indeksen.) Alt vil bli avslørt senere om hvorfor du gjør dette! For eksempel -
// Opprette Glastonbury kartmarkøren. markørGlastonbury = ny google.maps.Marker (// bruker posisjonen ovenfor. posisjon: markørposisjonGlastonbury, // legger markøren til kartet. kart: festivalkart, tittel: 'glastonbury festival', // tilordner ikonbildet sett over til markøren. ikon: markerIconGlastonbury, // tilordner ikonformen sett over til markøren. form: markørShapeGlastonbury, // angir z-indeksen til kartmarkøren. zIndex: 107);
Legg til følgende kode etter hver kartmarkør. Vennligst les gjennom kommentarene i koden for å se hva den gjør.
// Oppretter informasjonen for å gå i popup-info-boksen. var boxTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '
'; // Setter opp konfigureringsalternativene i popup-info-boksen. var infoboxOptionsGlastonbury = innhold: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size (-241, 0), zIndex: null, boxStyle: bakgrunn: "url ('infobox / pop_up_box_top_arrow.png' ) ikke-gjenta ", opacity: 1, width:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: new google.maps.Size (1, 1) isHidden: false, panel: "floatPane", enableEventPropagation: false; // Oppretter popup-infoboxen for Glastonbury, og legger til konfigurasjonsalternativene som er angitt ovenfor. infoboxGlastonbury = ny InfoBox (infoboxOptionsGlastonbury); // Legg til en «event listener» til Glastonbury kartmarkøren for å høre etter når den er klikket. google.maps.event.addListener (markørGlastonbury, "klikk", funksjon (e) // Åpne infoboksen Glastonbury info.infoboxGlastonbury.open (festivalMap, dette); // Endrer z-indeksegenskapen til markøren for å gjøre markør vises på toppen av andre markører. this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); // Zooms kartet. setZoomWhenMarkerClicked (); // Setter Glastonbury-markøren til sentrum av kartet. festivalMap.setCenter (markørGlastonbury.getPosition ());); I koden ovenfor ringte du funksjonen setZoomWhenMarkerClicked. Dette vil zoome inn kartet når en person klikker på en markør. Men ikke så mye vil skje før du har opprettet denne funksjonen! Dette er funksjonen du må opprette -
funksjon setZoomWhenMarkerClicked () var currentZoom = festivalMap.getZoom (); hvis (currentZoom < 7) festivalMap.setZoom(7);
Etter hvert som kartet zoomer inn, er sjansene at du vil vise flere detaljer på kartet. Dette gjøres ved å legge til en hendelseslytter og bruke getZoom metode for kontinuerlig å kontrollere om zoomen er endret. Hvis den har blitt økt (over nivå 6), vil setMapTypeId Metoden brukes til å angi den andre (mer detaljerte) stilen som er definert ovenfor.
// Lyttes kontinuerlig ut når zoomnivået endres. Dette inkluderer når kartet zoomer når en markør klikkes. google.maps.event.addListener (festivalMap, "zoom_changed", funksjon () var newZoom = festivalMap.getZoom (); // Hvis kartet er zoomet inn, bytter til stilen som viser høyere detaljnivå. (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // Ellers må kartet zoomes ut, så bruk stilen med lavere detaljnivå. ellers festivalMap.setMapTypeId ('map_styles_festival'); ); Stil din infobox ved hjelp av css for å få det til å se pen ut.
// Variabel som inneholder stilen for popup-infoboxen. var pop_up_info = "border: 0px solid svart; bakgrunnsfarge: #ffffff; polstring: 15px; margin-topp: 8px; grense-radius: 10px; -moz-grense-radius: 10px; -webkit-grense-radius: 10px ; bokseskygge: 1px 1px # 888; ";
Når en infobox er åpnet, blir kartmarkøren ført til forsiden. Men hvis du lukker infoboxen og så zoomer kartet ut til den opprinnelige posisjonen, forblir markøren foran. Dette kan se rart ut.
I trinn 1 angir du z-indeksen for hver markør. Du kan bruke dette nå for å fikse dette problemet. Du må opprette en funksjon (dvs.. resetZindexes) som tilbakestiller z-indeksene til de opprinnelige verdiene, og legger deretter til et anrop til denne funksjonen (dvs.. resetZindexes ();) til infobox.js for å utløse funksjonen til å kjøre når infobox-vinduet er lukket.
Gå til lenken øverst på denne siden for en kopi av koden til nettstedet så langt, eller ta en titt på den levende versjonen av hvordan den skal se nå. Jeg har bare lagt til popup-vinduet for Glastonbury. Du er velkommen til å legge til de andre selv!
Vi er nesten der med å tilpasse utseendet på kartet, men før vi kaller det en dag, bør vi legge til noen få navigasjons kontroller.
Google Maps har 12 områder hvor du kan legge til kartkontroller, bannere etc. Du kan tilpasse disse områdene helt, legge til hva som helst html, etc. du vil ha.
Vi skal legge til et egendefinert banner og navigasjon på høyre side av kartet.
For å komme i gang, må du først definere en funksjon for å opprette menyen. Denne kodekstrakten er ganske lang ...
// Funksjon som lager kontrollpanelområdet, dvs. kart tittelen og de 2 knappene like under den. funksjon createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ('div'); controlUI.style.border = '0px solid white'; controlUI.style.margin = '10 px'; controlUI.style.paddingTop = '11px'; controlUI.style.paddingBottom = '5 px'; controlUI.style.paddingLeft = '0 px'; controlUI.style.paddingRight = '0 px'; controlUI.style.width = '245px'; controlUI.style.height = '419px'; controlPanelDiv.appendChild (controlUI); // Karttittel titleBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = '255px'; titleBar.style.width = '245px'; titleBar.style.marginTop = '0 px'; titleBar.style.marginBottom = '0 px'; titleBar.style.marginLeft = '0 px'; titleBar.style.marginRight = '0 px'; titleBar.style.paddingTop = '6 piksler'; titleBar.style.paddingBottom = '2 piksler'; titleBar.style.paddingLeft = '0 px'; titleBar.style.paddingRight = '0 px'; titleBar.style.borderTopLeftRadius = '5 px'; titleBar.style.borderTopRightRadius = '5 px'; titleBar.style.borderBottomLeftRadius = '0 px'; titleBar.style.borderBottomLeftRadius = '0 px'; titleBar.style.cssFloat = 'venstre'; titleBar.innerHTML = '
'; controlUI.appendChild (tittellinja); yellowStripe = document.createElement ('div'); yellowStripe.style.backgroundColor = '# FFFF00'; yellowStripe.style.height = '2 piksler'; yellowStripe.style.width = '245px'; yellowStripe.style.marginTop = '3px'; yellowStripe.style.marginBottom = '3px'; yellowStripe.style.marginLeft = '0 px'; yellowStripe.style.marginRight = '0 px'; yellowStripe.style.paddingTop = '0 px'; yellowStripe.style.paddingBottom = '0 px'; yellowStripe.style.paddingLeft = '0 px'; yellowStripe.style.paddingRight = '0 px'; yellowStripe.style.cssFloat = 'venstre'; yellowStripe.style.fontFamily = 'Georgia, serif'; yellowStripe.style.fontSize = '14 piksler'; controlUI.appendChild (yellowStripe); // 'Mindre' hendelsesknappen. smallEvents = document.createElement ('div'); smallEvents.style.height = '108px'; smallEvents.style.width = '129px'; smallEvents.style.marginTop = '0 px'; smallEvents.style.marginBottom = '0 px'; smallEvents.style.marginLeft = '0 px'; smallEvents.style.marginRight = '0 px'; smallEvents.style.paddingTop = '0 px'; smallEvents.style.paddingBottom = '2 piksler'; smallEvents.style.paddingLeft = '0 px'; smallEvents.style.paddingRight = '0 px'; smallEvents.style.cssFloat = 'venstre'; smallEvents.innerHTML = '
'; controlUI.appendChild (smallEvents); // Paraplyknapp brolly = document.createElement ('div'); brolly.style.height = '149px'; brolly.style.width = '94px'; brolly.style.marginTop = '0 px'; brolly.style.marginBottom = '0 px'; brolly.style.marginLeft = '0 px'; brolly.style.marginRight = '0 px'; brolly.style.paddingTop = '0 px'; brolly.style.paddingBottom = '2 piksler'; brolly.style.paddingLeft = '0 px'; brolly.style.paddingRight = '0 px'; brolly.style.cssFloat = 'venstre'; brolly.innerHTML = '
'; controlUI.appendChild (parasoll); Raskt notat om stiler: Koden ovenfor bruker stil Egenskapen til et element for å definere stiler ved hjelp av JavaScript. For å konvertere CSS-egenskaper til JavaScript-notasjonen, må du bare huske at egenskaper som ikke har en bindestrek, forblir de samme, mens de med en bindestrek konverteres til camelCase, f.eks. bakgrunnsbilde blir backgroundImage. Unntaket er flyte, som blir cssFloat.
Deretter lager du en div for å holde menyen, og legg til menyen til denne div ved å ringe funksjonen du nettopp har opprettet i trinn 1.
// Opprett kontrollpanel (dvs. nettstedets tittel og 2 knapper) som vises på høyre side. var controlPanelDiv = document.createElement ('div'); var festivalMapControlPanel = ny createControlPanel (controlPanelDiv, festivalMap); Sett deretter inn kontroller egenskapen til kartet ditt for å legge til menyen til det aktuelle stedet, i dette tilfellet RIGHT_TOP.
// Legg til kontrollpanelet og tilbakestill knappen (opprettet tidligere) til kartet. festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .push (controlPanelDiv);
Nå skal du ha noe som ser ut som en tilpasset meny som vises på høyre side av kartet. Så alt som er igjen å gjøre er å få menyen til å gjøre noe ...
I løpet av de neste opplæringsprogrammene får vi knappen Mindre hendelser for å avdekke bilder fra Flickr, og paraplyknappen for å vise et skissert nedbør av nedbør. (En cliché jeg vet, men vi får litt regn her i sommermånedene!)
For å få noe til å fungere i denne opplæringen har jeg gjentatt trinnene ovenfor for å legge til en Tilbakestill-knapp til RIGHT_BOTTOM område. Dette inkluderer innpakningskode rundt Tilbakestill-knappen for å ringe handelRequests funksjon.
// Funksjon som lager knappen 'Reser map'. funksjon createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = '5 px'; controlUI2.style.margin = '10 px'; controlUI2.style.paddingTop = '2 piksler'; controlUI2.style.paddingBottom = '2 piksler'; controlUI2.style.paddingLeft = '2 piksler'; controlUI2.style.paddingRight = '5 px'; controlUI2.style.textAlign = senteret '; controlUI2.style.width = '148px'; controlUI2.style.height = '31px'; controlUI2.innerHTML = '
'; resetButtonDiv.appendChild (controlUI2); De handelRequests funksjon gjør noen ting - ta en titt på kommentarene i koden.
// Funksjon som kalles når knappene "mindre hendelser", avbryt eller knappene "Tilbakestill kart" klikkes. funksjon handelRequests (buttonPressed) if (buttonPressed === "reset") // Tilbakestiller zoom, kartposisjon og markør z-indekser tilbake til sin orignale posisjon. Lukker også alle infoboxene som er åpne for øyeblikket. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // Dette er en funksjon jeg har opprettet som lukker eventuelle informasjonskasser som er åpne. closeAllInfoboxes (); ellers hvis (buttonPressed === "small_events") alert ("Denne knappen vil gjøre noe nyttig i en senere opplæring!"); ellers hvis (buttonPressed === "rainfall") alert ("Denne knappen vil gjøre noe nyttig i en senere opplæring!"); Du kan få en full kopi av html-filen for denne delen av opplæringen fra toppen av denne siden, eller ta en titt på live-eksemplet. Bare Glastonbury kartmarkøren er aktiv i dette eksemplet.
Det er det for denne opplæringen! Forhåpentligvis har du nå noe som virker vaguelt på bildet øverst på denne siden. Hvis noe har gått galt, ta en titt gjennom de nedlastbare filene som er tilgjengelige på GitHub. Jeg har tatt med koden i separate filer for hver del av denne opplæringen, så du bør kunne trene hvor alt gikk feil.
Den neste opplæringen vil se på hvordan du kan bruke Google Maps API til å ta med dine egne kart (for eksempel et håndrapportert eller historisk kart), slik at de blir zoombare og interaktive.
Fotografiene som brukes i denne opplæringen, har alle blitt utgitt under Creative Commons-lisensen.
