Snabbtips Bädda in nya Google Maps

Alla nya Google Maps gjordes öppet till allmänheten i juli, men det är fortfarande en förhandsgranskning av vad slutprodukten kommer att bli och saknar därför några kända funktioner.

Har du till exempel försökt att bädda in en nyare Google-karta till en webbsida? Den pålitliga gamla "länk" knappen är ingenstans att hitta! Vissa folk kommer att föreslå att du återvänder tillbaka till de gamla Google Maps, bädda in en iframe på det ursprungliga sättet och sedan skifta tillbaka till den nyare Maps-förhandsgranskningen när du är klar. Men det finns ett annat sätt, och det är ett sätt som hjälper dig att dra nytta av de nyare, snyggare Google Maps, så här:

Det här är inte en bild ...

Maps Engine Lite

Maps Engine Lite (Beta) är ett verktyg som gör att du kan designa och spara dina egna anpassade kartor. För att kunna utnyttja det måste du ha ett Google-konto och vara inloggad.


Du kan sedan publicera och dela dina kartor, så låt oss börja med att klicka på "Ny karta":


Låt oss ange Envato HQ-adress i sökfältet som ett exempel:


Efter att ha placerat kontoret och lagt till en markör kan vi nu ge vår karta ett namn genom att klicka på "Untitled Map":


Vi kan också klicka på "Untitled layer" för att ge det ett namn, varefter vi kan lägga till alla typer av platser, rutter och områden till vår karta. Vi kan också importera via filuppladdningar, men för närvarande kommer vi bara att koncentrera oss på vår enda markör. Se till att du har lagt till den sökta platsen på din karta, då kan du koncentrera dig på markörfunktionerna.


Nu är Envato HQ listat under "Business locations" -laget, vi kan ändra dess färg, etikett och till och med ikonen. Google har gjort en massa anpassningsalternativ här, så ha kul att utforska! Jag har gett HQ en gul kontorsikon.


En annan trevlig egenskap hos de nyare Google-kartorna är dess olika teman; klicka på "Base map" och slå ut dig själv. Jag har gått för "Vitt vatten":



Ändra delinställningar

Efter att ha genomfört vår karta måste vi nu ändra delningsinställningarna, så klicka på "Dela" -knappen längst upp till höger.

Detta kommer att leda till en dialogruta där du kan välja att ändra synligheten på din karta från "Privat" till "Offentlig". Detta är nödvändigt för att bädda in din karta på en webbsida.


Med det gjort, klicka på ikonen "mapp" och välj "Bädda in på min sida".


Du får ett HTML-kod, så här:

för inbäddning av en iframe till en webbsida.


Gör din kartavätska

En sista sak är din karta inte exakt responsiv i sitt nuvarande tillstånd. Låt oss pakka in det i ett vätskeelement (ungefär som de som används för flytande videoinrättningar) så att vi kan inkludera det i en responsiv layout.

Först lägger vi ett extra element runt vår iframe:

Då förstorar vi omslaget med padding (en flytande höjdfastighet fungerar inte) och placerar iframen inuti den:

.fluid-wrapper position: relative; padding-bottom: 56,25%; / * 16: 9 * / höjd: 0;  .fluid-wrapper iframe position: absolute; topp: 0; vänster: 0; bredd: 100%; höjd: 100%; gränsen: ingen; 

Denna padding på 56,25% ger vår behållare ett 16: 9-förhållande, något som är värt att ta hänsyn till för video, men du kan göra din Google Map-rektangel vad som helst du vill.


Slutsats

Det är allt! Döda enkla verkligen, men en av de användbara små uppgifterna som har gjorts tillfälligt besvärligt medan Google gör övergången till de nya kartorna.

ps) Fångade du den senaste Google Maps Street View-turen på Galápagosöarna? Väl värt resan ...

Läs mer om Google Maps på Tuts+

  • Så här lägger du till Branded Branch-platser i Google Maps
  • Få kreativitet med Google Maps API
  • Lägg till en touch av realism till dina Google Maps
  • Responsive, Retinafied Google Map Images