Infowindows sur Maps Google ce comportement comme une infobulle
Contenu du snippet
DEMO d'utilisation de marker sur maps google V3 avec une infowindows
ayant le comportement d'une infobulle.
ayant le comportement d'une infobulle.
<!doctype html5>
<!-- --------------------------------------------------------------------------------------------------------
(C)2015 Patrick MOIRE
http:\jeux.cartes.free.fr
DEMO d'utilisation de marker sur maps google V3 avec une infowindows ayant le comportement d'une infobulle.
--------------------------------------------------------------------------------------------------------- -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"type="text/javascript"></script>
<!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et qu'elle ne peut pas être redimensionnée par l'utilisateur -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Inclusion de l'API Google MAPS : Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function() {
// Creation de la carte
var latlng = new google.maps.LatLng(48.183333, .666667);
var options = {
center: latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var carte = new google.maps.Map(document.getElementById("carte"), options);
// Initialisation
marker = Array();
// Pour chaques points
$("*[name='latitude']",document.ville).each( function(index) {
// création d'un object servant de conteneur au marker, infowindows, ...
marker[index] = { mark:undefined, infowindow:undefined, etat:undefined };
// création du marqueur
marker[index].mark = new google.maps.Marker({
position: new google.maps.LatLng(document.ville.latitude[index].value, document.ville.longitude[index].value),
map: carte
});
// Création infowindows
marker[index].infowindow = new google.maps.InfoWindow({
content: '<div>'
+ '<b>'+document.ville.nom[index].value+'</b><br>'
+ '<p>Code postale : '+document.ville.cp[index].value+'<br>'
+ 'INSEE : '+document.ville.insee[index].value+'<br></p>'
+ '<br>'
+ '<a href="javascript:append_marker('+index+');">Ajouter</a>'
+ "</div>"
});
google.maps.event.addListener(marker[index].mark, 'mouseover', function() {
// Suppression de la précédente
if (typeof(window.timer)!='undefined') {
clearTimeout(timer);
timer = undefined;
}
if (typeof(window.infoopened)!='undefined') {
infoopened.close();
infoopened = undefined;
}
// Création de la nouvelle...
timer = setTimeout( function () {
marker[index].infowindow.open(carte,marker[index].mark);
infoopened = marker[index].infowindow;
},1000);
// Gestion effacement si la souris passe sur l'infowindows puis la quitte
google.maps.event.addListener(marker[index].infowindow, 'domready', function() {
$('.gm-style-iw').parent().mouseover( function() {
if (typeof(window.timer)!='undefined') {
clearTimeout(timer);
timer = undefined;
}
});
$('.gm-style-iw').parent().mouseout( function() {
if (typeof(window.timer)=='undefined') {
timer = setTimeout( function () {
if (typeof(window.infoopened)!='undefined') {
infoopened.close();
infoopened = undefined;
}
timer = undefined;
},500);
}
});
});
});
// Gestion effacement de l'infowindows si quitte le marqueur sans passer sur l'infowindows
google.maps.event.addListener(marker[index].mark, 'mouseout', function() {
if (typeof(window.timer)!='undefined') {
clearTimeout(timer);
timer = undefined;
}
if (typeof(window.infoopened)!='undefined') {
timer = setTimeout( function () {
if (typeof(window.infoopened)!='undefined') {
infoopened.close();
infoopened = undefined;
}
timer = undefined;
},500);
}
});
// suppression infowindows sur click Map
google.maps.event.addListener(carte, 'click', function() {
if (typeof(window.timer)!='undefined') {
clearTimeout(timer)
timer = undefined;
}
if (typeof(window.infoopened)!='undefined') {
infoopened.close();
infoopened = undefined;
}
});
// Ajout le marker sur click
google.maps.event.addListener(marker[index].mark, 'click', function() {
append_marker(index);
});
// Fin Ajout d'un Marqueur
});
// Fin Chargement page
});
// Ajout d'un marker à la liste des taches
function append_marker(index) {
if (window.ind_letter==undefined) ind_letter = 0;
if (marker[index].etat!='disaled') {
marker[index].etat = 'disaled';
marker[index].mark.setIcon('http://www.google.com/mapfiles/marker'+String.fromCharCode(65+ind_letter++)+'.png');
marker[index].infowindow.setContent('<div>'
+ '<b>'+document.ville.nom[index].value+'</b><br>'
+ '<p>Code postale : '+document.ville.cp[index].value+'<br>'
+ 'INSEE : '+document.ville.insee[index].value+'<br></p>'
+ '</div>');
}
}
</script>
</head>
<body>
<form name="ville" action="ville.php" method="post" enctype="multipart/form-data">
<div id="carte" style="width:100%; height:100%;" ></div>
<input type="hidden" name="nom" value=" La Ferté-Bernard ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72132">
<input type="hidden" name="latitude" value="48.183333">
<input type="hidden" name="longitude" value=".666667">
<input type="hidden" name="nom" value=" Cherreau ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72081">
<input type="hidden" name="latitude" value="48.2">
<input type="hidden" name="longitude" value=".683333">
<input type="hidden" name="nom" value=" Cormes ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72093">
<input type="hidden" name="latitude" value="48.166667">
<input type="hidden" name="longitude" value=".716667">
<input type="hidden" name="nom" value=" Souvigné-sur-Même ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72342">
<input type="hidden" name="latitude" value="48.216667">
<input type="hidden" name="longitude" value=".633333">
<input type="hidden" name="nom" value=" Avezé ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72020">
<input type="hidden" name="latitude" value="48.233333">
<input type="hidden" name="longitude" value=".683333">
<input type="hidden" name="nom" value=" Courgenard ">
<input type="hidden" name="cp" value="72320">
<input type="hidden" name="insee" value="72105">
<input type="hidden" name="latitude" value="48.15">
<input type="hidden" name="longitude" value=".733333">
<input type="hidden" name="nom" value=" Saint-Martin-des-Monts ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72302">
<input type="hidden" name="latitude" value="48.15">
<input type="hidden" name="longitude" value=".6">
<input type="hidden" name="nom" value=" La Chapelle-du-Bois ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72062">
<input type="hidden" name="latitude" value="48.216667">
<input type="hidden" name="longitude" value=".6">
<input type="hidden" name="nom" value=" Saint-Aubin-des-Coudrais ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72267">
<input type="hidden" name="latitude" value="48.166667">
<input type="hidden" name="longitude" value=".583333">
<input type="hidden" name="nom" value=" Saint-Jean-des-Échelles ">
<input type="hidden" name="cp" value="72320">
<input type="hidden" name="insee" value="72292">
<input type="hidden" name="latitude" value="48.133333">
<input type="hidden" name="longitude" value=".716667">
<input type="hidden" name="nom" value=" Préval ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72245">
<input type="hidden" name="latitude" value="48.233333">
<input type="hidden" name="longitude" value=".616667">
<input type="hidden" name="nom" value=" Villaines-la-Gonais ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72375">
<input type="hidden" name="latitude" value="48.133333">
<input type="hidden" name="longitude" value=".6">
<input type="hidden" name="nom" value=" Ceton ">
<input type="hidden" name="cp" value="61260">
<input type="hidden" name="insee" value="61079">
<input type="hidden" name="latitude" value="48.225">
<input type="hidden" name="longitude" value=".75">
<input type="hidden" name="nom" value=" Lamnay ">
<input type="hidden" name="cp" value="72320">
<input type="hidden" name="insee" value="72156">
<input type="hidden" name="latitude" value="48.116667">
<input type="hidden" name="longitude" value=".716667">
<input type="hidden" name="nom" value=" Dehault ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72114">
<input type="hidden" name="latitude" value="48.216667">
<input type="hidden" name="longitude" value=".566667">
<input type="hidden" name="nom" value=" Boëssé-le-Sec ">
<input type="hidden" name="cp" value="72400">
<input type="hidden" name="insee" value="72038">
<input type="hidden" name="latitude" value="48.133333">
<input type="hidden" name="longitude" value=".566667">
</form>
</body>
</html>A voir également
- Infowindows sur Maps Google ce comportement comme une infobulle
- Api google maps - Conseils pratiques -PHP
- Intégrer une google map dans un site web - Forum Java
- Api google maps javascript ✓ - Forum PHP
- Google mpas - Forum PHP
- Pile ou face google - Forum Visual Basic 6
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.