Liens et markers

**astroma** · 09/01/2016, 21h24

Bonjour à tous,

Il y a longtemps que je ne suis pas venu demander de l'aide mais là je bloque totalement.

J'ai un script de carte qui fonctionne bien mais j'essaye de faire un lien entre DES liens hypertextes et DES markeurs sur ma carte et je suis totalement dans les choux.

J'ai suivi les exemples de noSmoking qui va certainement reconnaitre certaines de ses lignes de codes ici et ici, mais je n'arrive à rien

Voici mon script

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
var directionDisplay;
var map;
var sites = [<?php echo $data; ?>];
var infowindow = null;
var markers = new Array(); // Stockage des markers
 
// Initialisation de la carte
function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
    setZoom(map, sites);
    setMarkers(map, sites);
    directionsDisplay.setMap(map);
 
    infowindow = new google.maps.InfoWindow({
        maxWidth: 320,
    });
}
/*
Affichage des marqueurs avec les infowindows
*/
function setMarkers(map, markers) {
    var image = {
        url: '../../../images/pic8.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(20, 36),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(16, 36)
    };
    for (var i = 0; i < markers.length; i++) {
        var Action = document.getElementById(sites[0]);
        var site = markers[i];
        var siteLatLng = new google.maps.LatLng(site[2], site[3]);
 
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: site[0],
            icon: image,
            html: site[4],
            // Effet pour laisser les marqueurs tomber
            animation: google.maps.Animation.DROP
        });
 
        google.maps.event.addListener(marker, "click", function() {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}
/*
Zoom sur les marqueurs de la carte
*/
function setZoom(map, markers) {
    var boundbox = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        boundbox.extend(new google.maps.LatLng(markers[i][2], markers[i][3]));
    }
    map.setCenter(boundbox.getCenter());
    map.fitBounds(boundbox);
}

site[5] correspond à l'ID que je veux utliser sur le lien pour renvoyer pour l'infowindow.

Quelqu'un aurait-il un tuto à me conseiller ou me consacrer un peu de temps pour m'expliquer par où je dois commencer

Merci à tous

Astroma

**NoSmoking** · 10/01/2016, 10h19

Bonjour,
il aurait été intéressant de voir ce qu'il y a dans var sites = [<?php echo $data; ?>];, car on trouve des lignes comme

Code :

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

1
2
3
4
setZoom(map, sites);
setMarkers(map, sites);
//...
var Action = document.getElementById(sites[0]);

qui semblent douteuses !

**astroma** · 11/01/2016, 08h28

Bonjour et merci pour ton intervention.

Effectivement cette ligne est fausse. En fait j'avais oubliè de l'enlever d'un de mes nombreux tests avant de faire le copier /coller pour montrer mon script de base.

Alors voici le script qui fonctionne

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
<script type="text/javascript">
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;
	var sites = [<?php echo $tableauLieux30; ?>];
	var infowindow = null;
	var markers = new Array();// Stockage des markers
 
// Initialisation de la carte
	function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var mapOptions = {
		mapTypeId: google.maps.MapTypeId.SATELLITE
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
	setZoom(map, sites);
	setMarkers(map, sites);
	directionsDisplay.setMap(map);
 
	infowindow = new google.maps.InfoWindow({
		maxWidth: 320, 
	});
}
/*
Affichage des marqueurs avec les infowindows
*/
function setMarkers(map, markers) {
  var image = {
url: '../../../images/pic8.png',
size: new google.maps.Size(20, 36),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 36)
  };
	for (var i = 0; i < markers.length; i++) {
		var site = markers[i];
		var siteLatLng = new google.maps.LatLng(site[2], site[3]);
 
		var marker = new google.maps.Marker({
			position: siteLatLng,
			map: map,
			title: site[0],
			icon: image,
			html: site[4],
			// Effet pour laisser les marqueurs tomber
			animation: google.maps.Animation.DROP
		});
 
		google.maps.event.addListener(marker, "click", function () {
			infowindow.setContent(this.html);
			infowindow.open(map, this);
		});
	}
}
/*
Zoom sur les marqueurs de la carte
*/
function setZoom(map, markers) {
	var boundbox = new google.maps.LatLngBounds();
	for ( var i = 0; i < markers.length; i++ )
	{
	  boundbox.extend(new google.maps.LatLng(markers[i][2], markers[i][3]));
	}
	map.setCenter(boundbox.getCenter());
	map.fitBounds(boundbox);
}
</script>

