Share
De geheel nieuwe Google Maps is in juli publiekelijk beschikbaar gemaakt voor het publiek, maar het is nog steeds een voorproefje van wat het uiteindelijke product zal zijn en mist daarom een paar bekende functies.
Heeft u bijvoorbeeld geprobeerd een nieuwere Google-kaart in te bedden in een webpagina? De betrouwbare oude "link" -knop is nergens te vinden! Sommige mensen zullen je aanraden terug te keren naar de oude Google Maps, een iframe op de originele manier in te bedden en vervolgens terug te schakelen naar het nieuwere Maps-voorbeeld zodra je klaar bent. Maar er is een andere manier, en het is een manier om u te helpen profiteren van de nieuwere, mooiere Google Maps, zoals dit:
Dit is geen afbeelding ...Maps Engine Lite (Beta) is een hulpmiddel waarmee u uw eigen aangepaste kaarten kunt ontwerpen en opslaan. Als u hiervan gebruik wilt maken, moet u een Google-account hebben en zijn aangemeld.
U kunt uw kaarten vervolgens publiceren en delen, dus laten we beginnen door op 'Nieuwe kaart' te klikken:
Laten we als voorbeeld het Envato HQ-adres invoeren in het zoekveld:
Nadat we het kantoor hebben gevonden en een markering hebben toegevoegd, kunnen we onze kaart nu een naam geven door op "Naamloze kaart" te klikken:
We kunnen ook op "Naamloze laag" klikken om dat een naam te geven, waarna we allerlei locaties, routes en gebieden aan onze kaart kunnen toevoegen. We kunnen ook via bestandsuploads importeren, maar voorlopig concentreren we ons alleen op onze enkele markering. Zorg ervoor dat je de gezochte locatie hebt toegevoegd aan je kaart, dan kun je je concentreren op de markeerfuncties.
Nu is Envato HQ vermeld onder de laag "Bedrijfslocaties", we kunnen de kleur, het label en zelfs het pictogram wijzigen. Google heeft hier een groot aantal aanpassingsmogelijkheden geboden, dus veel plezier met het verkennen! Ik heb HQ een geel kantoorpictogram gegeven.
Een andere leuke functie van de nieuwere Google maps is de verschillende thema's; klik op "Base map" en knock out. Ik ben gegaan voor "White water":
Na het voltooien van onze kaart, moeten we nu de instellingen voor delen wijzigen, dus klik op de knop "Delen" in de rechterbovenhoek.
Er verschijnt een dialoogvenster waarin u kunt kiezen om de zichtbaarheid van uw kaart te wijzigen van 'Privé' in 'Openbaar'. Dit is nodig om uw kaart in een webpagina in te sluiten.
Als dat klaar is, klikt u op het pictogram "map" en selecteert u "Inbedden op mijn site".
U ontvangt een HTML-fragment, zoals dit:
voor het insluiten van een iframe in een webpagina.
Een laatste ding, je kaart is niet precies responsief in zijn huidige staat. Laten we het in een vloeiend element wikkelen (net zoals het wordt gebruikt voor video-ingesloten video's), zodat we het in een responsieve lay-out kunnen opnemen.
Ten eerste verpakken we een extra element rond ons iframe:
Vervolgens maken we de wrapper op basis van opvulling (een eigenschap voor vloeiende hoogte werkt niet) en positioneren we het iframe erin:
.fluid-wrapper positie: relatief; opvulbodem: 56,25%; / * 16: 9 * / hoogte: 0; .fluid-wrapper iframe position: absolute; boven: 0; links: 0; breedte: 100%; hoogte: 100%; rand: geen;
Deze opvulling van 56,25% geeft onze container een 16: 9-verhouding, iets dat de moeite waard is om in aanmerking te nemen voor video, maar je kunt je Google Map-rechthoek elke gewenste verhoudingen maken.
Dat is het! Dood eenvoudig simpel, maar een van die handige kleine taken die tijdelijk onhandig zijn gemaakt terwijl Google de overstap maakte naar de nieuwere kaarten.
ps) Heb je de recente Google Maps Street View-trekking van de Galápagos-eilanden gezien? De reis waard ...
Accentsconagua