Route berekenen met Google Maps vanaf eigen site

[Storm90]

Hallo allemaal,

Aangezien ik na lang zoeken nog geen antwoord heb kunnen vinden, vraag ik het eens hier op tweakers.net. Hopelijk kunnen jullie mij wel helpen.

Een bezoeker van een website (die ik nu aan het realiseren ben) moet via de contactpagina een route kunnen berekenen mbv Google Maps. Is iemand hier bekend mee en die weet hoe ik dit voor elkaar kan krijgen?

Ik heb al eens eerder gewerkt met Geolocation. Maar dan berekende de pagina zelf een route, vanaf de locatie waar de persoon zich op dat moment bevindt. En dat is nu niet de bedoeling, de bezoeker moet zelf zijn/haar straat en/of postcode in kunnen voeren. Vervolgens moet er een route worden weergegeven met een link waarmee de routebeschrijving in een aparte pagina wordt geopend, zodat hij/zij die kan uitprinten.

Het moet er ongeveer als volgt uit komen te zien: www.only-media.nl/project...serette/contactpagina.png

Wie weet hoe ik dit voor elkaar kan krijgen?

[dev10]

Heb je al gekeken in de documentatie van de Google Maps Javascript API? Daar staat namelijk helemaal uitgelegd hoe je dat voor elkaar kunt krijgen: http://code.google.com/in.../services.html#Directions

[MueR]

Javascript hoort in Webdesign, Markup & Clientside Scripting.

Wat heb je zelf al geprobeerd?

[watercoolertje]

Je kan hier afkijken
http://projects.hackvalue.nl/route/jquery.php

Het is eigenlijk heel simpel, ik kon er met de documentatie niet echt uit komen en na het bovenstaande voorbeeld snapte ik alles bijna meteen

Is wel op de V2 van de API gericht, maargoed

[ Voor 10% gewijzigd door watercoolertje op 18-07-2011 13:32 ]

[Anoniem: 96523]

In de documentatie van de Google Maps API staat exact uitgelegd hoe het werk en wat je nodig hebt om het voor elkaar te krijgen (er zijn zelfs demo's beschikbaar).

Ik heb het zelf ook gebruikt op een aantal websites en het is echt niet lastig om een basis versie in elkaar te zetten. Wanneer je een stap verder gaat (zoals tonen of printen van de routebeschrijving) dan is wat uitgebreidere javascript kennis wel handig.

[Bosmonster]

De API-documentatie van Google laat echter nogal te wensen over wat betreft leesbaarheid en praktische voorbeelden, dus zo gek vind ik het niet dat mensen er de weg in kwijt raken.

Wat je overigens ook nog kunt doen is kijken naar jQuery maps-implementaties, zoals gmap3 (http://gmap3.net/index.html)

[ Voor 25% gewijzigd door Bosmonster op 18-07-2011 14:18 ]

[brtk]

Ik heb het opgelost met dit stukje javascript;

code:

<script language="JavaScript">
 
            function getDirections() {
            var from=document.getDir.homePostCode.value;
            newWindow=window.open('http://maps.google.nl/maps?saddr='+from+'&daddr=####XX','newWin',            'height=600,width=800,resizable=yes,scrollbars=yes,menubar=no,addressbar=no');
                }
         </script>

Vervang ####XX door de postcode van de locatie waar naartoe je wilt navigeren.

En dan nog dit stukje HTML;

code:

<div class="routeplanner">
        <h2>Google Routeplanner</h2>
        <p>Type uw postcode en druk op de knop om een persoonlijke routeplanning in een nieuw venster te openen.</p>
        <form id="getDir" name="getDir" action="" method="" onsubmit="getDirections();">
          <input id="postCode" name="homePostCode" type="text" size="12"/>
          <label>
          <input type="submit" name="Submit" value="Plan route" title="Dit opent een nieuw venster met Google Maps."/>
          </label>
          </form>
                          </div>

Simpel, maar werkt prima.

Succes!

[Storm90]

Bedankt voor jullie reacties. Ik zal ze vanavond rustig bekijken en laat ik horen of het me gelukt is

[Storm90]

Ik heb er even naar gekeken en de link die watercoolertje gaf werkt perfect! Er zit nog één foutje in, namelijk als ik de postcode met spatie invoer werkt de routeplanner niet. Maar ik denk, dat ik dat wel mbv jQuery kan oplossen. In ieder geval bedankt voor jullie hulp.

[Storm90]

Nou, het is gelukt! Heb mede dankzij jullie een mooie routepagina in elkaar weten te zetten. Zie hier het resultaat: *snip* het is niet dat ik 't je niet gun je resultaat te plaatsen, maar valt onder (onbedoelde) spam/sitecheck

Zoals ik al eerder zei werkt de routeplanner niet als je een postcode met spatie gebruikt. Maar dat heb ik op weten te lossen mbv Javascript. Omdat er toch geen plaatsen bestaan met cijfers in hun naam, heb ik zelf een script toegevoegd die controlleert of het veld cijfers bevat . Zo ja, dan worden de spaties verwijdert. Zo niet, dan ga ik ervanuit dat er een plaatsnaam is ingevoerd en blijven de spaties staan.

Nogmaals bedankt voor jullie hulp.

[ Voor 13% gewijzigd door RobIII op 23-08-2011 00:55 ]

[Bosmonster]

Het is "Vind de snelste route", zonder -t

[Storm90]

Bosmonster schreef op zaterdag 06 augustus 2011 @ 12:45:
Het is "Vind de snelste route", zonder -t

Oeps, foutje Pas het meteen aan.

[Glabbeek]

Omdat er toch geen plaatsen bestaan met cijfers in hun naam

Die bestaan wel, bijvoorbeeld 2e Exloërmond. Dat heb ik in een eerder project al eens ondervonden.

[Copyman]

Simpelweg naar Google Maps zelf verwijzen met GET?

HTML:

<form method="get" action="http://maps.google.nl/maps" rel="external">
    <label for="route-saddr">Uw postcode:</label>
    <input id="route-saddr" type="text" name="saddr" placeholder="1234AB">
    <input type="hidden" name="daddr" value="Hoofdstraat 1 1234AB Hoofddorp">
    <button type="submit">Bereken route</button>
</form>

Met JavaScript zorg ik ervoor dat mijn [rel*="external"] elementen een target _blank krijgen. Mocht je daar zelf minder moeite mee hebben, gewoon target="_blank" gebruiken in plaats van rel="external".

edit:
Of ik kijk gelijk even naar je afbeelding... Nahja, als aanvulling op het topic dan maar.

[ Voor 10% gewijzigd door Copyman op 09-08-2011 15:16 ]

[Storm90]

Glabbeek schreef op dinsdag 09 augustus 2011 @ 14:23:
[...]


Die bestaan wel, bijvoorbeeld 2e Exloërmond. Dat heb ik in een eerder project al eens ondervonden.

Aangepast, het script kijkt nu of de eerste 4 karakters alleen uit cijfers bestaan. Zo ja, dan worden de spaties verwijdert.