Discussion :

[zeloutre]

Bonsoir à tous,

N'étant pas du tout branchée javascript, je galère un peu pour faire ce que je veux.
En utilisant l'API google map, j'affiche une liste de marqueurs venant d'une BDD MySql ( un script trouvé sur le web qui marche bien)

Mais le hic, c'est que j'ai besoin d'afficher aussi un marqueur (d'une autre couleur )qui indiquerait la position actuelle et de centrer la carte sur la position actuelle ( même si on ne voit pas les marqueurs de la BDD).

Je trouve partout des bouts de code pour l'un ou l'autre , mais je suis bien incapable de bidouiller le truc pour faire tout en même temps.

Auriez-vous l'amabilité de me guider un peu ?

Je suis partie là dessus :

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
 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
 
 <script type="text/javascript">
 
 
 //Sample code written by August Li
 
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 maxWidth: 300
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 15,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <?
 $query = mysql_query("SELECT * FROM poi_example");
 while ($row = mysql_fetch_array($query)){
 $name=$row['name'];
 $lat=$row['lat'];
 $lon=$row['lon'];
 $desc=$row['desc'];
 echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
 }
 ?>
 
 center = bounds.getCenter();
 map.fitBounds(bounds);
 
 }
 
 
 </script>

Merci d'avance !

[NoSmoking]

Bonjour,
tu commences par créer et ajouter tous tes marqueurs, via addMarker...une fois cela fait...tu crées un dernier marqueur, il te faut créer une fonction ou passer un paramètre à celle existante, en modifiant son aspect via son icon et tu centres la carte sur ses coordonnées.

[zeloutre]

Mais justement, je ne sais pas créer de fonctions
Je dois mettre ça ou, dans le code existant ?

[NoSmoking]

Mais justement, je ne sais pas créer de fonctions
Je dois mettre ça ou, dans le code existant ?

je pense que la suite risque d'être périlleuse.

Au même titre que tu as une function addMarker il te faut une fonction addCentreMarker, par exemple.
Cette fonction est a appeler à la fin de la fonction initMap

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
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    }
  });
< ?
  $query = mysql_query("SELECT * FROM poi_example");
  while ($row = mysql_fetch_array($query)) {
    $name = $row['name'];
    $lat = $row['lat'];
    $lon = $row['lon'];
    $desc = $row['desc'];
    echo("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
  }
?>
  addCentreMarker( lat, lng, map);  // ajout ICI avec les bonnes valeurs
  center = bounds.getCenter();
  map.fitBounds(bounds);
}

concernant la fonction addCentreMarker il te faut jeter un coup d'oeil sur l'objet new google.maps.MarkerImage

[zeloutre]

Bon, je me suis attaquée à quelquechose qui me dépasse un peu. Je vais apprendre à manipuler l'api et du javascript pour comprendre ce que je fais, avant de revenir vous embeter.

merci en tout cas.

[NoSmoking]

Bon, je me suis attaquée à quelquechose qui me dépasse un peu. Je vais apprendre à manipuler l'api et du javascript pour comprendre ce que je fais, avant de revenir vous embeter.

merci en tout cas.

il n'est rien de compliqué mais apprendre à manipuler les méthodes de l'API est une bonne chose

petit exemple simple:

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
function createMarqueurCentre( lat, lng, map){
  // creation de l'icone
  var oImage = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/arrow.png',
    new google.maps.Size(39, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(11, 32)
  );
  // creation de l'ombre
  var oOmbre = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/arrowshadow.png',
    new google.maps.Size(39, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(11, 32)
  );  
  // la position
  var oLatLng = new google.maps.LatLng( lat, lng);
  // creation du marqueur
  var oMarker = new google.maps.Marker({
    icon : oImage,        // image cree
    shadow : oOmbre,      // ombre cree
    position : oLatLng,   // position cree
    clickable : false,    // avoir si utile
    map : map             // la Map parente
  });
}

je te laisse découvrir les différents paramètres et le reste