Plus de 800 icônes thématiques gratuites pour google maps. Je ne sais pas si vous utilisez Google Maps sur vos sites mais parfois il peut être intéressant de ne pas utiliser le pointer rouge (pin) par défaut proposé par l’application. En effet, prenons le cas d’une carte qui va présenter les différentes activités dans une zone géographique. Pour que l’expérience utilisateur soit parfaite il faut différencier les activités : piscine, tennis, équitation… et sur une carte la différenciation passe par les pointeurs! Voici l’image d’une carte des équipements sportifs de Lyon, du premier coup d’oeil on comprend les icônes et donc les activités.
La carte “live” est sur la page des activités sportives de Lyon, ici Les icônes utilisées sont designées par Nicolas Mollet et sont téléchargeables et utilisables librement pour vos projets Google Maps, une belle ressource de plus de 800 icônes entièrement personnalisables en terme de couleur! Pour jeter un oeil aux icônes et pointeurs de mapicons c’est ici.
Articles en rapport : Google Map API V3 : Placer un marker sur la carte - Code-Web.org. L'objectif de ce billet est de créer une carte Google Map sur laquelle nous localiserons un cinéma Pathé. Nous placerons à cette endroit un logo Pathé à la place de l'image classique des Marker Google Map. Enfin nous adjoindrons une fenêtre d'informations à ce Marker qui proposera de se rendre sur le site officiel du cinéma. Placer un Marker Nous allons utiliser l'objet Marker de l'API Google Map. Son constructeur prend un seul paramètre, un tableau statique d'options : position définit la position du Marker sur la carte et prend un objet de type LatLng.map définit la carte sur laquelle afficher le Marker et prend donc un objet de type Map.title définit le texte qui sera affiché au survol de la souris et prend une chaîne de caractères classique.
Vous pouvez observer le rendu de ce premier exemple. Personnaliser l'icône du Marker Nous allons maintenant remplacer l'image classique des Marker Google Map par une image de notre choix. Vous pouvez observer le rendu de ce deuxième exemple. Découverte de l'API Google Map V3 - Code-Web.org. Ce billet est le premier d'une petite série sur l'API Google Map V3 qui vous propose de démarrer facilement avec cette superbe API. Ce n'est pas que je veuille faire du lèche botte à Google, et je ne sais pas que ce que valent les API des concurrents, mais je dois tout de même reconnaître que mettre des cartes (interactives) sur un site n'a jamais été aussi simple.
Pré requis Pour aborder ce billet, vous devez connaître le HTML et le JavaScript. En effet, l'API Google Map repose sur ces deux langages. J'ouvre une parenthèse sur l'API Key, où clé API, qui était jusque là requise. Enfin, à tout moment vous pouvez consulter la documentation de l'API. Charger la librairie Ajoutez simplement entre les balise <head> et </head> de votre page le code suivant : Vous remarquez donc que nous chargeons simplement un fichier JavaScript qui définira toute ce dont nous aurons besoin pour utiliser la librairie. Notez la présence la variabale sensor pour laquelle nous avons donnée la valeur false.
<! Introduction à l'API Google Maps. Une API est une interface fournie par un programme informatique.
Elle permet l'interaction des programmes les uns avec les autres. D'un point de vue technique c'est un ensemble de fonctions, procédures ou classes mises à disposition par une bibliothèque logicielle, un système d'exploitation ou un service. Toute application Web peut autoriser ou non des développeurs tiers à utiliser une partie de ses fonctionnalités et ce de plusieurs façons : en téléchargeant une bibliothèque de fonctions pour l'inclure directement sur son site ; en récupérant une donnée précise en construisant une URL comme avec Google charts : ; comme Google Maps, en incluant directement la bibliothèque en ligne. On va inclure la bibliothèque Google Maps directement dans le code JavaScript de la page.
Exemple d'ajout d'une balise script pour inclure les fonctions de Google Maps dans l'application cible : On peut ajouter d'autres paramètres à l'URL pour inclure des librairies additionnelles :