vapemap/app/stores/templates/stores/store_search.html

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
    Search
{% endblock %}

{% block style %}
    <style type="text/css">
        #map-canvas-stores {
            width: 100%;
            height: 500px;
        }
    </style>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="{% static "js/gmap.js" %}"></script>
<script type="text/javascript">
    var stores = [
        {% for store in object_list %}{% if store.object.address.geo_latitude  %}['{{ store }}', {{ store.object.address.geo_latitude }}, {{ store.object.address.geo_longitude }}, {{ store.object.store_type }}, '{% url "store-detail" store.object.pk %}'],{% endif %}
        {% endfor %}
        {% if location_geo %}['Search Location', {{ location_geo.0 }}, {{ location_geo.1 }}, 999, ''],{% endif %}
    ];
    $(document).ready(function(){ initialize_map(stores, document.getElementById("map-canvas-stores")); });
</script>
{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>Store Search Results</h1>
    </div>

    <div class="row-fluid">
        <div class="span7">
            {% if object_list.count %}
            <table class="table table-striped">
                <thead>
                    <tr><th>Name</th><th>Town/City</th><th>Distance</th></tr>
                </thead>
                <tbody>
                {% for store in object_list %}
                    <tr>
                        <td><a href="{% url "store-detail" store.object.slug %}">{{ store.object }}</a></td>
                        <td>{{ store.object.address.city }}</td>
                        <td>{{ store.distance.km|floatformat:2 }} km</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% include "stores/paginator.html" %}
            {% else %}
            <p>No stores found.</p>
            {% endif %}
        </div>
        <div class="span5">
            <div id="map-canvas-stores" class="map">
                <noscript>
                    You need Javascript enabled to view the map.
                </noscript>
            </div>
        </div>
    </div>
{% endblock %}