Base de marqueurs

Navigation

en noir : code obligatoire
en rouge : explications
en vert : code personnalisable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>Base de marqueurs</title>
<style type="text/css">/* ... affichage tout écran ... */
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#positioncarte {
height: 100%
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// si true ombre des icone pas vu : ne fonctionne plus depuis v3.14
google.maps.visualRefresh = false;
//pour une grande quantité de marqueurs utilisation d'une table (array)
function initialize() {
var mapOptions = {
zoom: 10, // ici pas pris en compte le zoom est automatique
center: new google.maps.LatLng(37.8829,-4.7746),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var macarte = new google.maps.Map(document.getElementById('positioncarte'),
mapOptions);
setMarkers(macarte, familles);
}
/** base des marqueurs qui ont le même icône avec dans l'ordre : nom , latitude , longitude , ordre de placement , etc... */
// le contenu des infobulles :
var cont1 = '<h1>Santi y Jean-Pierre en Córdoba</h1>'+'<h2>Sanchez Peña, 14</h2>' +
'<img src="http://moreau.fr.free.fr/data_index/cap.gif" />' +
'¡ Buenos dias de la Plaza de las Cañas !<br />' +
'La <b>Plaza de las Cañas</b>, es uno de los lugares en los que se celebra el mercado medieval.' +
'Plaza situada a espaldas de la plaza de la Corredera. Es atravesada por la calle Sánchez Peña y desembocan en ella las calles Prensa y de la Cruz.' +
'<p>La <b>Plaza de la Corredera</b> es uno de los lugares más emblemáticos de la ciudad de Córdoba.' +
' Única plaza mayor cuadrangular de Andalucía. Situada en el centro de la ciudad, a la bajada de la Calle Rodríguez Marín o Espartería.' +
' Tiene su entrada y salida a través de los llamados Arco Alto y Arco Bajo. </p> ' +
'Pour en savoir plus : <a href="http://moreau.fr.free.fr" title="Le nouveau Lafayette-68" target="_blanck">l\'Univers Informatique</a><br />' +
'coordonnées : (37.882851,-4.774727)';
var cont2 ='bonjour !<br />'+'coordonnées : (43.122053,5.934913)';
var cont3 ='bonjour !<br />'+'coordonnées : (43.120513,6.126773)';
var cont4 ='bonjour !<br />'+'coordonnées : (43.241783,5.374498)';
var cont5 ='bonjour !<br />'+'coordonnées : (38.301307,-5.273558)';
var cont6 ='bonjour !<br />'+'coordonnées : (38.300912,-5.273859)';
var cont7 ='bonjour !<br />'+'coordonnées : (38.302739,-5.269974)';
var cont8 ='bonjour !<br />'+'coordonnées : (37.264804,-7.026764)';
var cont9 ='bonjour !<br />'+'coordonnées : (37.264804,-7.026764)';
var cont10 ='bonjour !<br />'+'coordonnées : (45.619942,0.166361)';
var cont11 ='bonjour !<br />'+'coordonnées : (47.245503,-1.519903)';
var familles = [
['Santi & Jean-Pierre', 37.882851,-4.774727, 5,cont1],
['Jean-Pierre & Santi', 43.122053,5.934913, 8,cont2],
['Pierre & Emmanuelle', 43.120513,6.126773, 7,cont3],
['Eric & Aline', 43.241783,5.374498, 6,cont4],
['Victoriano & Santitos', 38.301307,-5.273558, 3,cont5],
['Isabel', 38.300912,-5.273859, 2,cont6],
['Jose Miguel & Esperanza', 38.302739,-5.269974, 1,cont7],
['Juan Carlos & Pepa', 37.264804,-7.026764, 4,cont8],
['Jacques & Mimi', 37.264804,-7.026764, 9,cont9],
['Patrice & Françoise', 45.619942,0.166361, 10,cont10],
['Jean-Jacques & Muguette', 47.245503,-1.519903, 11,cont11],
];
function setMarkers(macarte, locations) { // fonction qui ajoute les marqueurs à la page
var icone = {
url: 'http://moreau.fr.free.fr/GmapAPIV3/images/home.png',
size: new google.maps.Size(32, 37), // partie de l'icône visible qui fait(32,37) après son redimenssionnement.
scaledSize : new google.maps.Size(32, 37), // redimenssionnement de l'icône .
origin: new google.maps.Point(0,0), // l'origine de l'image en haut à gauche.
anchor: new google.maps.Point(16,37) // le point d'ancrage de l'icône 16,37.
};
var clic = { // définit par un polygone (shape), zone cliquable de l'icône ; ici 4 coordonnées
coord: [0, 0, 0, 30, 32, 30, 30 , 0],
type: 'poly'
};
var frontieres = new google.maps.LatLngBounds(); // variable qui va définir les frontières de la carte
for (var i = 0; i < locations.length; i++) {
var colonne = locations[i];
var latlong = new google.maps.LatLng(colonne[1], colonne[2]); // 2ieme et 3ieme colonne de la table
var marqueur = new google.maps.Marker({
position: latlong,
map: macarte,
icon: icone,
shape: clic,
title: colonne[0], //indique le numéro 0 de la 1iere colonne dans la table
zIndex: colonne[3] //indique le numéro 4 de la 3ieme colonne dans la table
});
var infobulle = new google.maps.InfoWindow({content: colonne[4],maxWidth: 400}); //placement du contenu de l'infobulle maxWidth non obligatoire
google.maps.event.addListener(marqueur, 'click', (function(marqueur,infobulle)
{return function() {infobulle.open(macarte, marqueur);};
}(marqueur,infobulle))); //affichage des infobulles.
frontieres.extend(latlong); // choisit les valeurs extremes des frontières
}
macarte.fitBounds(frontieres); // définit les frontières de la carte
}
// fin de la fonction initialize
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="positioncarte"></div>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>