Directions Form Example

[siebird]

Justin,

Sorry for the request on Thanksgiving–at the inlaws trying to kill some time so I thought I would try to do some tinkering on this. Happy Thanksgiving btw!

I'm trying to basically do the same thing in Craft as you can with the EE directions form (https://objectivehtml.com/google-maps/examples/directions-form). Is this possible in Craft yet?

[objectivehtml]

There is this example, but I should probably make another example to demonstrate a form submission. It's really the same thing except the values in the request are dynamic, but this is just basically using Twig vs. something custom in the plugin. Make sense? A good way to do it (prior to me making a specific example) would be to combine search form example with the directions request example.

https://github.com/objectivehtml/Google-Maps-for-Craft/wiki/Dynamic-Directions-Requestions

[siebird]

Totally missed this yesterday–I saw that wiki article, but with a little help from the directions example I should be able to get it now. I'll get back to ya

[siebird]

I think I'm pretty close. Getting this PHP notice: Array to string conversion

So far the template code is:

{% set query = craft.request.getParam('q') %}

{% set options = {
    id: 'map',
    width: '100%',
    height: '300px',
} %}

{% set response = {
    origin: query,
    destination: 'York, PA',
    language: 'en',
    avoidFerries: false,
    avoidHighways: false,
    avoidTolls: false,
    provideRouteAlternatives: false,
    travelMode: 'DRIVING',
    region: 'us',
    unitSystem: 1
} %}

<form action="{{ url('/contact/directions') }}" class="search-form">
    <label for="q">Starting Address:<input type="text" name="q" value="{{ query }}" id="q" placeholder="671 Lincoln Ave, Winnetka, IL 60093"></label>
    <button type="submit">Search</button>
</form>

{{ craft.googleMaps.map(options) }}

{{ response.plot('map') }}

{% for route in response.routes %}
    <h3>Driving Directions Summary:</h3>
    <p>{{ route.summary }}</p>

    <p><b>Directions:</b></p>

    {% for leg in route.legs %}
        <p>Total Duration ({{ leg.duration.text }} - {{leg.distance.text}})</p>
        <p>
            <b>Starting Address:</b> {{ leg.start_address }}<br>
            <b>Ending Address:</b> {{ leg.end_address }}
        </p>

        <ul>
        {% for step in leg.steps %}
            <li><p>{{ step.html_instructions | raw }}<br><em>({{ step.duration.text }} - {{ step.distance.text }})</em></p></li>
        {% endfor %}
        </ul>
    {% endfor %}

{% endfor %}

[objectivehtml]

Really sorry for the delay on this. Was sick for a couple weeks and then was playing catch up the past week and just getting backing around to this. Here is the code that got the directions form working for me. The main issue was you had a response object but this was really a "request" object. The response is returned by the directions method.

{% set query = craft.request.getParam('q') %}

{% set options = {
    id: 'map',
    width: '100%',
    height: '300px',
} %}

<form action="{{ url('/maps/directions-form') }}" class="search-form">
    <label for="q">Starting Address:<input type="text" name="q" value="{{ query }}" id="q" placeholder="671 Lincoln Ave, Winnetka, IL 60093"></label>
    <button type="submit">Search</button>
</form>

{%if query is not null %}

    {% set request = {
        origin: query,
        destination: 'York, PA',
        language: 'en',
        avoidFerries: false,
        avoidHighways: false,
        avoidTolls: false,
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        region: 'us',
        unitSystem: 1
    } %}

    {% set response = craft.googleMaps.directions(request) %}

    {{ craft.googleMaps.map(options) }}

    {{ response.plot('map') }}

    {% for route in response.routes %}
        <h3>Driving Directions Summary:</h3>
        <p>{{ route.summary }}</p>

        <p><b>Directions:</b></p>

        {% for leg in route.legs %}
            <p>Total Duration ({{ leg.duration.text }} - {{leg.distance.text}})</p>
            <p>
                <b>Starting Address:</b> {{ leg.start_address }}<br>
                <b>Ending Address:</b> {{ leg.end_address }}
            </p>

            <ul>
            {% for step in leg.steps %}
                <li><p>{{ step.html_instructions | raw }}<br><em>({{ step.duration.text }} - {{ step.distance.text }})</em></p></li>
            {% endfor %}
            </ul>
        {% endfor %}

    {% endfor %}

{% endif %}

[siebird]

No worries, thanks for response. It's working, now I just need the destination to be dynamic? I tried the following with no results: destination: '{{ entry.address }} {{ entry.city }}, {{ entry.state }} {{ entry.zipCode }}', and

{% set dest %}
    {{ entry.address }} {{ entry.city }} {{ entry.state }} {{ entry.zipCode }}
{% endset %}

{% set request = {
    origin: query,
    destination: dest,
    ....
} %}

[objectivehtml]

What's the value of the {{ dest }} if you output it as a string?

[siebird]

It's the correct address (format): 1000 Jeter Ave. Opelika AL 36803

[objectivehtml]

It works for me when I test, granted I am testing a little different syntax, but it's all the same and should work.

{% set entry = craft.entries.slug('another-test').first() %}

{% set dest = entry.map.getMarkers()[0].address %}

{% set request = {
    origin: query,
    destination: dest,
    language: 'en',
    avoidFerries: false,
    avoidHighways: false,
    avoidTolls: false,
    provideRouteAlternatives: false,
    travelMode: 'DRIVING',
    region: 'us',
    unitSystem: 1
} %}

[objectivehtml]

I see the issue...

When you use the {% set var %}{% endset %} it is passing a Twig_Markup object to the directions request. The destination must be a string... This code works for me. I made an entry object to simulate your request. I had to use the trim filter so it would output the object as a string.

{% set entry = {
    address: '123 Test Address',
    city: 'Some City', 
    state: 'Some State',
    zip: '12345'
} %}

{% set dest %}
    {{ entry.address }} {{ entry.city }} {{ entry.state }} {{ entry.zip }}
{% endset %}

{% set request = {
    origin: query,
    destination: dest|trim,
    language: 'en',
    avoidFerries: false,
    avoidHighways: false,
    avoidTolls: false,
    provideRouteAlternatives: false,
    travelMode: 'DRIVING',
    region: 'us',
    unitSystem: 1
} %}

[siebird]

Justin, appreciate all your help on this. Adding trim filter worked!