Un affichage personnalisé des cartes
La page inc-gis_map.html du plugin Gis fait un sacré boulot en Javascript. Merci aux développeurs ! Tout est prédéfini à l’avance. Et si vous n’êtes pas satisfait de la manière dont l’information est traitée et affichée en final sur la carte, alors vous avez intérêt à l’éviter et à créer vous-même votre propre script d’affichage Google.
Vous avez 2 possibilités : soit vous modifiez le script GIS (page inc-gis_map.html), soit vous modifiez le squelette.
Dans mon cas, j’ai modifié la page localiser.html du squelette Multi-saisons. Le script Google Maps n’est plus appelé par une inclusion GIS (inc-gis_map.html) mais il est directement intégré dans le head de la page localiser.html :
<script type="text/javascript">
//<![CDATA[
// Crée des marqueurs cliquables
function createMarker(point,html) {
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function initialize() {
if (GBrowserIsCompatible()) {
// Crée une carte appelée map aux coordonnées indiquées avec niveau de zoom et type de carte
var map = new GMap2(document.getElementById("map"));
<BOUCLE_2(spip_gis) {id_article}>
map.setCenter(new GLatLng(#LAT, #LONX), 12, G_PHYSICAL_MAP);
// Récupère la trace kml du fichier en téléchargement et l'affiche
<BOUCLE_TRACE_KML(DOCUMENTS){id_article}{extension=kml}{0,1}>
var kml = new GGeoXml("#URL_SITE_SPIP/#URL_DOCUMENT");
map.addOverlay(kml);
</BOUCLE_TRACE_KML>
// Création de l'icône du marqueur
var blueIcon = new GIcon();
blueIcon.image = "http://clic0.free.fr/gpx/marker_punaise_bleue.png";
blueIcon.shadow = "http://clic0.free.fr/gpx/marker_punaise_bleue_shadow.png";
blueIcon.iconSize = new GSize(32, 32);
blueIcon.shadowSize = new GSize(59, 32);
blueIcon.iconAnchor = new GPoint(6, 20);
blueIcon.infoWindowAnchor = new GPoint(5, 1);
// Création de l'option du marqueur
markerOptions = { icon:blueIcon };
// Ajoute un marqueur personnalisé au point donné
var point = new GLatLng(#LAT, #LONX);
var marker = createMarker(point,'<div class="boite"><a href="../../spip.php?page=article&id_article=#ID_ARTICLE" target="_top"><b>[(#TITRE|textebrut|addslashes)]</b></a> : [(#DESCRIPTIF|lignes_longues{40})]</div>')
map.addOverlay(marker);
</BOUCLE_2>
// Ajoute sur la carte les boutons de Zoom et type de Vues
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.addMapType(G_PHYSICAL_MAP);
// Affiche les coordonnées de la carte à chaque recentrage dans un div nommé message situé sous la carte
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
}
//]]>
}
</script>- Pour le body :
<body onload="initialize()" onunload="GUnload()">
- Et un petit peu plus loin toujours dans cette même page :
<div id="message"></div>
<div id="map" style="width: 460px; height: 400px"></div>
Bien sûr, certaines fonctionnalités disparaissent mais au moins, ca fait exactement ce que vous voulez ! Exit la mémorisation du type de carte choisie dans l’interface privée (carte normale, hybride ou satellite) ainsi que le marqueur. Perso, je n’ai pas besoin de marqueur et le choix du type de carte se fait directement par l’intermédiaire des boutons sur la carte elle-même.
Voir >> ici << l’exemple correspondant
Il est possible de faire apparaître une info-bulle avec un contenu SPIP, le chapeau par exemple, directement sans cliquer nulle part. Voici d’autres exemples :
Routage via Google Maps API (géolocalisation)
Utilisation de la fonction GGeoXml (tous les marqueurs sont bleus et il y a un bouton ON/OFF) avec un recentrage de la carte au milieu de l’ensemble des marqueurs
Recherche d’un lieu avec une adresse
Un affichage personnalisé des commandes Google et des coins arrondis qui fonctionnent même sous IE6 et 7
Vraiment, vous pouvez faire afficher ce que vous voulez. Consultez la doc de Googlemaps, c’est plein de ressources !
clic2fois
bio
Navigation
Lettres d'infos |
News | Plan du site
Kiosque web |
Glossaire |
Un affichage personnalisé des cartes
Bonsoir,
après moultes recherches infructueuses (malgre les tentatives diverses) sur comment donner des coins ronds a une carte gmap carrée, je tombe miraculeusement chez vous. j’en tombe de ma chaise, et bien sur outre la jolie ballade dans votre coin, j’aimerais bien aussi avoir des infos sur comment faire ces jolis coins ! :)
j’utilise l’API V3 pour spip. MErci d’avance.
Paul
Coins arrondis pour les cartes Googlemaps
Je ne m’en souviens pas du tout. Après avoir un peu regardé, peut-être faut-il mettre une option :
{rounded=true}
dans le code du plugin Gis escoitar, ce qui peut donner :
<BOUCLE_art_gis(ARTICLES){id_article}>
<INCLURE{fond=inc-gis_map}{id_rubrique}{id_mot}{id_auteur}{recherche}{id_article}{zoom=11}{control=custom}{rounded=true}{latit}{lonxit}{type=terrain}>
</BOUCLE_art_gis>