Tutoriel: Comment réaliser une carte interactive avec MapAList et Google Maps.

Tutoriel: Comment réaliser une carte interactive avec MapAList et Google Maps.

INous allons voir ici comment créer une carte :

– indiquant plusieurs points sur une même carte– sur laquelle on peut régler le niveau de zoom – sur laquelle on peut éditer des bulles d'informations qui apparaitront en cliquant sur les

localisations.

A- Créer une carte sur Map A List1) Avant toute chose, il faut réaliser une feuille de calcul sur Google documents. Pour cela, il

faut vous connecter à votre compte Google (ou en créer un si vous n'en possédez pas encore) et cliquer sur documents, puis créer une feuille de calcul.

Dans cette feuille, intitulez chaque colonne en fonction des informations dont vous disposez sur les localisations à indiquer sur votre carte, comme par exemple:

– l'adresse– la ville– le code postal ( appelé ZIP dans MapAList)– le pays

Mais vous pouvez aussi intégrer jusqu'à deux informations supplémentaires, comme les numéros de téléphone, ou autre, qui apparaitront dans les bulles d'informations.

Astuce: Attention! Les accents ne marchent pas avec Map a List! Il faut les remplacer dans la feuille de calcul par les codes HTML. Exemple: Oléron = Oléron

2) Map A List – Step 1 : Une fois cette feuille de calcul crée, allez sur Map A List (www.mapalist.com) et identifiez vous. Dans l'écran qui suit, vous allez devoir entrer plusieurs données.

Il suffit de donner les information nécessaires, c'est à dire: – a) Choose Source Type: Google SpreadSheet– b) Select SpreadSheet: le nom de votre document Google.– c) Select worksheet: si vous avez plusieurs feuilles dans votre document, mais en général, il

convient de pas changer ce champs.– d) View Data Sampling: offre une vue de votre document à titre indicatif.

Voici une vu de l'écran une fois rempli:

Une fois cela fait, cliquez sur « Next »

3) Map A List – Step 2 :Dans la partie a), il va falloir faire correspondre les champs aux titres des colonnes de votre document Google:

– Address1 : adresse– Address2 : s'il y a un complément d'adresse– State: État– Zip: code postal– Country: pays– Latitude et Longitude

Dans la partie b), vous pourrez préciser les éléments que vous voulez faire apparaître dans les bulles pop-up., Pour cela, vous pouvez choisir un titre (Title) et un élément additionnel (téléphone etc.).

Ensuite, cliquez sur « Next ».

4) Map A List – Step 3 : Dans l'écran suivant, Map a List vous indique si toutes les adresses ont bien été trouvées et si vous pouvez passer à l'étape suivante. Quand toutes les localisations ont été trouvées, cliquez sur « Next ».

5) Map A List – Step 4 : Dans l'étape 4, vous avez la possibilité de:

– choisir quelles adresses vous souhaitez faire apparaître– comment vous souhaitez les faire apparaître. En effet, vous allez pouvoir choisir quelles

« puces » utiliser etc.

Pour sélectionner les adresses à faire apparaître, il faut cliquer sur la flèche du menu déroulant. Les options possibles sont les suivantes:

– Map all addresses : faire apparaître toutes les adresses avec la puce choisie.– Map all addresses (with unique pin images): chaque localisation aura une puce choisie au

hasard.– Group by distinct column values (using unique pin images) : trie les localisation en fonction

des informations fournies et attribue des puces différentes à chaque groupe.– Get directions: Faire apparaître les itinéraires pour se rendre aux localisations sélectionnées.– Map first 100 rows: ne faire apparaître que les 100 premières adresses.– Map fist half of rows: ne faire apparaître que la première moitié des adresses.– Map second half of rows: ne faire apparaître que la seconde moitié des adresses.

En cliquant sur Pin ou Image, vous pourrez choisir la puce que vous voulez pour localiser vos adresses:

Ici, nous avons choisi de faire apparaître toutes les adresses et les marquer d'une puce rose:

Une fois cela fait, cliquez sur « Next ».

6) Map A List – Step 5 :

Vous pouvez:

– donner un titre à votre carte– choisir le type de carte que vous désirez– choisir le zoom approprié– choisir ce qui va apparaître dans le footer de la carte.

Réglez comme vous le souhaitez. En cliquant sur « Save and View Map » vous verrez la carte apparaître.

Astuces:– Pas de panique: il est possible de continuer les modifications ensuite.– Toujours pas de panique : si vos modifications ne vous conviennent pas, vous pouvez

revenir au début en cliquant sur « Reset to default, Save & view map »– La carte n'est pas bien centrée? Map a List choisit le point central au hasard. Il suffit

donc de cliquer sur « Save and View Map » jusqu'à ce que cela convienne.– Une fois que la carte vous convient, cliquez sur la petite enveloppe en dessous de celle-

ci. Envoyez-vous un mail dans lequel le code HTML correspondant figurera.

B) Pour convertir cette carte en carte Google Maps:

La carte de Map a List est déjà satisfaisante mais on peut parfois rencontrer quelques inconvénients: impossible de scroller directement quand on arrive sur sa page internet etc.Bref, il peut être utile de convertir sa carte Map A List en carte Google Map.

1) Cliquez sous la carte sur la petite icône représentant une disquette : « Download KML/View in Google Earth » et enregistrez le fichier KML.

2) Rendez vous sur Google Maps, et cliquez sur « Mes cartes » puis « Créer une nouvelle carte »

3) A présent, vous pouvez donner un titre à votre carte et en faire une description. Ici, nous allons appeler cette carte, « Les points de Vente ». A présent, nous allons pouvoir importer notre carte Map A List, en cliquant sur « Importer »

La fenêtre suivante apparaît. Il suffit de parcourir et de selectionner le fichier Map A List que nous avons enregistré dans l'étape 1), puis cliquez sur « Transférer à partir du fichier ».

La carte s'affiche, telle qu'elle a été créée sur Map A List.

A présent, vous pourrez changer facilement le contenu des bulles en cliquant sur les puces, comme dans l'exemple suivant :

Astuce : S'il y avait des problèmes d'accents dans les bulles, vous pouvez les corriger ici!

4) une fois que vous avez opéré les modifications désirées, cliquez en haut à droite sur « Lien » puis sur « Personnaliser et prévisualiser la carte intégrée ».

5) Une nouvelle fenêtre s'ouvre. Ici vous pourrez:

- Régler la taille de la carte - Régler le zoom- Copier directement le code HTML

pour le dupliquer sur votre site!