Voici ma Div

Code :

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

<div id="map_canvas" class="map"><p>ATTENTION : Javascript doit être activé pour consulter la carte</p></div>

Voici le code PHP de création du tableau (A la base je n'avais pas intégrer l'ID des lignes)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
//Création du tableau
$key = "{$row5['h_ad']};{$row5['h_lieu']};{$row5['h_lat']};{$row5['h_long']}";
$id = array_search($key, $keys, true);
if ($id === false)
	{
	$id = $i++;
	$keys[$id] = $key;
	$data[$id] = array($row5['h_ad'], $row5['h_lieu'], $row5['h_lat'], $row5['h_long']);
	}
$evts[$id][] = '<h4>'.$dt3_ev.'</h4><h6>'.$row5['h_ev'].'</h6>';// Concatenation dates et événements
$faits[$id][] = $dt3_ev.' : '.$row5['h_ev'];

Code :

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

1
2
3
4
5
6
7
8
foreach($titres as $element1)
{
if ($tableauLieux30 !== '')
{
$tableauLieux30.=',';//Le point à la variable fait la boucle
}
$tableauLieux30.= '['.$element1.']';
}//Fermeture du remplissage du tableau

Et voici un exemple du tableau

"Ecole Primaire Joachim du Bellay, Rue Emile Crétois, 72800 Le Lude","Ecole Primaire Joachim du Bellay (Hospice Sainte Anne - Disparu)",47.6487,0.158161,"1606 : François de Daillon, comte du Lude, y fonde un hôpilal pour les malades sous l'invocation de Sainte Anne, autorisé par lettres patentes de 1716, délivrées à la demande du duc de Hoquelaure. Il entretenait 16 lits placés eu deux salles."

"42 Rue d'Orée, 72800 Le Lude","Hôpital dit de Sainte Catherine (Disparu)",47.6457,0.157472,"1712 : Un hôpilal dit de Sainte Catherine fut établi pour servir de maison de retraite pour des filles estropiées. Thomas Bluet, conseiller du roi, receveur au grenier à sel, et Eléonore du Châtelet, son épouse, le dotent, en 1712, d'une partie des bâtiments où il fut établi, et Agnès Page (ou le Page) lègue le surplus par son testament du 15 juillet 1740."

Et voici le PHP avec lequel je désespère de faire un lien

Code :

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

<h2><?php echo htmlentities(($data[$id][1]), ENT_QUOTES, "UTF-8");?></h2>

Je suis preneur avec grand plaisir de toutes pistes, conseils ou tutos

Merci

Astroma

**NoSmoking** · 12/01/2016, 18h58

Effectivement cette ligne est fausse.

les autres ne sont pas mieux

Et voici un exemple du tableau

il te faut observer le code HTML généré (CTR + U) pour vérifier que tu es bien en présence d'un tableau déclaré dans une variable coté client.

**astroma** · 16/01/2016, 13h25

Bonjour Nosmoking

Pardon pour le retard de ma réponse mais déplacement pro ce qui m'a bloqué.

