Inclure script google maps

**arnaudlidz** · 19/07/2016, 10h10

Bonjour,

J'ai un script qui ajoute des marqueurs sur une carte avec une infobulle et qui centre tout ça.

Je voudrai ajouter ce script : https://github.com/jawj/OverlappingM...erfier-Leaflet Afin de pouvoir afficher tous les marqueurs lorsque plusieurs sont sur un même point.

Le problème est que je ne suis pas un pro du Js et mes tentatives se sont retrouvées infructueuses.

Voici le code de ma page :

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
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
 <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAPZfTYEtN3uEwoNFp2KZC4Z3na30gmAWY&callback=initialisation"></script>
 <script src="js/separation.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
 
 
 
</head>
<body>
<script type="text/javascript">
				var LocationData = [
<?php
$formule="(6366*acos(cos(radians($latitude))*cos(radians(`lat`))*cos(radians(`lng`) -radians($longitude))+sin(radians($latitude))*sin(radians(`lat`))))";
$reponse = $bdd->query("");
while ($donnees = $reponse->fetch())
{
    echo '['.$donnees['lat'].', '.$donnees['lng'].', "'.$donnees['nom'].' '.$donnees['type'].' - '.$donnees['port'].'" ],'."\n"."\t"."\t";
 
}
	$reponse->closeCursor();
	echo '['.$latitude.', '.$longitude.', "Recherche" ],'."\n";
	echo '['.$latitude.', '.$longitude.', "Recherche" ],'."\n";
	echo '['.$latitude.', '.$longitude.', "Recherche" ],'."\n";
	echo '['.$latitude.', '.$longitude.', "Recherche" ],'."\n";
	echo '['.$latitude.', '.$longitude.' ]'."\n";
 
?>
];
 
function initialize()
{
    var map = 
        new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
 
    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);
 
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });
 
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }
 
    map.fitBounds(bounds);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
	</script>
<div style="width:90%; margin-left:auto; margin-right:auto; text-align:center; margin-top:100px;">
<a href="index.php">Saisir une autre adresse</a> | <a href="lien_2.php?<?php echo 'lat='.$latitude.'&lng='.$longitude.'&ray='.$ray;?>">Retourner au tableau</a>
</div>
		<div id="map-canvas" style="height:300px; width:500px; margin-left:auto; margin-right:auto;"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
</body>
</html>

Je vous remercie d'avance pour l'aide que vous pourrez m'apporter.
Bien cordialement.
Arnaud

**NoSmoking** · 19/07/2016, 19h43

Bonjour,
quoiqu'il arrive cela n'est pas forcément une bonne idée d'autant qu'il a fait la même chose pour l'API Google Maps : Overlapping Marker Spiderfier for Google Maps API v3.

Inclure script google maps

JavaScript

Vue hybride

Discussions similaires

Partager

Partager