Comment insérer l'API de carte Yandex sur une page. Cartes en ligne. Qu'est-ce que l'annuaire Yandex

La carte de localisation sur le site Web avec l'adresse de l'organisation constitue un point de référence très pratique pour les utilisateurs. D'accord, il est très pratique d'aller sur le site et de voir la localisation de l'entreprise sans ouvrir d'onglets supplémentaires pour rechercher l'adresse sur la carte. C’est un petit plus supplémentaire dans la fidélité du client envers l’organisation.

En règle générale, la carte de localisation est placée sur la page de contact sous les informations de contact spécifiées. Il est inséré à l'aide d'un code de programme spécial (script). Le moyen le plus simple d'obtenir un tel script consiste à utiliser des solutions API prêtes à l'emploi de Google ou de Yandex. Pour insérer une carte sur le site, aucune connaissance en programmation n'est nécessaire ; en suivant les instructions ci-dessous, vous recevrez une carte claire et pratique.

Insérer une carte à l'aide de Yandex Maps

1. À l'heure actuelle (début 2013), le concepteur de cartes de Yandex est disponible en version 2.0, très pratique et logiquement compréhensible. Vous n'avez même pas besoin d'être un utilisateur autorisé pour créer une carte. La première étape consiste à créer la carte elle-même avec l'adresse. Pour ce faire, suivez le lien http://api.yandex.ru/maps/tools/constructor/ et entrez l'adresse de l'entreprise dans le champ de saisie inférieur. Après avoir cliqué sur le bouton « Rechercher », le système affichera les options pour les adresses trouvées.

2. Placez un point à l'adresse souhaitée et indiquez le nom de l'organisation dans le champ de description. Il est préférable de choisir la couleur du point en fonction du style du site sur lequel la carte sera située. Le constructeur vous permet également de marquer d'autres points de repère sur la carte, par exemple de grands objets bien connus, d'étirer la carte à la taille souhaitée, de tracer un itinéraire depuis un arrêt de transport à l'aide de l'outil de dessin au trait et de modifier l'échelle.

3. Ensuite, accédez à l'onglet d'affichage. Ici, vous pouvez choisir si votre carte sera statique ou interactive. Il est préférable de choisir la deuxième option, afin que l'utilisateur puisse visualiser la zone à proximité et se repérer.

4. L'onglet "Embed code" vous propose de lire les conditions d'utilisation. Après l'avoir confirmé, vous verrez le code d'insertion. Vous pouvez le modifier un peu, par exemple, supprimer le lien vers Yandex, ajuster la taille plus précisément, mais il vaut mieux ne pas apporter de modifications significatives.

5. Copiez ce code et collez-le sur la page de contact à l'aide d'un éditeur HTML après le texte.

6. Enregistrez les modifications apportées et vérifiez le résultat sur la page du site.

Insérer une carte à l'aide de Google Maps

1. L'algorithme des actions est similaire à celui décrit ci-dessus. Suivez le lien http://maps.google.ru/maps et saisissez l'adresse de l'organisation dans la barre de recherche. Vous pouvez également voir à quoi cela ressemble depuis un satellite. Ensuite, pour obtenir le code, cliquez sur le signe du lien à gauche. Vous pouvez copier le code existant ou cliquer sur le lien « Configurer et prévisualiser la carte intégrée ».

2. Lorsque vous sélectionnez Modifier, une fenêtre supplémentaire s'ouvrira dans laquelle vous pourrez ajuster ses dimensions.

3. Copiez le code reçu et collez-le via un éditeur HTML sur la page du site. Il aura exactement la même apparence que dans l'aperçu. Contrairement aux cartes Yandex, les cartes Google sont toujours uniquement interactives : il y a moins de possibilités d'éditer la carte elle-même, mais vous pouvez regarder la zone depuis un satellite, le relief avec les noms des objets et une carte 3D.