Mon tableau généré le voici. Et il s'agit bien de ma variable $tableauLieux30;

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
Array
(
    [0] => "Château du Lude, 72800 Le Lude","Château du Lude",47.6475,0.158955,"<h4>  1027  </h4><h6>Alain V, duc de Bretagne, assiège le comte d'Anjou Foulques Nerra, dans le château du Lude et le force à restituer à Herbert-Eveille-Chien, comte du Maine, les terres qu'il lui avait usurpées, et les otages qu'il en avait exigé.</h6><br /><h4>  1290  </h4><h6>(Date indicative) Vers la fin du XIIIe siècle, les bases d'une forteresse en maçonnerie sont établies, à l'emplacement du château actuel.</h6><br /><h4>  1425  </h4><h6>Les anglais s'emparent du château.</h6><br /><h4>  1427  </h4><h6>Les sires de Raiz et de Beaumanoir, accompagnés d'Ambroise de Loré, reprennent le château. Le capitaine anglais Blanquebourne est tué lors des combats.</h6><br /><h4>  1457  </h4><h6>Le château devient la propriété de Jean Daillon, chambellan du Roi Louis XI, en 1457.</h6><br /><h4>  1479  </h4><h6>Jean Daillon fait appel à Jean Gendrot, l'architecte du Roi René d'Anjou pour examiner et décider des travaux de restauration à entreprendre.</h6><br /><h4> mai 1545  </h4><h6>La baronnie du Lude est érigée en comté par François Ier.</h6><br /><h4>  1598  </h4><h6>Henri IV assiste au Lude à sa première procession depuis sa conversion au catholicisme.</h6><br /><h4>  1619  </h4><h6>Louis XIII est de passage au château.</h6><br /><h4>  1685  </h4><h6>Henry de Daillon meurt. Il lègue le château à son neveu Antoine Gaston de Roquelaure, maréchal de France.</h6><br /><h4>  1751  </h4><h6>Par héritage, le château échoit ensuite aux ducs de Rohan, qui vendent la propriété en 1751 à Joseph Julien Duvelaër, membre de la Compagnie des Indes.</h6><br /><h4>  1789  </h4><h6>(Date indicative) Le château est mis sous séquestre pendant la Révolution.</h6><br /><h4>3 décembre 1799  </h4><h6>1200 royalistes entrent de nouveau dans la ville, se logent dans les maisons, établissent leur quarlier général au château, et réunissent environ 4 mille hommes sur ce point d'où ils les distribuent par cantonnemens de 60 à 100 hommes, dans les communes environnantes. Un citoyen du Lude le notaire Lépinleux est arrêté, destiné à être fusillé, il n'échappe à ce sort funeste que grâce aux vives instances de cinq de ses compatriotes qui ne cessèrent leurs sollicitations auprès du général en chef Bourmont qu'après avoir obtenu le prix de leurs efforts.</h6><br /><h4>  1928  </h4><h6>Le château du lude est classé aux Monuments Historiques.</h6><br /><h4>  1994  </h4><h6>Le château du Lude est actuellement la propriété du comte Louis-Jean de Nicolaÿ et de son épouse, la comtesse Barbara, fondatrice de la « fête des Jardiniers » en 1994.</h6>"
    [1] => "10 Rue de la Boule d'Or, 72800 Le Lude","Couvent des Récollets (Disparu - Lieu approximatif)",47.647,0.154038,"<h4>  1697  </h4><h6>Le couvent des Récollets, fondé par un des seigneurs du Lude, de la famille Daillon, possédait 8 religieux en 1697.</h6><br /><h4>  1791  </h4><h6>(Date indicative) A cette époque l'église des Recollets est fermée au culte.</h6>"
    [2] => "Ecole Primaire Joachim du Bellay, Rue Emile Crétois, 72800 Le Lude","Ecole Primaire Joachim du Bellay (Hospice Sainte Anne - Disparu)",47.6487,0.158161,"<h4>  1606  </h4><h6>François de Daillon, comte du Lude, y fonde un hôpilal pour les malades sous l'invocation de Sainte Anne, autorisé par lettres patentes de 1716, délivrées à la demande du duc de Hoquelaure. Il entretenait 16 lits placés eu deux salles.</h6>"
    [3] => "2 Place du Mail, 72800 Le Lude","Eglise de Notre Dame des Vertue (Pan de mur - lieu approximatif)",47.6472,0.154063,"<h4>  1606  </h4><h6>Vers cette époque, le prieuré est déplacé pour s'installer à coté de l'église de Notre Dame des Vertue.</h6><br /><h4> mars 1791  </h4><h6>Le prieuré est vendu comme bien national.</h6>"
    [4] => "72800 Place de l'Eglise, Le Lude","Eglise Saint Vincent",47.6463,0.157847,"<h4>  860  </h4><h6>L'église primitive qui portait le nom de Saint Join est détruite lors des incursions normandes vers 860.</h6><br /><h4>  1057  </h4><h6>L'église est sous le patronage de Saint Vincent. Elle fut fondée par les anciens seigneurs du Lude en faveur de l'abbaye de Saint Aubin d'Angers vers 1057.</h6>"
    [5] => "28 Boulevard de l'Hospice, 72800 Le Lude","Hôpital de Notre Dame de la Miséricorde",47.6487,0.153571,"<h4>27 janvier 1705  </h4><h6>René François de la Fontaine, sieur de la Cochinière, prêtre, établit l'hôpital de Notre Dame de la Miséricorde, pour y recevoir des orphelines.</h6><br /><h4>  1802  </h4><h6>La congrégation religieue d'Evron vient gérer l'Hospice.</h6><br /><h4>7 juillet 1805  </h4><h6>Un arrêté préfectoral du 7 juillet 1805 réunit les trois hospices en un seul hôpital placé dans la maison de la Miséricorde et fixe à 12 le nombre des lits.</h6>"
    [6] => "42 Rue d'Orée, 72800 Le Lude","Hôpital dit de Sainte Catherine (Disparu)",47.6457,0.157472,"<h4>  1712  </h4><h6>Un hôpilal dit de Sainte Catherine fut établi pour servir de maison de retraite pour des filles estropiées. Thomas Bluet, conseiller du roi, receveur au grenier à sel, et Eléonore du Châtelet, son épouse, le dotent, en 1712, d'une partie des bâtiments où il fut établi, et Agnès Page (ou le Page) lègue le surplus par son testament du 15 juillet 1740.</h6>"
    [7] => "26 Boulevard de l'Hospice, 72800 Le Lude, France","Hospice Civil",47.6488,0.154629,"<h4>31 août 1914  </h4><h6>Ouverture de l'hôpital bénévole n°4 bis pendant la Première Guerre Mondiale - 25 lits - Fonctionne du (31 août 1914 au ?).</h6>"
    [8] => "72800 Le Lude","Le Lude",47.6467,0.159291,"<h4>  1604  </h4><h6>Le Lude est touché par la peste.</h6><br /><h4>  1835  </h4><h6>Naissance de Victor Huguet (1835-1902), peintre orientaliste.</h6><br /><h4>  1907  </h4><h6>Naissance de Jean Letourneau (1907-1986), ministre sous la Quatrième République.</h6><br /><h4>12 décembre 1946  </h4><h6>Naissance de Franck Provost, coiffeur.</h6>"
    [9] => "3 Rue du Marché au Fil, 72800 Le Lude","Maison des Architectes",47.6474,0.157613,"<h4>  1932  </h4><h6>La maison des architectes est inscrite aux Monuments Historiques.</h6>"
    [10] => "72800 Malidor, Le Lude","Pavillon de Malidor",47.6478,0.175,"<h4>  1973  </h4><h6>Le pavillon de malidor est inscrit aux Monuments Historiques.</h6>"
    [11] => "72800 Place François de Nicolay, Le Lude","Place François de Nicolay",47.6472,0.156873,"<h4> novembre 1799  </h4><h6>(Date indicative) Quinze jours après la première attaque, une troupe de chouans composée de quelques centaines de fantassins et de plusieurs cavaliers entre de nouveau au Lude à 6 heures du soir, s'empare du corps de garde, place des factionnaires en plusieurs endroits et force le sergent major des grenadiers de la garde nationale de la conduire chez les hommes de sa compagnie qu'elle désarme. Elle repart le lendemain matin, emmenant plusieurs voitures chargées de ces armes et de différents effets pris chez divers particuliers.</h6><br /><h4>29 octobre 1799  </h4><h6>Sur les 7 heures du soir une compagnie de chouans commandée par le capitaine Auguste tombe inopinément sur la ville, pénètre au milieu de la place, où était planté l'arbre de la liberté qu'elle abat, et se retire après avoir chassé la garde composée de quelques vieillards incapables de lui résister.</h6><br /><h4>15 mai 1816  </h4><h6>La cour prévotale de la Sarthe escortée de la garde départementale de cent gendarmes, d'un détachement du régiment de chasseurs et d'un détachement du régiment de la garde royale, alors en garnison au Mans, ce dernier remplacé bientôt par un détachement de la garde nationale de la même ville, se transporte au Lude pour y juger 5 paysans et manouvriers qui avaient arboré l'étendard tricolore sous le nom de « Vautours de Bonaparte ». Le 27 Septembre ces malheureux sont condamnés à la peine de mort, plusieurs aux galères et à d'autres peines, quatre des premiers sont exécutés le lendemain avec un appareil solennel (Guillotine).</h6>"
    [12] => "Rue des Ponts, 72800 Le Lude","Pont",47.6484,0.160993,"<h4>9 juin 1815  </h4><h6>Le 9 juin à 6 heures du matin au moment où le poste de la garde nationale, qui ne veillait que la nuit, venait de rentrer, 12 hommes à cheval, du corps de royalistes, commandé par les généraux d'Ambrageac et Tranquille, traversent la ville, vont s'emparer du pont situé sur le Loir et s'y établissent, tandis que le gros de cette troupe porté à mille hommes marche à leur suite. Un tambour de la garde nationale bat la générale dans la seule rue où il peut pénétrer plusieurs habitants prennent les armes et se portent à l'embouchure des rues déjà occupées par l'ennemi, un combat acharné s'engage et dure trois quarts d'heure, au bout desquels, les braves citoyens qui se sont sacrifiés pour la défense de leur petite cité sont obligés de se replier et de fuir après avoir fait des prodiges de valeur. Plusieurs maisons sont pillées notamment celle du Maire, Monsieur Lepingleux, celle du sieur Coipel, l'hôtel de ville fut dévasté, les papiers brûlés à l'exception des registres civils, plusieurs citoyens furent emmenés comme otages et renvoyés quelques jours après.</h6>"
    [13] => "72800 Rue des Valboyers, Le Lude","Prieuré Saint Vincent primitif (Disparu)",47.6464,0.158072,"<h4>  1057  </h4><h6>(Date indicative) Fondation du prieuré Saint Vincent.</h6><br /><h4>25 juin 1113  </h4><h6>Après une longue querelle entre l'abbaye de Saint Aubin d'Angers et celle de Saint Join des Mornes, fondatrice de l'église primitive, le prieuré est définitivement fondé.</h6>"
)

