Google Maps v3 wrong positioning
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开发者_JAVA技巧'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:
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" }} );
Looks like the coordinates for that place is 86.87110, 42.10547, which (in text) is pretty close to the coordinates you use, mayby some error in a parsing?
-8.55 --> 85.5 somehow?
I found the answer. The problem is the I10N engine of Django. I have it configured to Spanish units, and in spain, decimals are noted by a comma, not a point, so the result of storing for example: 42.1231 and -8.2456 ends up in: 42,1231 and -8,2456.
With my template, the ending result is:
var latlng = new google.maps.LatLng(42,1231,-8,2456);
That obviously cannot be parsed by Google Maps.
精彩评论