Un jour, alors que j’ai décidé de me rendre au siège d’une entreprise, j’ai été confronté au fait que le siège de l’entreprise avait déménagé. Et sur la porte de l'ancien bureau, il y avait un morceau de papier collé avec l'adresse du nouveau bureau. Un problème : d'après cette fiche, j'ai cherché un nouveau bureau pendant environ une heure, alors qu'il n'était qu'à dix minutes à pied de l'ancien. Et tout cela parce qu’il n’y avait pas de carte sur le site Web de l’entreprise indiquant l’emplacement du nouveau bureau.

En fait, publier une carte sur un site Web avec l’adresse indiquée est un jeu d’enfant. Malheureusement, beaucoup ne le font pas. Oui, si vous n'avez qu'un blog, il est peu probable que la carte vous soit utile. Mais si votre site Web est représentatif d'un véritable bureau hors ligne, une carte sur le site Web est simplement nécessaire. Et peu importe qu’il s’agisse du bureau d’une entreprise multimilliardaire ou simplement du site Internet d’un atelier local. Voyons comment placer une carte sur votre site Web ou votre blog.

Dans la partie russophone d'Internet, les cartes les plus populaires proviennent de deux sociétés : Google et Yandex. Je ne dirai pas quel service de l’entreprise est le meilleur, mais aujourd’hui je vais vous parler du service de Google.

Il existe plusieurs façons d’insérer Google Maps dans votre site Web, et peu importe que le site fonctionne sur le CMS WordPress ou uniquement sur HTML.

Méthode numéro 1.

Tout d'abord, le service vous dira que vous n'avez pas de carte. Eh bien, vous devez le créer. Pour ce faire, vous devez cliquer sur l'icône «+»

Il existe un certain nombre d'éléments supplémentaires : sélectionner des objets, ajouter un marqueur, tracer une ligne, ajouter un itinéraire, mesurer une distance ou une surface.

En insérant le marqueur à l'endroit souhaité, vous pourrez insérer le nom du lieu et sa description.

Si nécessaire, vous pouvez ajouter un itinéraire plus facile à parcourir.

Ajoutez un titre et une description de la carte.

Configurer l'accès

Et maintenant, vous pouvez coller le code résultant sur le site et modifier immédiatement les dimensions.

Et c'est ce qui arrivera en conséquence

(bonne chose), aujourd'hui, nous parlerons à nouveau du service de Yandex et encore des cartes, mais pas du plastique ou des cartes à jouer, mais des cartes de zone. Considérons le concepteur de cartes de Yandex, avec lequel vous pouvez créer, par exemple, une carte de l'itinéraire jusqu'à votre bureau et l'accrocher sur le site Web. L'article fournit des instructions détaillées pour configurer le service Yandex Maps pour la page de contact d'un site Web personnel.

La capacité d'aider les clients à arriver au bon endroit est une contribution significative au développement de l'entreprise : plus les gens arrivent là où ils doivent être, plus les revenus et les bénéfices seront élevés. Ainsi, si votre entreprise est liée d’une manière ou d’une autre à des objets au sol, vous devez absolument insérer une bonne carte sur votre site Web.

