Rask tips Legge inn nye Google Maps

Alle nye Google Maps ble gjort åpenbart tilgjengelige for publikum i juli, men det er fortsatt en forhåndsvisning av hva sluttproduktet vil være og mangler derfor noen kjente funksjoner.

Har du for eksempel prøvd å legge inn et nyere Google-kart i en nettside? Den pålitelige gamle "link" -knappen er ingen steder å finne! Noen folk vil foreslå at du går tilbake til gamle Google Maps, legg inn en iframe på den opprinnelige måten, og deretter gå tilbake til den nyere kartforhåndsvisning når du er ferdig. Men det er en annen måte, og det er en måte som vil hjelpe deg å dra nytte av de nyere, finere Google Maps, slik:

Dette er ikke et bilde ...

Maps Engine Lite

Maps Engine Lite (Beta) er et verktøy som lar deg designe og lagre dine egne tilpassede kart. For å kunne bruke det, må du ha en Google-konto og være innlogget.


Du kan deretter publisere og dele kartene dine, så la oss begynne med å klikke på "Nytt kart":


La oss skrive inn Envato HQ-adressen i søkefeltet som et eksempel:


Etter å ha plassert kontoret og lagt til en markør, kan vi nå gi kartet vårt et navn ved å klikke på "Untitled map":


Vi kan også klikke på "Untitled layer" for å gi det et navn, hvoretter vi kan legge til alle slags steder, ruter og områder til kartet vårt. Vi kan også importere via filopplastinger, men for tiden skal vi bare konsentrere oss om vår eneste markør. Pass på at du har lagt til den søkte plasseringen til kartet, så du kan konsentrere deg om markørfunksjonene.


Nå er Envato HQ oppført under "Business locations" -laget, vi kan endre fargen, etiketten og til og med ikonet. Google har gitt deg en rekke tilpasningsmuligheter her, så ha det gøy å utforske! Jeg har gitt HQ et gul kontorikon.


En annen fin funksjon av nyere Google Maps er dens ulike temaer; klikk på "Base map" og slå deg ut. Jeg har gått for "hvitt vann":



Endre delinnstillinger

Etter å ha fullført kartet, må vi nå endre delinnstillingene, så klikk på "Del" -knappen øverst til høyre.

Dette vil hente en dialogboks der du kan velge å endre synligheten til kartet fra "Privat" til "Offentlig". Dette er nødvendig for å legge inn kartet ditt på en nettside.


Med det gjort, klikk på "mappen" ikonet og velg "Embed på min side".


Du får en HTML-kode, slik:

for å legge inn en iframe i en nettside.


Lag ditt kartvæske

En siste ting, kartet ditt er ikke akkurat lydhør i sin nåværende tilstand. La oss pakke den inn i et væskeelement (som de som brukes til væskeformat), slik at vi kan inkludere det i en responsiv layout.

Først pakker vi et ekstra element rundt vår iframe:

Så størrer vi pakken ved hjelp av polstring (en flytende høyde-egenskap vil ikke fungere) og plassere iframe i den:

.fluid-wrapper posisjon: relative; polstring bunn: 56,25%; / * 16: 9 * / høyde: 0;  .fluid-wrapper iframe posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; grense: ingen; 

Denne polstring på 56,25% gir vår beholder et 16: 9-forhold, noe som er verdt å ta hensyn til video, men du kan gjøre Google Map-rektelet uansett proporsjoner du ønsker.


Konklusjon

Det er det! Død enkelt virkelig, men en av de nyttige, små oppgavene som har blitt gjort midlertidig vanskelig, mens Google gjør overgangen til nyere Maps.

ps) Fikk du den siste Google Maps Street View-trekningen på Galápagos-øyene? Vel verdt turen ...

Finn ut mer om Google Maps på Tuts+

  • Slik legger du til merkede filtre i Google Maps
  • Bli kreativ Med Google Maps API
  • Legg til en berøring av realisme til Google Maps
  • Responsive, Retinafied Google Map Images