Question

I’m doing an application in Django that has a small map in the user profile (provided by django-profile, but modified to use GMaps v3)

The thing is that any coordinate I put in the constructor it’s represented wrong in the map. Currently I’m putting the coordinates of Santiago de Compostela (spain) at Lat. 42.88 and Long. -8.55 but Google maps keeps telling me that I’m in Bayingolin (China).

Bythe way, the same happens with Google Maps v2, it locates the coordinates wrong.

Here’s the code:

{% block content %}
    {% if GOOGLE_MAPS_API_KEY and user.get_profile.location %}
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
        <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng( {{ user.get_profile.latitude }}, {{ user.get_profile.longitude }} );
            var opts = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("location"), opts);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "Test"
            });
        }
    </script>
    {% endif %}
<div id="profile">
<div id="profile_right">
    <div id="avatar" class="span-3 center">
        <a href="{% url profile_edit_avatar %}">
            <img class="border" src="/static/generic.96.jpg" />
        </a>
        <p><a href="{{ request.path_info }}edit/avatar/">{% if user.get_profile.has_avatar %}{% trans "Change avatar" %}{% else %}{% trans "Add avatar" %}{% endif %}</a></p>
    </div>

    <div>
        <p>{% trans "Username: " %} {{ user }}</p>
        <p>{% trans "Real name: " %} {{ user.first_name }} {{ user.last_name }}</p>
        <p>{% trans "Age: " %} {{ user. }}
        <p>{% trans "Member for: " %} {{ user.date_joined }}</p>
        <p>{% trans "E-mail:" %}
            <span class="{% if not email or not validated %}quiet red{% endif %}">
            {%if not email %}
                {% trans "Not set yet" %}
            {% else %}
                {{ email }}
                {% if not validated %}
                    {% trans " (Not validated)" %}
                {% endif %}
            {% endif %}
            </span>
        </p>
        <p>
        <label for="location">{% trans "Country" %}:</label>
        {% if user.get_profile.country %}
            {{ user.get_profile.get_country_display }}
        {% else %}
            <span class="quiet red">{% trans "Not set" %}</span>
        {% endif %}
        </p>

        <p>
            {% trans "Ciudad: " %} {{ user.get_profile.province }}
        </p>

    </div>
</div>

<div id="profile_left">
    {% if GOOGLE_MAPS_API_KEY %}
        <p>{% trans "Location" %}:
            {% if user.get_profile.location %}
                {{ user.get_profile.location }}
            {% else %}
                {% trans "Not set" %}
            {% endif %}
        </p>
    {% endif %}
    {% if user.get_profile.location %}
        <div class="span-12 last">
            <div id="location" style="width: 480px; height: 240px;"></div>
        </div>
    {% endif %}
</div>
</div>

Here is a screenshot with the result:

Answer 1

Actually, I had the same problem that the I10N engine reformatted my decimal output. A workaround for me was to use the stringformat:"s" filter for outputting decimal numbers in the Javascript part of the templates.

In your case that would be:

var latlng = new google.maps.LatLng( {{ user.get_profile.latitude|stringformat:"s" }}, {{ user.get_profile.longitude|stringformat:"s" }} );