Git Product home page Git Product logo

Comments (10)

objectivehtml avatar objectivehtml commented on August 12, 2024

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

from google-maps-for-craft.

siebird avatar siebird commented on August 12, 2024

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

from google-maps-for-craft.

siebird avatar siebird commented on August 12, 2024

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 %}

from google-maps-for-craft.

objectivehtml avatar objectivehtml commented on August 12, 2024

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 %}

from google-maps-for-craft.

siebird avatar siebird commented on August 12, 2024

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,
    ....
} %}

from google-maps-for-craft.

objectivehtml avatar objectivehtml commented on August 12, 2024

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

from google-maps-for-craft.

siebird avatar siebird commented on August 12, 2024

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

from google-maps-for-craft.

objectivehtml avatar objectivehtml commented on August 12, 2024

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
} %}

from google-maps-for-craft.

objectivehtml avatar objectivehtml commented on August 12, 2024

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
} %}

from google-maps-for-craft.

siebird avatar siebird commented on August 12, 2024

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

from google-maps-for-craft.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.