Comme vous avez pu le constater le site est mort, sa fait donc longtemps que je n'ai plus rien mis dessus et je vais un peu changer pour une fois.
En effet étant sur la programmation d'un autre site, (à savoir que si j'ai le temps à l'avenir j'envisagerai de placer la structure de mon autre site dans lequel j'avais acquis un peu plus d'expérience à tout point de vue et qui ferais bien l'affaire ici).
Bref, le problème n'est pas là, ici peu j'ai voulu installer google map sur l'autre site et j'ai été confronté à un problème qui m'empêchait d'afficher plusieurs maker (marqueurs) sur la carte avec des icônes personnalisé et qui permettait de voir les informations de l'emplacement dans une nouvelle fenêtre (infobulle) lors d'un clic.
Après quelque galères j'ai fini par trouver, je ne sais pas si il s'agit de la meilleur façon de faire mais en tout cas ça fonctionne, du coup j'ai vu pas mal de personne embêtée à ce niveau, c'est pour ça que je vous le prompose, à savoir que la source de base à été prise depuis :google.
Donc en gros toutes les adresses (longitude, latitude) sont ressorties depuis la bdd.
Le script :
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-30, 136),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [ <?php
$req_for_map = mysql_query("SELECT * FROM mabase");
while($rep_for_map=mysql_fetch_assoc($req_for_map))
{
$numplus=1;
$titre_map=$rep_for_map["titre"];
$lat=$rep_for_map["lat"];
$lng=$rep_for_map["lng"];
?>
['<?php echo"<b>$titre_map</b>";?>', <?php echo"$lat";?>, <?php echo"$lng";?>, <?php echo"$numplus";?>],
<?php
}
?>
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('image/look.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('image/look.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(beach[1], beach[2]),
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
Voilà, si ça peut vous aider alors tant mieux, bonne soirée tout le monde ;)
