GoogleMap/Django/JQuery

Salut ;

Je ne vais pas vous ennuyer car c’est le ramadan et tout le monde est fatigué alors passons a l’essentiel.Comment Utiliser Google Map et Django ? 😉

C’est très simple d’abords  obtenez une clef chez google , allez y je vous attends

http://code.google.com/intl/fr/apis/maps/signup.html

Ok ,vous avez votre clef , créer un fichier html et mettez y code code .Je ne vais pas renter dans les

détails mais sachez que c’est du JQUERY  http://docs.jquery.com

—-

<html>
<body>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=VOTRE_CLEF"></script>
<script type="text/javascript" src="/static/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/jquery.gmap-1.1.0-min.js"></script>
<style type ='text/css'>
   body {font-family:"Times New Roman",Georgia,Serif;; font-size:8px;}
   table { width: 900px; margin: 0 auto; border-style:solid ; border-width:1px; border-color:#C0C0C0;}
   div#map { width: 900px;height: 800px; margin: 0 auto; border-style :solid ; border-width: 1px; border-color:#C0C0C0;}
   th{ border-style:solid ; border-width:1px; border-color:#C0C0C0;}
   td{border-style:solid ; border-width:1px; border-color:#C0C0C0;}
</style>
</head>

<body >
<!--script src="http://maps.google.com/maps?file=api&key=" type="text/javascript"></script-->
<script src="/static/labeledmarker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        var gm = google.maps;
        if(gm.BrowserIsCompatible()) {
                var INITIAL_ZOOM = 7;

                /* initialize the map with the full
                * map-type, zoom, and pan controls */
                var map = new gm.Map2($("#map").get(0));
                map.addControl(new gm.LargeMapControl());
                map.addControl(new gm.MapTypeControl());
                map.disableDoubleClickZoom();
                /* when the document is unloaded, allow the gmap
                * to release it's resoures (especially for IE6) */
                $(document.body).unload(function() {
                        google.maps.Unload();
                });

                /* we're adding a new location, so center
                * the map over... guatemala! (what?) */
                var lat = 14.497401;
                var lon = -14.452362;
                var latlon = new gm.LatLng(lat, lon);
                map.setCenter(latlon, INITIAL_ZOOM);

                var sprite = function(offset) {
                        var icon = new GIcon(G_DEFAULT_ICON);
                        icon.sprite = {
                        //"image": "/static/locations/images/markers.png",
                        "top": offset * 34
                };
                return icon;
                };

                /* iterate each of the markers (ALL locations),
                * and add a sprite to the map for each one */
                $("td[marker]").each(function() {
                    var loc = $(this);
                    var point = new GLatLng(loc.attr("lat"), loc.attr("lng"));
                    var marker = new LabeledMarker(point, { "labelText": loc.attr("code"), "labelClass": "caption", "icon": sprite(loc.attr("marker")) });
                    marker.bindInfoWindow(this);
                    map.addOverlay(marker);
                });
        }
});
</script>

<table>
     <tr>
         <td>
            <div id="map">
                &nbsp;
            </div>
        </td>
    </tr>
</table>
<table id="markers">
    <tr>
	<th>Nom Village</th><th>Latitude</th><th>Longitude</th><th>Dernier SMS</th>
    </tr>

{% for village in villages %}
    <tr>
        <td>{{village.village_name}}</td>
        <td>{{village.latitude}}</td>
        <td>{{village.longitude}}</td>
	<td  code="" marker="test" lat="{{village.latitude}}" lng="{{village.longitude}}">
            {{village.last_message}}
	</td>
    </tr>
{% endfor %}
</table>
</body>
</html>

—–

Dans le code ci -dessus vous devez remplacer votre clef dans l’ entête ou j’ai mis [VOTRE_CLEF] .

Vous remarquez qu’il y’ a aussi la syntaxe de template de django ,cela montre juste que cette page

est servie par une vue django c-dessous.

—-

def handle (req):
    list = []
    for  village in Village.objects.all() :
        try:
              last_message =village.message_set.latest('received')
              list.append(
                  # Decimal is not Serializable
                  {'longitude':str(village.longitude),
                   'latitude':str(village.latitude),
                   'village_name':str(village.name) ,
                   'last_message':str(last_message)
                 })
        except Exception,  e:
              print  'Hum!Village n a pas de message?'
              print e
    print  list
    return render_to_response ('map.html' , { "villages": list})

—-

Bien entendu si je ne vous donne pas le fichier models.py  et le fichier url.py cette vue ne servira a rein .donc voici le model de donnée qui est associé a cette vue

from django.db import models
from datetime import datetime
# Create your models here.
class Village(models.Model):
    name = models.CharField (max_length = 20 , default = 'koalack')
    longitude =models.DecimalField (max_digits =10, decimal_places =5)
    latitude  =models.DecimalField (max_digits =10, decimal_places =5)

    def __unicode__(self):
        return self.name

class Message(models.Model):
    text = models.TextField  ()
    village =models.ForeignKey (Village)
    received = models.DateTimeField (default = datetime.utcnow())
    def __unicode__(self):
        return self.text

Et enfin voci le fichier urls.py  qui est associé a ce model.

from django.conf.urls.defaults import *

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()
from mapg.googlemap import views
urlpatterns = patterns('',
    # Example:
    # (r'^mapg/', include('mapg.foo.urls')),

    # Uncomment the admin/doc line below and add 'django.contrib.admindocs'
    # to INSTALLED_APPS to enable admin documentation:
    # (r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    url(r'^$' , views.handle , name="handle"),
    url(r'^cal/?$' , views.calendar_handler , name="calendar"),
    (r'^admin/', include(admin.site.urls)),
    (r'^static/(?P<path>.*)' , 'django.views.static.serve' ,
     {'document_root':'/home/dia/mapg/googlemap/static'})
)

--

S’il vous plait n’oubliez pas de prendre les biblitheques Jquery  manquantes et de mettre dans votre base des données latitude , longitude et le village associé par exemple

Moi dans ma base j’ai par exemple  [‘Keur Samba Loabé’ ,  ‘14.222’, ‘14.00005 »].

Et voici ce que vous obtenez si vous faites tout ce qui est necessaire  .Aplus 😉

def handle (req):
 »’Cette vue est uniquement appellee par JQUERY
et retourne la deniere message pour tous les villages »’
list = []
for  village in Village.objects.all() :
try:
last_message =village.message_set.latest(‘received’)
list.append(
# Decimal is not Serializable
{‘longitude’:str(village.longitude),
‘latitude’:str(village.latitude),
‘village_name’:str(village.name) ,
‘last_message’:str(last_message)
})
except Exception,  e:
print  ‘Hum!Village n a pas de message?’
print e
print  list
return render_to_response (‘map.html’ , { « villages »: list})
Publicités

0 Responses to “GoogleMap/Django/JQuery”



  1. Laisser un commentaire

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s





%d blogueurs aiment cette page :