Api Google Maps flèche Trucs Et Astuces flèche Comment modifier l'aspect et l'emplacement des mentions de copyright sur une carte.

DÉPLACER ET AJUSTER LE COPYRIGHT SUR UNE CARTE

Article créé le : 19/01/2009
Dernière modification le : 25/03/2009

Présentation

Lorsque l'on créé une carte de petite taille, on se retrouve, la plupart du temps, avec un copyright qui déborde de la carte, nuisant ainsi à l'esthétique générale de la page. Grâce au CSS il est possible de résoudre ce problème d'affichage.

Lisez : Les conditions générales d'utilisation de Google Maps.

une carte, dont la largeur est de 238 pixels, le copyright déborde de celle-ci (voir en bas en gauche).
L'exemple à ne pas suivre : la suppression de toutes les mentions de copyright et des conditions d'utilisation.
Déplacement du copyright vers le haut de la carte avec modification de la couleur et de la taille des caractères.

Résultat

Dans la carte proposée ci-dessous, le copyright "Données cartographiques © 2010 Télé Atlas" est affiché, en haut à droite, en caractères blancs sur fond rouge.

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "MaCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var MaCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • </script>
  • <style type="text/css">
  • <!--
  • #EmplacementDeMaCarte div span {
  • position: absolute;
  • top: -350px;
  • right: 0px;
  • padding: 0 5px;
  • font-size: 12px;
  • background-color: #f00;
  • color: #fff;
  • font-weight: bold;
  • }
  • -->
  • </style>
  • </head>
  •  
  • <body>
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px;"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est 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>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • MaCarte.setCenter(new GLatLng(47.341571,0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • </script>
  • <style type="text/css">
  • <!--
  • #EmplacementDeMaCarte div span {
  • position: absolute;
  • top: -350px;
  • right: 0px;
  • padding: 0 5px;
  • font-size: 12px;
  • background-color: #f00;
  • color: #fff;
  • font-weight: bold;
  • }
  • -->
  • </style>
  • </head>
  •  
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px;"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est 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>

Explications

Lorsque votre carte est placée dans une balise <div> ayant pour identifiant EmplacementDeMaCarte (<div id="EmplacementDeMaCarte"></div>) Google insère à l'intérieur de cette <div> du code permettant d'afficher la carte demandée, mais également, le logo, les mentions de copyright et le lien "Conditions d'utilisation".

Ce code n'est pas visible directement dans le code source de la page. Par contre, en utilisant Firebug et Firefox vous allez pouvoir visualiser les lignes suivantes :


<div id="EmplacementDeMaCarte">



... code inséré par Google (non visible dans le code source de la page, mais visible à l'aide de Firefox + Firebug) ...



<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">

<span/>

<span>Données cartographiques ©2009 Télé Atlas - </span>

<a href="http://www.google.com/intl/fr_ALL/help/terms_maps.html" target="_blank" style="color: rgb(119, 119, 204);">Conditions d'utilisation</a>



... code inséré par Google (non visible dans le code source de la page, mais visible à l'aide de Firefox + Firebug) ...



</div>

A la lecture du code ci-dessus, on s'aperçoit que :

le copyright "Données cartographiques ©2010 Télé Atlas - " est contenu dans :

  • une balise <span>,
  • elle même contenue dans une balise <div>,
  • elle même contenue dans la balise <div> ayant pour id="EmplacementDeMaCarte".

Il suffit donc de déclarer, à l'aide de CSS, de nouvelles caractéristiques à la balise <span> .

Exemple (code à placer entre les balises <head></head> ) :


<style type="text/css">

<!--

#EmplacementDeMaCarte div span {

	position: absolute;

	top: -350px;

	right: 0px;

	padding: 0 5px;

	font-size: 12px;

	background-color: #f00;

	color: #fff;

	font-weight: bold;

}

-->

</style>