Écrit par : hellomorld 18 Sep 2011, 18:17
Bonjour,
Soit une carte google maps avec des données issues d'une base de données, regroupées avec markerclusterer.
http://www.botanic06.com/testmaps.php
Ca marche, mais j'aimerais pour afficher des infos sur les "punaises".
Les coordonnées et le nom à afficher des points sont dans un fichier .json.
Quelqu'un a un code pour cela, j'ai beau fouillé le web, je ne trouve pas de solutions adaptables à mon script que voici :
Code
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0px; padding: 0px}
#map{height: 100%}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="datas/data.json"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="scripts/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(43.84, 6.8);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var markers = [];
for (var i = 0; i < data.compte; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
Écrit par : hellomorld 19 Sep 2011, 06:02
J'ai trouvé une solution :
Code
<script type="text/javascript">
var infowindow = null;
function initialize() {
var center = new google.maps.LatLng(43.84, 6.8);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
var markers = [];
for (var i = 0; i < data.compte; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
html : dataPhoto.nom
});
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.html);
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Écrit par : def16 14 Sep 2017, 10:23
Salut tu peut me montrer a quoi ressemble ton fichier json ? Car j'essaie de faire la même chose une base de donnée MySQlou je veux récupérer les informations en JSON. Merci
Écrit par : Jaypee 15 Sep 2017, 06:24
Dans l'exemple il n'y a pas de JSON ni d'appel d'API visible, on est plus dans une approche bibliothèque et objets distribués client/serveur (comparable à JEE)
Pour une architecture web basée sur des REST API, Google n'est pas le meilleur choix, Bing dans ce cas serait préférable : https://msdn.microsoft.com/en-us/library/ff701713.aspx
Pour les markers (PushPins chez Bing) voir ici: https://msdn.microsoft.com/en-us/library/ff701724.aspx
J-P