Pourquoi avez-vous besoin d’une carte interactive ?
  • Pratique pour le client - il est facile de planifier un itinéraire en tenant compte de tous les changements en cours, puisque Yandex saisit rapidement les données sur les réparations et les nouveaux bâtiments sur ses cartes.
  • C'est pratique pour le propriétaire du site : tous les ajustements sont effectués automatiquement sur la carte ; il vous suffit d'insérer la carte une fois dans le site, puis les mises à jour sont téléchargées à partir de la base de données Yandex elle-même.
  • Augmente l’autorité et le niveau de confiance dans l’organisation. Bien que n'importe quel bureau de montage de caricatures puisse fabriquer un tel gadget, à un niveau subconscient, un site avec une carte interactive est mieux perçu.
  • Autrefois, adresses des bureaux, itinéraires d'accès et de déplacement, divers objets intéressants, etc. marqué sur des images représentant la carte et publié sur le site Web sous forme de fichier jpg ou png ordinaire. Le problème était qu'ils ne pouvaient pas prendre en compte les réparations temporaires, les embouteillages ou autres changements de terrain, et n'étaient pas en mesure de suggérer des itinéraires individuels depuis différentes directions.

    Avec le développement de services Internet tels que Yandex Maps et Google Maps, il est devenu possible de créer des cartes vivantes et interactives. Ceux-ci peuvent être tournés dans différentes directions, modifier l'échelle, définir des itinéraires à partir de différents points, planifier vos déplacements en tenant compte des embouteillages, et bien plus encore.

    La présence d'un itinéraire pratique sur la page contact est désormais une règle de bonne forme pour toute entreprise.

    Et afin de vous aider à rendre votre ressource Web plus conviviale pour les gens, je vais vous expliquer comment ajouter une carte Yandex à votre site ; cela se fait très facilement à l'aide d'un constructeur spécial (pas plus difficile que).

    Concepteur de cartes Yandex

    Si vous n'avez pas de compte sur Yandex, vous devrez en créer un, car sans cela, vous ne pourrez rien construire ; le service vous demandera de vous connecter ou de vous inscrire. Il n'y a pas lieu d'avoir peur, l'inscription signifie créer une boîte aux lettres sur Yandex. Même si vous n'en avez pas besoin pour travailler avec le courrier électronique, il sera utile pour d'autres services de moteurs de recherche, par exemple Yandex Metrica ou Yandex Webmaster.

    La procédure commence à partir de cette page – tech.yandex.ru/maps/tools/constructor/

    Puisque vous lisez cet article, cela signifie que vous vous connectez pour la première fois et que vous n'avez aucune carte enregistrée précédemment, il vous suffit de sélectionner le bouton jaune de gauche « Créer une nouvelle carte ». À partir de ce moment, la formation de paramètres de carte individuels pour la zone souhaitée commence.

    L'astuce est que vous pouvez insérer non seulement une carte Yandex avec une adresse exacte, mais une carte avec n'importe quel nombre d'objets mis en évidence avec différents marqueurs et couleurs - objets, points, itinéraires.

    Tous les réglages sont effectués dans le concepteur visuel, aucun code ne devra être modifié, le travail d'adaptation diffère peu de l'utilisation habituelle des cartes Yandex par l'utilisateur. Commençons par ajouter des objets.

    Ajout d'objets

    Le premier outil sera le formulaire de recherche, situé en haut de la carte. Avec son aide, nous pouvons trouver le point souhaité par adresse, coordonnées ou nom. Saisissez les données de la demande dans le champ, exemple avec l'adresse « Moscou, Place Rouge » :

    Après avoir cliqué sur le bouton Rechercher, un point apparaîtra sur le terrain correspondant à l'emplacement de l'objet spécifié. Vous pouvez insérer de nombreux objets. Exemple avec le Kremlin :

    Chaque point peut être configuré de manière à différer des autres objets et à être facilement reconnaissable sur la carte - la couleur et la forme changent, et vous pouvez également ajouter une icône unique à l'intérieur si vous cliquez sur le menu déroulant « Contenu ». Ceci est pratique s'il y a beaucoup d'objets sur la carte en cours de création et qu'ils peuvent être classés en différents groupes.

    Sur la gauche se trouve une liste de toutes les adresses marquées sur la carte.

    Changer l'échelle et la position

    À l'aide des touches « + » et « - » situées dans la partie supérieure gauche de la mise en page, l'échelle optimale est définie. Une carte complète de la Russie n'est pas nécessaire pour naviguer dans le centre de Moscou et, si vous indiquez un objet ponctuel dans une ville, il est préférable d'ajuster l'échelle à un niveau où les noms des rues et des maisons environnantes se distinguent.

    Pour déplacer la carte dans différentes directions, vous devez la saisir en appuyant sur le bouton gauche de la souris et la déplacer où vous le souhaitez.

    Contours d'objets (polygones) et lignes

    S'il est nécessaire de mettre en évidence les contours d'un élément sur des cartes, lorsque l'indication avec un point ne suffit pas, nous utilisons l'outil « Polygones ». En plaçant un point après l'autre, on obtient un périmètre rempli à l'intérieur d'une certaine couleur.

    Il peut y avoir n'importe quel nombre de points, c'est pourquoi la figure ombrée sur la carte permet n'importe quel degré de complexité. Vous pouvez terminer la construction du contour en cliquant sur le dernier point de consigne ou en passant à n'importe quel autre bouton du concepteur (par exemple, sur une ligne). J'ai souligné les contours du Kremlin de Moscou le long de son mur :

    Les lignes sont tracées à l'aide du bouton « Lignes ». Toutes les actions sont similaires à l'outil précédent, seul l'espace entre les points n'est pas repeint. À l'aide de lignes sur la carte Yandex, vous pouvez tracer des itinéraires de circulation (passage, passage).

    De cette façon, vous pouvez afficher l'itinéraire optimal pour faire du tourisme.

    Nous confirmons le point final en cliquant à nouveau dessus avec la souris, il y aura un menu « Supprimer » / « Terminer ». Après avoir sélectionné la fin, un champ s'ouvre pour étiqueter le point final et définir les paramètres de ligne (épaisseur, couleur, transparence).

    Nous complétons le parcours en cliquant sur « Terminer ».

    Vue cartographique et superposition du trafic

    La touche finale qui permet de donner à la carte des propriétés spéciales est l'application des embouteillages ; il y a un bouton séparé pour cela. Honnêtement, je doute qu'une telle option soit souvent demandée pour les cartes insérées dans un site Web, car les gens utilisent plus souvent des navigateurs pour conduire une voiture que des cartes intégrées.

    Mais la commutation des modes entre circuit, satellite et hybride peut être utile.

    Une vue satellite donne aux objets environnants leur aspect réel et il est plus facile de les reconnaître sur une telle carte que les rectangles schématiques d'un diagramme.

    Titre et description

    Pour que nous puissions revenir à la carte créée à l'avenir pour la corriger ou récupérer à nouveau le code d'intégration, nous devons lui trouver un nom et une description, puis l'enregistrer.

    Code de la carte à insérer sur le site

    Notre carte est déjà prête et nous devons maintenant obtenir son code pour l'insérer dans le site. Yandex permet de faire :

    • carte interactive (dont j'ai parlé dès le début) ;
    • statique - une image ordinaire, uniquement avec un code sophistiqué, vous ne pouvez rien y déplacer, de plus, le nombre maximum d'objets est limité ;
    • imprimé – fichier image de haute qualité, tous les pays ne sont pas pris en charge, principalement la CEI et la Turquie, les versions satellite et hybride ne sont pas prises en charge.

    Le choix entre eux sera affiché immédiatement après la sauvegarde.

    Dans le même menu, vous pouvez définir la taille finale en pixels. Vous pouvez le définir manuellement ou en déplaçant les coins du cadre autour de la zone sélectionnée à droite. La case à cocher « Étirer en largeur » fait que la carte occupe tout l'espace du site, en s'appuyant sur les bords du bloc où elle est affichée.

    A ce stade, il est possible de revenir à l'édition de la carte : dans la partie supérieure gauche de la fenêtre se trouve une inscription correspondante avec une flèche.

    Le code final apparaît après avoir cliqué sur le bouton « Obtenir le code de la carte », le mien ressemble à ceci :

    Lorsque vous sélectionnez une carte imprimée, un choix de format de fichier sera ajouté - png ou jpg et, par conséquent, il n'y aura pas de code - un bouton de téléchargement apparaîtra à la place. Un tel fichier peut également être inséré sur le site, mais vous devrez le télécharger sur l'hébergement et, si votre site ne dispose pas d'éditeur visuel, vous devrez écrire l'image dans des balises HTML (src)

    Comment insérer une carte Yandex sur un site Web

    Nous avons reçu le code, nous devons maintenant le transférer sur notre ressource Web. N'importe quel endroit peut être placé, à condition que les dimensions soient adaptées. Si vous utilisez des designers ou des éditeurs visuels, n'oubliez pas de les passer en mode texte (HTML) lors de l'insertion du code. Comme ça:

    Carte que j'ai faite

    Voilà ce que j'obtiens après tous les réglages :

    Cet élément convient à tout le monde - les objets nécessaires sont mis en évidence et l'échelle est sélectionnée comme prévu. De plus, le service Yandex permet à l'utilisateur de déterminer sa position (flèche dans le coin supérieur gauche) et de créer un itinéraire individuel vers le point souhaité.

    La carte peut être agrandie en plein écran à l'aide du bouton dans le coin supérieur droit sous la forme de deux flèches divergentes dans des directions différentes. Parlons maintenant des plugins.

    Plugins pour WordPress et autres CMS

    Auparavant, il était plus difficile de créer des cartes et de nombreuses personnes utilisaient des plugins spéciaux à ces fins. Par exemple, pour WordPress, il y avait celui-ci - Yandex Maps pour WordPress. Désormais, aucune API n'est nécessaire et tout utilisateur ayant un minimum de connaissances peut comprendre comment tout configurer, donc je ne vois pas l'intérêt des plugins. Le plugin mentionné ci-dessus en est la preuve - il n'a pas été mis à jour depuis plus de 2 ans, apparemment il n'y a pas de demande.

    Parmi les plus pertinentes, j'ai trouvé l'API Yandex Maps (mise à jour il y a 4 mois) et Oi Yandex.Maps pour WordPress (il y a 5 mois). Si vous souhaitez jouer avec des plugins, vous les trouverez dans le référentiel WordPress en effectuant une recherche et comment installer des plugins.

    Vous avez constaté par vous-même que préparer une carte et la placer sur votre ressource est bien plus rapide que de lire ces instructions, désormais chacune de vos ressources ravira ses visiteurs avec une fonctionnalité aussi pratique.

    Aujourd'hui, ce qui est important pour les entreprises hors ligne n'est pas un signe, mais des blocs contenant des informations sur l'établissement sur le côté droit des résultats de Google et Yandex. Parlons de la façon d'ajouter des données d'entreprise aux cartes.

    Comment ajouter une entreprise à Google Maps

    Vous devez créer une page dans le service Google Mon entreprise.

    Qu'est-ce que cela donne ? Tout d'abord, les possibilités :

    • informer les utilisateurs sur les prix, les heures d'ouverture, les événements et les actualités de l'organisation ;
    • surveiller les avis et y répondre rapidement ;
    • analyser les vues d'informations commerciales (nombre de vues de données de l'entreprise, vues de photos, vidéos) ;
    • joindre des cartes avec l'itinéraire vers l'organisation ;
    • renforcez votre réputation grâce aux avis des utilisateurs.

    Blocage Google My Business dans les résultats de recherche

    Algorithme d'ajout d'entreprise.

    Si vous ne recevez pas de courrier sous 3-4 semaines, n'hésitez pas à écrire au support technique : « La lettre n'est pas arrivée, que dois-je faire ? Google vous demandera de terminer le processus de vérification manuelle.

    Pour ce faire vous devrez envoyer plusieurs photos :

    9. Vous serez ensuite redirigé vers le compte personnel de votre entreprise :

    Sur la page « Informations », vous devez fournir les informations les plus complètes sur votre entreprise :

    • ajoutez des catégories supplémentaires qui correspondent à vos activités ;
    • ajoutez une description de votre entreprise ;
    • indiquer les heures d'ouverture;
    • méthodes de paiement pour les biens et services ;
    • ajouter des photos et des vidéos ;
    • ainsi que des informations complémentaires.

    Dans la description de votre entreprise, essayez d’écrire aussi précisément que possible quelle est exactement votre entreprise : quels produits ou services vous proposez.

    Plus les informations sur votre entreprise sont complètes et de qualité, plus il est probable que les utilisateurs de Google les verront.

    Très souvent, lors de la création d'un site Web, il devient nécessaire d'y insérer une carte qui indiquerait l'emplacement de votre organisation. En fait, une carte sur le site est très pratique : tout d’abord pour vos utilisateurs. Ils pourront immédiatement, sans quitter votre ressource, voir comment ils peuvent vous trouver, ce qui se trouve à proximité et déterminer à quelle distance votre organisation se trouve de leur emplacement. Tout le monde ne sait pas comment insérer une carte sur un site Web. Et c’est très très simple à faire !
    Dans cet article, je vais vous expliquer et vous montrer comment, en quelques minutes seulement, vous pouvez insérer une carte avec l'emplacement souhaité sur les pages de votre site Web.

    Comment insérer une carte sur un site Web

    Ainsi, pour insérer une carte sur le site, nous utiliserons un service de Google.

    1. La première chose que nous devons faire est d’aller sur le site Web de Google Map.

    2. Maintenant, afin d'effectuer toutes les opérations dont nous avons besoin, il est préférable de passer à « l'interface classique ».

    Pour ce faire, cliquez sur l'icône de point d'interrogation dans le coin inférieur droit de l'écran.

    Un petit panneau de menu coulissant s'ouvrira devant vous, dans lequel vous devrez sélectionner « Interface classique ».

    Après cela, une autre fenêtre contextuelle apparaîtra dans laquelle il vous sera demandé d'indiquer pourquoi vous souhaitez utiliser l'interface Classic. Vous pouvez cocher l'un des éléments, ou vous ne pouvez pas le cocher, mais cliquez immédiatement sur le lien bleu « Interface classique » juste en dessous.

    Après cela, vous accéderez à l'interface classique de Google Maps, où nous avons tout ce dont nous avons besoin pour placer la carte sur la page du site.

    3. Saisissez maintenant l'adresse souhaitée dans le champ de saisie de l'adresse. N'oubliez pas que vous devez indiquer le pays, la ville, la rue et la maison, c'est-à-dire l'adresse complète.

    En conséquence, vous recevrez votre position sur la carte, marquée d'un marqueur rouge.

    4. Nous devons maintenant importer le code d'intégration dans notre page Web et définir certains paramètres.

    Pour obtenir le code d'intégration, nous devons cliquer sur l'icône pour obtenir le lien ou le code (il se trouve à droite de l'icône de l'imprimante).

    5. Nous nous intéressons ici au code HTML à ajouter au site web (deuxième champ).

    Également dans ce code, vous pouvez voir certains paramètres qui peuvent être modifiés. Ce sont les dimensions de la carte, c'est-à-dire sa hauteur et sa largeur. Vous pouvez également définir un cadre pour la carte. Par défaut, la valeur du cadre est zéro, mais vous pouvez la modifier en définissant, par exemple, un.

    Si vous en avez besoin, modifiez ces paramètres, bien que vous puissiez le faire à partir du code de la page Web. Si ce n'est pas nécessaire, copiez simplement l'intégralité du code.

    6. Il ne reste plus qu'à coller le code copié à l'endroit de votre page Web où vous souhaitez voir la carte.

    Vous pouvez créer un bloc « div » distinct spécifiquement pour votre carte, que vous pourrez ensuite styliser via un fichier de feuille de style.

    Je vais insérer ma carte ici. Voyez à quoi cela ressemblera.

    En conséquence, l'utilisateur verra votre emplacement marqué par un marqueur. Il pourra déplacer la carte, zoomer et dézoomer.

    Une fenêtre avec votre adresse s'affichera également au-dessus du marqueur. Et ci-dessous il y aura un lien pour visualiser la carte à grande échelle.

    Ça y est, tout est très simple, fonctionnel et pratique.

    Profitez-en pour votre santé !

    Je serai heureux si cette leçon vous est utile. En guise de remerciement, laissez vos commentaires et partagez l'article en utilisant les boutons des réseaux sociaux situés juste en dessous.

    Abonnez-vous également aux mises à jour du blog si vous n'êtes pas déjà abonné. Je vous promets beaucoup de matériel utile.

    Anna Kotelnikova était avec vous.

    Bonne chance à vous et à bientôt.

    Avez-vous aimé l'article? Partager avec des amis: