TutorielsPersonnaliser une carte Google Maps dans WebAcappella Responsive

Il n’y a rien de plus frustrant que de passer des jours à designer un site pour finir par tout gâcher avec une carte Google Maps aux couleurs fades et tellement impersonnelles. Ce temps est révolu car maintenant, vous pouvez Personnaliser une carte Google Maps dans WebAcappella Responsive !

 

Alors bien sur Google propose un éditeur en ligne pour personnaliser vous même une carte, mais cela reste fastidieux même avec la pléthore de tutoriels à ce sujet. C’est pourquoi sur Tonton du Web aujourd’hui, on vous propose beaucoup plus simple. Il existe un site, qui s’appelle : Snazzymap.com dans lequel se trouve pas moins de 2353 styles de Maps différents que vous pouvez utiliser.

Voici comment cela se passe, il vous faut ajouter un code dans un élément « code html » personnaliser ce code et y entrer un style récupéré sur le site Snazzy.com.

Commençons par le code d’intégration de la carte Google Maps :

Copiez ce code et ajoutez-le à votre site WebAcappella Responsive, en personnalisant les lignes suivantes :

  • Ligne 7 : la hauteur de votre carte
  • Ligne 22 : la valeur du zoom
  • Ligne 25 : l’endroit où s’ouvre la carte, entrez une latitude et une longitude entre les parenthèses. Indiquez également la ville.
  • Ligne 40 : la position du marqueur, entrez une latitude et une longitude entre les parenthèses. Normalement la même qu’en ligne 25
  • Ligne 42 : le nom du marqueur

Là, normalement vous devriez avoir une superbe carte Google Maps dans votre site WebAcappella Responsive. Mais il faut encore personnaliser les couleurs !

Allez sur le site Snazzy.com et choisissez un style de carte parmi les 2353 styles proposés ! Une fois votre style choisi, copiez le code JavaScript Style Array en cliquant le bouton « copy ».

Retournez dans le code de votre carte Google Maps à la ligne 26, et remplacez le style existant par celui que vous avez choisi. (pensez à laisser « styles: »)

Et voilà ! Vous savez à présent comment Personnaliser une carte Google Maps dans WebAcappella Responsive.

Si vous aimez personnaliser des GoogleMaps, ce plugin devrait vous plaire : Plugin Double Maps

Des bisous, des poutous, des poutous, des bisous.

 

8 Commentaires

  1. Bonjour,

    d’abord merci pour le travail fourni.
    Je suis confronté au problème suivant :
    J’ai inséré le code html (fourni par vos soins) dans une sous page (pied de page).
    Avant même d’y intégrer le code de la carte snazzymap mais en redéfinissant la latitude et longitude désirée, le niveau de zoom désiré également, la prévisualisation dans l’éditeur de WARC fonctionne parfaitement…les problèmes arrivent après.
    1er problème : en cliquant sur « Tester » le mode écran PC fonctionne correctement mais pas pour tablette/smartphone (il n’apparait rien)
    2ème problème : une fois publié rien n’est affiché que cela soit un PC ou une tablette. J’ai un message d’erreur à la place de la carte qui me dit: « Petit problème… Une erreur s’est produite
    Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript. »
    Pourriez-vous m’aider ?
    Merci.

  2. Bonsoir,

    Comment faire pour afficher par exemple 3 adresses au même style mais chaque adresse sur une carte différente.
    J’ai tenté 3 éléments html en modifiant la lat et long mais cela ne fonctionne pas. Cela n’en affiche qu’une seule.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier un commentaire