[Google Maps] Ajouter des infos bulles
Posté : 13 janv. 2016, 20:47
Bonjour et bonne année
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
Merci par avance
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>