vapemap/app/stores/templates/stores/store_map.html

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

{% block title %}
    Stores
{% endblock %}

{% block style %}
    <style type="text/css">
        #map-canvas-stores {
            width: 100%;
            height: 600px;
        }
    </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/markerclusterer.js" %}"></script>
    <script type="text/javascript" src="{% static "js/gmap.js" %}"></script>
    {% switch map_geolocation %}
    <script type="text/javascript" src="{% static "js/geolocation.js" %}"></script>
    {% endswitch %}
    <script type="text/javascript">
        var stores = [
            {% for store in store_list %}{% if store.address.geo_latitude  %}['{{ store }}', {{ store.address.geo_latitude }}, {{ store.address.geo_longitude }}, {{ store.store_type }}, '{% url "store-detail" store.slug %}'],{% endif %}
            {% endfor %}
        ];
        $(document).ready(function(){initialize_map(stores, document.getElementById('map-canvas-stores'), true)});
    </script>
{% endblock %}

{% block content %}
    <div class="jumbotron">
        <p class="lead">
            {{ site.name }} lists {{ store_count }} stores, and {{ chain_count }} chains across the world.
        </p>
        {% switch map_geolocation %}
        <p id="geolocation" style="display: none;"><a class="btn btn-large">Find Stores Near Me.</a></p>
        {% endswitch %}
    </div>
    <div class="row-fluid">
        <div class="span8 offset2">
            <div id="map-canvas-stores" class="map">
                <noscript>
                    You need Javascript enabled to view the map.
                </noscript>
            </div>
        </div>
    </div>
{% endblock %}