Hoewel er zijn zoveel kaarten apps en diensten die er zijn om je van punt A naar punt B, het definitieve koning van kaarten van Google Maps. Ik gebruik het op mijn computer, tablet en 90% van de tijd op mijn smartphone. Het is heeft de beste gegevens, de meeste navigatie-en routing-mogelijkheden en coole functies, zoals Street View en te wandelen, fietsen en het openbaar vervoer info.
Maar wat als je moet gebruik maken van een kaart of routebeschrijving buiten de website van Google? Stel, u heeft uw eigen bruiloft website of een persoonlijke blog en de gasten kunnen een bezoek brengen aan uw site, typt u het adres komen ze uit en u krijgt automatisch een routebeschrijving naar de locatie van het evenement!
Goed, er zijn een paar manieren waarop u kunt gaan over het volbrengen van deze. De makkelijkste manier is om gewoon het embedden van de kaart op je webpage het gebruik van de embed-code die is gegenereerd door Google Maps. De tweede manier is het een beetje meer technische, maar meer klantgericht en dynamisch. Ik zal over beide methoden.
Google Map Insluiten
Als u alleen wilt weergeven routebeschrijvingen op van de ene locatie naar de andere, de makkelijkste om te doen is om het insluiten van welke kaart u bekijkt het gebruik van de embed-code. Eerst verder gaan met het instellen welke richting je wilt in Google Maps en klik op het tandwiel-pictogram in de rechterbenedenhoek van de pagina.
Klik op Delen of insluiten kaart en klik op de Insluiten kaart tabblad. Hier kunt u kies een formaat voor je kaart en kopieer de iframe code en laat dat op elke webpagina die u wilt.
Het enige nadeel aan deze methode is dat de gebruiker ziet een statische kaart. In de tweede methode hieronder kunt u een vorm waarbij de gebruiker typen in elke starten van een adres en het genereren van een kaart van die adres om een adres van bestemming van uw keuze.
Maken Van Google Maps Formulier
Om te illustreren wat ik bedoel met de tweede methode, ga je gang en typ een ONS mailadres in in onderstaand vakje om een routebeschrijving van uw locatie naar mijn huis:
Voer uw vertrekpunt adres:
Cool hè? U kunt eenvoudig deze kleine formulier op een website, blog, of waar u kunt in sommige HTML-code! Dit is ook zeer geschikt voor kleine zakelijke websites als u het kunt gooien op je contact pagina en mensen kunnen routebeschrijving snel, in plaats van een kopie van uw adres, open een nieuw venster en typ in hun eerste adres.
Dus hoe gaan we over het maken van deze gewijzigde routebeschrijving vak? Nou ten eerste moeten we de juiste syntaxis voor de URL die Google gebruikt voor routebeschrijvingen. Gelukkig kunnen we dat uit door het verkrijgen van routebeschrijvingen tussen twee plaatsen en dan gewoon kopiëren van de URL uit de adresbalk. U kunt ook klikken op het kleine tandwiel-pictogram in de rechterbenedenhoek van de pagina en kies Delen of insluiten kaart.
De link Delen tabblad bevat de URL is de URL die in de adresbalk van uw browser. Ik ‘ve gone vooruit en plak dan de volledige onderstaande URL alleen maar om u te laten zien wat het lijkt.
https://www.google.com/maps/dir/3600+Thorp+Veren+Dr+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13 z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892
Yikes! Dat is best lang! Er is een heleboel dingen in, waarvan de meeste geen zin! Google Maps URL-parameters gebruikt zeer eenvoudig en gemakkelijk, maar de nieuwe URL-structuur is vrij ingewikkeld. Gelukkig, kunt u nog steeds gebruik maken van de oude parameters en Google converteren naar de nieuwe versie automatisch. Om te zien wat ik bedoel, check de link hieronder.
http://maps.google.com/maps?saddr=start&daddr=end
Ga je gang en geef het een schot. In een adres in offertes voor de begin-en einddatum van het adres en plak de URL in je browser! Ik vervangen beginnen met mijn eigen stad New Orleans en eindigen met Houston, TX, dus dit is wat mijn routebeschrijvingen van Google Maps URL ziet er zo uit:
http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
Het werkt! Zoals u kunt zien, hoewel, Google Maps zet de links in iets ingewikkelder wanneer de kaart volledig is geladen. Ok, dus nu hebben we een gezonde URL die we kunnen geven in Google Maps, moeten we een simpel formulier met twee velden, één voor de start adres en één voor het adres van de bestemming.
Als u wilt dat mensen u typt gewoon in hun adres en een routebeschrijving naar uw plaats, dan kunnen we je wilt dat het tweede veld verborgen en al ingesteld op het adres van bestemming.
<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Voer uw vertrekpunt adres:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” waarde=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”routebeschrijving” />
</form>
Check out de code hierboven. De eerste regel begint met het bepalen van vorm en zegt dat wanneer de gebruiker op de submit knop wordt geklikt, de gegevens moeten worden verzonden naar maps.google.com/maps. De target=blank betekent dat we de resultaten in een nieuw venster geopend. Dan hebben we een tekstvak voor het startadres, die is leeg.
Het tweede tekstvak verborgen is, en de waarde is het adres van de bestemming die wij verlangen. Ten slotte is er een knop met de titel “Routebeschrijving”. Nu, wanneer iemand in hun adres, ze krijgt dit:
U kunt de routebeschrijving en de kaart, zelfs niet meer met een paar extra parameters. Bijvoorbeeld, laten we zeggen dat u niet wilt dat de standaard weergave te kaarten, maar in plaats daarvan wil het Satelliet en toon Verkeer.
http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
Let op de layer=t en t=h – velden in de URL. laag=t is voor het verkeer laag en t=h betekent hybride kaart! t kan ook worden ingesteld op m voor de normale kaart, k voor satelliet-en p voor het terrein. z is de zoom-niveau en je kan het veranderen van 1 tot 20. In de bovenstaande URL, het is 7. Net tack die op uw uiteindelijke URL en je heb nu een uiterst op maat gemaakte Google Maps Routebeschrijving formulier op uw site!
Hebt u problemen met deze, plaats een reactie en ik zal je proberen te helpen! Genieten!