Par contre je ne comprends pas trop ta remarque sur le scrip, chez moi il fonctionne bien?

Pour info, je ne te demande pas de me donner la solution mais juste si tu peux m'expliquer où je peux trouver un tuto où un exemple concret à suivre. Je suis un nul en javascript

Merci

Astroma

**NoSmoking** · 18/01/2016, 18h29

Par contre je ne comprends pas trop ta remarque sur le scrip, chez moi il fonctionne bien?

tu as raison j'ai mal/incomplétement lu ton code

Mon tableau généré le voici. Et il s'agit bien de ma variable $tableauLieux30;

en toute logique tu devrais retrouver dans le code HTML généré (CTR + U) quelque chose comme

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
var sites = [
    ["Château du Lude, 72800 Le Lude","Château du Lude",47.6475,0.158955,"..."],
    ["10 Rue de la Boule d'Or, 72800 Le Lude","Couvent des Récollets (Disparu - Lieu approximatif)",47.647,0.154038,"..."],
    ["Ecole Primaire Joachim du Bellay, Rue Emile Crétois, 72800 Le Lude","Ecole Primaire Joachim du Bellay (Hospice Sainte Anne - Disparu)",47.6487,0.158161,"..."],
    ["2 Place du Mail, 72800 Le Lude","Eglise de Notre Dame des Vertue (Pan de mur - lieu approximatif)",47.6472,0.154063,"..."],
    ["72800 Place de l'Eglise, Le Lude","Eglise Saint Vincent",47.6463,0.157847,"..."],
    ["28 Boulevard de l'Hospice, 72800 Le Lude","Hôpital de Notre Dame de la Miséricorde",47.6487,0.153571,"..."],
    ["42 Rue d'Orée, 72800 Le Lude","Hôpital dit de Sainte Catherine (Disparu)",47.6457,0.157472,"..."],
    ["26 Boulevard de l'Hospice, 72800 Le Lude, France","Hospice Civil",47.6488,0.154629,"..."],
    ["72800 Le Lude","Le Lude",47.6467,0.159291,"..."],
    ["3 Rue du Marché au Fil, 72800 Le Lude","Maison des Architectes",47.6474,0.157613,"..."],
    ["72800 Malidor, Le Lude","Pavillon de Malidor",47.6478,0.175,"..."],
    ["72800 Place François de Nicolay, Le Lude","Place François de Nicolay",47.6472,0.156873,"..."],
    ["Rue des Ponts, 72800 Le Lude","Pont",47.6484,0.160993,"..."],
    ["72800 Rue des Valboyers, Le Lude","Prieuré Saint Vincent primitif (Disparu)",47.6464,0.158072,"..."]
];

Liens et markers

APIs Google

Vue hybride

Discussions similaires

Partager

Partager