Kaarten zijn een essentieel aspect van elke zakelijke website. Zelfs als u volledig op internet bent gebaseerd, willen klanten nog steeds graag weten wie u bent en waar u woont. Google Maps is nu de standaard voor veel websites omdat het het gemakkelijkst te gebruiken is, schijnbaar het meest nauwkeurig en gratis. Aan het einde van deze zelfstudie weet u precies hoe u een responsieve Google Map in uw website kunt insluiten.
Standaard Google Maps reageert niet altijd, dus schaalt mogelijk niet naar verschillende schermformaten. Afhankelijk van of u een WordPress-plug-in gebruikt of deze zelf insluit met behulp van code, moet u mogelijk enkele regels CSS toevoegen om de kaart responsief te maken.
Responsief webontwerp
Responsive is hier een sleutelbegrip. Het beschrijft het webontwerp dat rekening houdt met de gebruikerservaring en het apparaat om ervoor te zorgen dat het hetzelfde is, ongeacht welk apparaat u gebruikt om toegang te krijgen tot de website. Een responsieve website moet bijvoorbeeld dezelfde ervaringskwaliteit bieden, of u deze nu bezoekt op een desktop, tablet of smartphone.
Om dit te doen, moet de website zich aanpassen aan verschillende resoluties, schermformaten en aanraken.
Een responsieve Google Map inbedden in een website
Ik weet dat ik drie manieren heb om Google Maps in een website te integreren. Als u een WordPress-thema gebruikt, is de functie mogelijk ingebouwd. U kunt ook een plug-in gebruiken of u kunt code rechtstreeks vanuit Google in elke website insluiten. De eerste en tweede opties zijn geweldig voor WordPress-gebruikers, andere CMS gebruiken ook plug-ins, zodat u daar verzekerd bent. De laatste optie, code gebruiken, zou op de meeste websites moeten werken, ongeacht hoe ze zijn gebouwd.
Gebruik een WordPress-thema om een responsieve Google Map in te sluiten
Sommige WordPress-thema's hebben een functie specifiek voor Google Maps. Omdat kaarten zo fundamenteel zijn voor moderne websites, hebben sommige themaontwerpers ze rechtstreeks in hun ontwerpen geïmplementeerd. Als uw thema een kaartfunctie heeft, heeft u waarschijnlijk een Google Maps API nodig om het te laten werken. U voegt de API toe aan de thema-opties en deze zal rechtstreeks met Google praten om de kaart bij elk bezoek te bouwen.
- Bezoek deze pagina op de Google-website om het API-proces te starten.
- Selecteer de blauwe knop Aan de slag.
- Selecteer het menupictogram met drie regels linksboven in het nieuwe scherm.
- Selecteer API's en services en vervolgens Referenties.
- Selecteer Referenties maken en vervolgens API-sleutel.
- Selecteer Sleutel beperken en selecteer HTTP-verwijzers.
- Selecteer Opslaan.
- Kopieer de API Key en plak deze in de pagina met ontwerpopties waarvoor deze vereist is.
Zodra u de API Key heeft, kunt u Google Map in uw website implementeren met behulp van de thema-ontwerptools. Zolang het thema responsief is, zou de kaart dat ook moeten zijn.
Gebruik een plug-in om een responsieve Google Map in te sluiten
WordPress gebruikt plug-ins, Joomla gebruikt extensies, Drupal gebruikt modules of plug-ins en andere CMS gebruiken vergelijkbare naamgevingsconventies. Hoe dan ook, plug-ins verwijzen naar modulaire elementen die u op uw kern-CMS kunt plaatsen om functies toe te voegen. Een handige functie is een Google Map. Als uw website-thema geen kaarten-element bevat en u de code niet zelf wilt doen, is een plug-in het beste.
- Navigeer in WordPress naar Plug-ins en voeg Nieuw toe.
- Zoek naar Google Maps en selecteer een plug-in die u bevalt.
- Schakel het in Plug-ins in en ga naar de Instellingen.
- Voeg de Google Maps API toe die u hierboven heeft gemaakt waar aangegeven en Opslaan.
- Implementeer de plug-in waar u de kaart wilt laten verschijnen.
Andere CMS verschillen enigszins in hun naamgeving en menuposities, maar het principe is vrijwel hetzelfde. Voor de meeste, zo niet alle, kaartplug-ins is de Google Maps API vereist.
Gebruik code om een responsieve Google Map in te sluiten
Als u geen WordPress of andere CMS gebruikt, kunt u nog steeds een responsieve Google Map insluiten. U hoeft alleen code te gebruiken in plaats van een module. Het kost wat meer werk, maar levert dezelfde responsieve kaarten.
- Ga naar Google Maps en navigeer totdat de kaart die u wilt weergeven het scherm vult.
- Selecteer de blauwe Share-link en kopieer de code van Embed Map.
- Voeg uw specifieke insluitcode toe aan de onderstaande code tussen en.
- Voeg de code toe binnen de HTML van uw webpagina waar u de kaart wilt zien.
- Sla uw wijzigingen op.
De code:
Dit is niet mijn code, ik heb het online gevonden maar op mijn website getest. Het werkt als een charme en zou moeten werken, of u nu een CMS, HTML, Hugo of een van de vele andere websitetalen of paginatools gebruikt.
