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&v=2&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">
</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})
Alioune dia's Blog 