Placer des marker sur google map

**ju_bicycle** · 16/05/2011, 03h51

Hello,
toujours dans mon cas de base de donnee, j'aimerai pouvoir mettre des marker sur google map a partir d'un fichier CSV. Les vagues trucs que j'ai trouve sont des bibliothque qui permerte d'utiliser google map avec un Framework Django.

Alors je sais pas trop si c'est possible, mais voila si quelqu'un a une idee, j'achete

**alexdevl** · 18/05/2011, 20h50

Bonjour,

J'ai comme toi voulu créer une carte avec des marqueurs.

Connaissant surtout python j'ai cherché une lib python mais, au final, je suis arrivé à la conclusion que
- Il fallait utiliser une page internet pour afficher google map.
- Le plus efficace était d'utiliser la lib javascript V3 de google:
http://code.google.com/intl/fr/apis/.../tutorial.html

Avec l'aide du forum (et pas mal d'huile de coude) car je n'avais pas fait de javascript avant j'ai fait le code joint.

Pour la récup à partir d'un fichier voir ce lien :
http://econym.org.uk/gmap/basic9.htm

Si tu veux voir ta page internet à partir de python il faut intégrer la page dans ton appli.

Voila...

Alex

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas {
    height : 100%
    text-align : left;
  }
  #side_bar {
    text-align : left;
  }
  #side_bar button {
    font-size : 12px;
    font-family : Verdana, Arial;
    width : 250px;
    height : 30px;
    padding : 5px;
    margin : 5px;
    border : 1px solid #c0c0c0;
    background-color : #DDDDDD;
    cursor : pointer;
    color : #000000;
    text-align : left;
  }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Variable globale
var gmarkers = [];
 
function initialize() {
  // *** *** Creation de la carte *** ***
  // *** Centrage sur le centre de la France ***
 
  latlng_c=[48.863506,2.307444] //"Centrage"
 
  var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
 
  // *** Ajout des marqueur ***
var tMarker = [
	{
	nom:"Le Louvre",
	phone:"",
	address:"",
	latlng:[48.862324,2.333]
	},
	{
	nom:"Tour Eiffel",
	phone:"",
	address:"",
	latlng:[48.85902,2.29399]
	}
];
 
  for( var m in tMarker){
    mark_Address(map,tMarker[m].nom,tMarker[m].phone,tMarker[m].address,tMarker[m].latlng);
  }
} // fin de la fonction initialize()
 
// ******  Fonction marquage ******
function mark_Address(map,nom,phone,address,latlng_c) {
  var oSide = document.getElementById("side_bar");
 
  var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
  var myWindowOptions = {
      content:
      '<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>'
  };
  var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: nom
  });
  // Affichage de la fenetre au click sur le marker
  google.maps.event.addListener(marker, 'click', function() {
      myInfoWindow.open( map, marker);
      window.scrollTo(0,0);
  });
  gmarkers.push(marker);
  // creation du bouton vers marqueur
  var oBtn = document.createElement('BUTTON');
  var oBr  = document.createElement( 'BR');
  var oTxt = document.createTextNode( nom);
  // function sur click
  oBtn.onclick = function(){
    google.maps.event.trigger( marker, "click");
  };
  // titre pour survol
  oBtn.title = " Display \n"+ nom +"\t";
  // ajout des elements
  oBtn.appendChild  ( oTxt);
  oSide.appendChild ( oBtn);
  oSide.appendChild ( oBr);
}
 
</script>
</head>
<body onload="initialize()">
<table border=1>
  <tr>
    <td width = 250 valign="top" s_tyle="text-decoration: underline; color: #4444ff;">
       <div id="side_bar"></div>
    </td>
    <td VALIGN=TOP>
       <div id="map_canvas" style="width: 1000px; height: 700px"></div>
    </td>
  </tr>
</table>
 
</body>
</html>

Placer des marker sur google map

Python

Vue hybride

Discussions similaires

Partager

Partager