Google Maps API v3 δουλεύει στατικά με DOCTYPE

gon1332 · 17 Δεκεμβρίου 2014

Καλημέρα σας,

δουλεύω σε Django ένα web application το οποίο θέλω να χρησιμοποιεί google maps.

Για να προβάλλω χάρτες χωρίς να γράψω ίχνος javascript, χρησιμοποιώ το django-gmapi.

Είναι ένας python wrapper για το api της Google.

Το ενσωμάτωσα, λοιπόν, στη δική μου εφαρμογή και το χρησιμοποιήσα με επιτυχία εμφανίζοντας

τον χάρτη που δημιούργησα στο template μου. Παρατήρησα όμως πως ο χάρτης εμφανίζεται

στατικός όταν υπάρχει στο template η δήλωση HTML5:

<!DOCTYPE html>

ενώ όταν τη σβήνω δουλεύουν όλα καλά.

Με τη χρήση κατευθείαν του api της Google δεν εμφανίζεται τέτοιο θέμα.

Τι μπορεί να φταίει;

Δοκιμές έκανα σε Google Chrome και Icewasel.

nucleus · 17 Δεκεμβρίου 2014

Από την σελίδα που linkαρες λέει αυτό

Your map will be displayed as an image, and once/if javascript loads, it will be converted to a javascript map.

Όταν έχεις το <!DOCTYPE html> αν δεις την κονσόλα του browser λέει κανένα error?

gon1332 · 17 Δεκεμβρίου 2014

Από την σελίδα που linkαρες λέει αυτό

Όταν έχεις το <!DOCTYPE html> αν δεις την κονσόλα του browser λέει κανένα error?

Δεν εμφανίζει κανένα error.

nucleus · 17 Δεκεμβρίου 2014

Από ότι βλέπω χρησιμοποιεί JSONEncoder και μετά ένα custom jQuery plugin. Που βρίσκει το πρόβλημα με το Doctype αφού δεν πετάει κάποιο error στην κονσόλα δεν έχω ιδέα. Υπάρχει κάποιο widgets.py εκεί αν δεν υπάρχει η jquery βάζει την

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js. Δες αν υπάρχει αυτό included στo source της σελίδας αν έχεις βάλει το Doctype ή όχι.

gon1332 · 17 Δεκεμβρίου 2014

Από ότι βλέπω χρησιμοποιεί JSONEncoder και μετά ένα custom jQuery plugin. Που βρίσκει το πρόβλημα με το Doctype αφού δεν πετάει κάποιο error στην κονσόλα δεν έχω ιδέα. Υπάρχει κάποιο widgets.py εκεί αν δεν υπάρχει η jquery βάζει την

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js. Δες αν υπάρχει αυτό included στo source της σελίδας αν έχεις βάλει το Doctype ή όχι.

Με το DOCTYPE βάζει αυτό:

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js

Ορίστε και το widgets.py του django-gmapi:

"""Custom Map widget."""
from django.conf import settings
from django.forms.forms import Media
from django.forms.util import flatatt
from django.forms.widgets import Widget
from django.utils.html import escape
from django.utils.safestring import mark_safe
from json import dumps
from gmapi import maps
from urlparse import urljoin


JSMIN = getattr(settings, 'GMAPI_JSMIN', not settings.DEBUG) and '.min' or ''

JQUERY_URL = getattr(settings, 'GMAPI_JQUERY_URL',
                     'http://ajax.googleapis.com/ajax/libs/jquery/1.4/'
                     'jquery%s.js' % JSMIN)

MAPS_URL = getattr(settings, 'GMAPI_MAPS_URL',
                   'http://maps.google.com/maps/api/js?sensor=false')


