dans le code ci dessous je génére un liste de marker via un tableau en php
tout roule par contre je voudrais ajouté 2 choses et mes connaissance en JS sont peu limiter
1 ajouter une infobulle différentes pour chaques marqueurs ( j'ai une idée pour la partie php mais je trouve pas ou mettre ma boucle pour les infos bulles)
2 utiliser la fonction groupe de markeur quand il y en trop dans la même zone ..
Merci d'avance pour votre aide
Code : Tout sélectionner
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false?key=<?php echo $apikey; ?>"></script>
<script type="text/javascript">
/* Déclaration du centre de la map */
var latlng = new google.maps.LatLng(<?php echo $mapcenter; ?>); // initialize view
/* Déclaration de l'objet qui définira les limites de la map */
var bounds = new google.maps.LatLngBounds();
/* Déclaration et remplissage du tableau qui contiendra nos points, objets LatLng. */
var myPoints = [];
<?php
//Recuperation de point de ma bdd
foreach ($itemsLoc as $itemLoc){
$coord = unserialize ($itemLoc->value);
$lat = $coord['lat'];
$lon = $coord['lon'];
$coord = $lat.",".$lon;
echo "myPoints.push( new google.maps.LatLng(". $coord .")); \r\n";
}
?>
/* Déclaration des options de la map */
var options = {
/*zoom : 7,
center: latlng, */
// ici, ces 2 valeurs ne sont plus utiles car calculées automatiquement
mapTypeId: google.maps.MapTypeId.<?php echo $maptype; ?>
}
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
var myDiv = document.getElementById('map');
/* Chargement de la carte avec un type ROADMAP */
var map = new google.maps.Map(myDiv,options);
/* Boucle sur les points afin d'ajouter les markers à la map
et aussi d'étendre ses limites (bounds) grâce à la méthode extend */
for(var i = 0; i < myPoints.length; i++){
bounds.extend(myPoints[i]);
var thisMarker = addThisMarker(myPoints[i],i);
thisMarker.setMap(map);
}
/* Ici, on ajuste le zoom de la map en fonction des limites */
map.fitBounds(bounds);
/* Fonction qui affiche un marker sur la carte */
function addThisMarker(point,m){
var marker = new google.maps.Marker({position: point});
/*TODO ADD CLUSTER PINT SYSTEM*/
return marker;
}
</script>