class GoogleMap(Widget):
    def __init__(self, attrs=None):
        self.nojquery = (attrs or {}).pop('nojquery', False)
        self.nomapsjs = (attrs or {}).pop('nomapsjs', False)
        super(GoogleMap, self).__init__(attrs)

    def render(self, name, gmap, attrs=None):
        if gmap is None:
            gmap = maps.Map()
        default_attrs = {'id': name, 'class': u'gmap'}
        if attrs:
            default_attrs.update(attrs)
        final_attrs = self.build_attrs(default_attrs)
        width = final_attrs.pop('width', 500)
        height = final_attrs.pop('height', 400)
        style = (u'position:relative;width:%s;height:%s;' %
                 (width, height))
        final_attrs['style'] = style + final_attrs.get('style', '')
        map_div = (u'<div class="%s" style="position:absolute;'
                   u'width:%s;height:%s"></div>' %
                   (escape(dumps(gmap, separators=(',', ':'))),
                    width, height))
        map_img = (u'<img style="position:absolute;z-index:1" '
                   u'width="%(x)s" height="%(y)s" alt="Google Map" '
                   u'src="%(map)s&size=%(x)sx%(y)s" />' %
                   {'map': escape(gmap), 'x': width, 'y': height})
        return mark_safe(u'<div%s>%s%s</div>' %
                         (flatatt(final_attrs), map_div, map_img))

    def _media(self):
        js = []
        if not self.nojquery:
            js.append(JQUERY_URL)
        if not self.nomapsjs:
            js.append(MAPS_URL)
        js.append('gmapi/js/jquery.gmapi%s.js' % JSMIN)
        return Media(js=js)

    media = property(_media)

Να σημειώσω πως την γραμμή

from json import dumps

την έγραψα εγώ έτσι. Αρχικά ήταν έτσι:

from django.simplejson import dumps

Την άλλαξα καθώς χρησιμοποιώ django 1.7 και πλέον δε χρησιμοποιούνε τη simplejson.

nucleus · 17 Δεκεμβρίου 2014

Και αν δεν υπάρχει το Doctype βάζει πάλι την jquery 1.4 από το url ή όχι?

Ίσως να φταίει και αυτό που άλλαξες.Από ότι είδα στην 1.7

The module django.utils.simplejson will be removed. The standard library provides json which should be used instead.

οπότε ορθώς το άλλαξες. Ίσως βέβαια να φταίει αυτή η αλλαγή που δεν παίζει σωστά.

https://docs.python.org/3/library/json.html#module-json

στο 19.2.3.1. Character Encodings αναφέρει

The RFC requires that JSON be represented using either UTF-8, UTF-16, or UTF-32, with UTF-8 being the recommended default for maximum interoperability.
As permitted, though not required, by the RFC, this module’s serializer sets ensure_ascii=True by default, thus escaping the output so that the resulting strings only contain ASCII characters.

Το Doctype το έβαλες μαζί με το <meta charset="utf-8"> στο head ή όχι?

EDIT:

https://bitbucket.org/dbinit/django-gmapi/issue/1/simplejson-is-depricated-since-django-15#comment-11821096

και η λύση.

https://bitbucket.org/dbinit/django-gmapi/commits/231642b

Δεν δοκιμάζεις τις αλλαγές στο δεύτερο link μια?

gon1332 · 17 Δεκεμβρίου 2014

Και αν δεν υπάρχει το Doctype βάζει πάλι την jquery 1.4 από το url ή όχι?

...και χωρίς Doctype.

Το Doctype το έβαλες μαζί με το <meta charset="utf-8"> στο head ή όχι?

Το βάζω ακριβώς πάνω από το <html>, προφανώς έξω από το head.

Δεν δοκιμάζεις τις αλλαγές στο δεύτερο link μια?

Τις έχω κάνει αυτές τις αλλαγές. Αν δεν τις έκανα δε μπορούσε να τρέξει καν τη σελίδα με τον χάρτη. Δεν έβρισκε τα Modules.

Οπότε είμαι καλυμμένος κι από εκεί.

Ευχαριστώ πάντως που κάθεσαι και το ψάχνεις.

Αν δε δηλώσω πως το αρχείο είναι HTML5, δηλαδή δε βάλω Doctype, υπάρχει περίπτωση να έχω προβλήματα γενικά;

Από κάποιους parsers ίσως;

nucleus · 17 Δεκεμβρίου 2014

Η σωστή θέση του <meta charset="utf-8"> είναι μέσα στο head.

Λογικά όχι δεν θα έχεις πρόβλημα αν δεν βάλεις το Doctype. Φτάνει να μην χρησιμοποιείς κάποιο από τα tags που υποστηρίζονται μόνο σε HTML5.

paparovic · 18 Δεκεμβρίου 2014

Δοκίμασε αυτο και πες μου:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

gon1332 · 20 Δεκεμβρίου 2014

Δοκίμασε αυτο και πες μου:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

Τα ίδια..

Σύνδεση

Google Maps API v3 δουλεύει στατικά με DOCTYPE

Προτεινόμενες αναρτήσεις

gon1332

nucleus

gon1332

nucleus

gon1332

nucleus

gon1332

nucleus

paparovic

gon1332

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση