Ajout à Google Maps. Insérer une carte Google Maps. Plugin Google Maps

Salut tout le monde! Aujourd'hui, nous allons apprendre non seulement comment installer une carte Carte Google s à votre site Web (n'importe quelle page html), mais aussi pour styler cartes Google Cartes - modifiez les couleurs de la carte et ajoutez une description au marqueur de carte Google Cartes, modifiez l'apparence (image) du marqueur et ajoutez-y votre description. Allons-y!)

Remarque importante.

Nous ferons toutes nos expérimentations localement. Pour utiliser Google Maps sur votre site Web, vous devez obtenir une clé d'authentification spéciale. Ce n'est pas difficile à faire. Nous omettrons sa réception et ne le considérerons pas.

1. Insérez Google Maps Tout d’abord, créons une page HTML et insérons-y une carte Google Maps. Nous ferons cela avec en utilisant Google API de cartes. Autrement dit, suivons la voie avancée. Il convient de noter que Google dispose d'une bonne documentation et d'instructions en russe et en anglais pour utiliser Google Maps. Les programmeurs peuvent donc y accéder immédiatement. Si vous voulez avoir une compréhension compréhensible leçon étape par étape

- alors reste. Maintenant, je vais décrire tour à tour les actions qui doivent être effectuées, puis je fournirai le code de la page avec des commentaires. Nous créons d'abord Page HTML

. Alors:

Sur la page, nous créons un élément à l'intérieur duquel nous afficherons une carte Google Maps.

Vous devez styliser cet élément, définir sa hauteur et sa largeur pour qu'il soit visible sur la page. De liaison Bibliothèque Google API Cartes

pour créer et gérer une carte. Sans cette bibliothèque, la carte ne fonctionnera pas.

Nous écrivons un script qui créera et affichera une carte Google Maps sur la page.

Voici le code de la page que nous avons obtenu. Faites attention aux commentaires à l'intérieur, j'ai décrit ce qui se passe et où.

Nous avons maintenant une carte comme celle-ci, mais nous n’avons pas de marqueur pour indiquer l’emplacement.
Vous demanderez également comment indiquer sur la carte l'adresse dont nous avons besoin.

2. Map Google Maps Api - déterminer l'emplacement et définir le marqueur 2.1 Déterminer l'emplacement de centrage de la carte

Montrons l'emplacement du Théâtre Bolchoï sur la carte. Dans le paramètre center nous avons défini les coordonnées de centrage de la carte :

Centre : (lat : -34.397, lng : 150.644),

Nous devons obtenir ces coordonnées pour notre emplacement. Pour ce faire, nous allons à version régulière Google Maps et touche droite Cliquez sur le lieu qui nous intéresse. Cliquez sur « Qu'est-ce qu'il y a ici » et obtenez les coordonnées du lieu. (55.760186, 37.618711). En même temps, je vais changer l'échelle en la réglant sur 18 : zoom : 18 .

2.2 Installation d'un marqueur

Le lieu a été déterminé. Il ne reste plus qu'à afficher le marqueur sur la carte. Dans la fonction initMap(), nous ajoutons une variable pour le marqueur :

// Créer un marqueur sur la carte var marqueur = new google.maps.Marker(( // Déterminer la position du marqueur : (lat : 55.760186, lng : 37.618711), // Préciser sur quelle carte il doit apparaître. ( Il peut y avoir plus d'une carte sur la page) map : map, // Écrivez le nom du marqueur - il apparaîtra si vous le survolez et attendez un peu le titre : "Notre marqueur : Théâtre Bolchoï" });

Maintenant nous avons une carte avec un marqueur

Comment ajouter un événement de clic à une carte ou un marqueur dans Google Maps

Vous pouvez également ajouter votre propre événement en cliquant sur le marqueur. Nous ne ferons pas cela dans le code de la page finale. Mais voici comment procéder :

Google.maps.event.addListener(marker, "click", function() ( document.location="http://google.com"; ));

Le premier paramètre de la méthode addListener est l'objet pour lequel l'événement est ajouté, dans notre cas Marker . L'objet peut être non seulement un marqueur mais aussi la carte elle-même. Le deuxième paramètre de clic spécifie le type d'événement, dans dans ce cas un clic. La troisième est une fonction de gestionnaire qui fonctionnera.

Je recommande de consulter la documentation pour plus de détails sur le marqueur et les possibilités de travailler avec lui.

2.3 Définir votre propre icône pour un marqueur dans Google Maps

Le marqueur a été installé. Mais c'est standard, et ce n'est pas intéressant du tout. Remplaçons-le par notre propre icône. J'ai trouvé une icône appropriée que nous utiliserons.

J'ajouterai une icône à la description de la variable avec un marqueur.

// Créer un marqueur sur la carte var marqueur = new google.maps.Marker(( // Déterminer la position du marqueur : (lat : 55.760186, lng : 37.618711), // Préciser sur quelle carte il doit apparaître. ( Il peut y avoir plus d'une carte sur la page) map : map, // Écrivez le nom du marqueur - il apparaîtra si vous le survolez et attendez un peu le titre : "Notre marqueur : Théâtre Bolchoï", // Précisez votre icône pour l'icône du marqueur : "theatre_icon.png" ));

À propos de plus icônes complexes- peut être trouvé dans la documentation.

3. Définissez vos propres styles de conception pour Google Maps

Il est temps de colorier notre carte. Donnez-lui un look spécial et unique. Nous le ferons en utilisant le service Snazzy Maps qui a grand nombre skins pour Google Maps. Et cela vous permet de créer ces cartes sympas :

J'ai choisi un style de carte appelé Eau bleue. Sur la page de ce style, vous pouvez trouver le code du design et télécharger un fichier avec un exemple d'application de ce style à une carte Google Maps.

Nous ajoutons des styles pour la conception de la carte à la propriété styles, que nous spécifions pour la variable map - lorsque nous créons un objet contenant une carte.

Voici le fragment de code complet :

// Dans la variable map, créez un objet cartographique GoogleMaps map = new google.maps.Map(document.getElementById("map"), ( // Lors de la création d'un objet cartographique, vous devez spécifier ses propriétés // center - déterminer le point sur lequel la carte sera centrée centre : (lat : 55.760186, lng : 37.618711), // zoom - définit l'échelle 0 - la route entière est visible 18 - les maisons et rues de la ville sont visibles zoom : 18. , // Ajoutez vos propres styles pour afficher les styles de carte : [("featureType ":"administrative","elementType":"labels.text.fill","stylers":[("color":"#444444") ]),("featureType": "paysage", "elementType": "tous", "stylers": [("color": "#f2f2f2")]), ("featureType": "poi", "elementType" :"all","stylers":[("visibility":"off ")]),("featureType":"road","elementType":"all","stylers":[("saturation":- 100),("légèreté":45)]),("featureType" :"road.highway","elementType":"all","stylers":[("visibility":"simplified")]),( "featureType": "road.arterial", "elementType": "labels. icon", "stylers": [("visibility": "off")]), ("featureType": "transit", "elementType": "all","stylers":[("visibility":"off" )]),("featureType":"eau","elementType":"all","stylers":[("color":"# 46bcec"),("visibility":"on")])] ) );

Maintenant, notre carte ressemble à ceci :

4. Fenêtres d'informations

La carte peut être encore améliorée en ajoutant fenêtre d'informations en cliquant sur notre marqueur. Une documentation à leur sujet est disponible. Bref, à ajouter fenêtre d'informations nécessaire:

Créez la fenêtre elle-même et le contenu qu'elle contient

Faites-le apparaître lorsque vous cliquez sur le marqueur.

Tout cela se passe dans la fonction initMap()

4.1 Décrivons le contenu de la fenêtre d'information : // Créer du contenu pour la fenêtre d'information var contentString = ""+ ""+ ""+ "Théâtre Bolchoï"+ ""+ "

Le Théâtre académique d'État du Bolchoï de Russie, ou simplement le Théâtre Bolchoï, est l'un des plus grands « + » de Russie et l'un des théâtres d'opéra et de ballet les plus importants au monde.

"+ "

Site Internet : bolshoi.ru "+ "

"+ ""+ ""; 4.2 Créer une fenêtre d'information // Créer une fenêtre d'information var infowindow = new google.maps.InfoWindow(( content: contentString, maxWidth: 400 )); 4.3 Faites en sorte que lorsque vous cliquez sur le marqueur, l'info apparaît -window // Créez un écouteur, en cliquant sur le marqueur, ouvrez la fenêtre d'information infowindow Marker.addListener("click", function() ( infowindow.open(map, Marker); ));

Maintenant, la carte avec la fenêtre d'information ressemble à ceci :

Vous pouvez également nettoyer éléments standards contrôlez depuis la carte, activez/désactivez ceux nécessaires et inutiles, et créez même le vôtre. Vous trouverez une description de tout cela dans la documentation.

Carte prête

La carte et le code terminés peuvent être consultés ci-dessous ou sur codepen.

Alexeï Tchernitsyne

petite précision :
1 à 2 semaines - pour recevoir un code de vérification par courrier physique- c'est presque un fantasme, malheureusement. Les 2 dernières fois où j'ai personnellement enregistré une entreprise sur Google.Business ont pris 1,5 à 2 mois. En même temps fonctionnalité intéressante- La lettre de Google venait de France.
Ceux. Ce n’est pas aussi rapide et simple que nous le souhaiterions.

De plus, s'il s'avère qu'un compte d'entreprise a déjà été (s'avère-t-il) enregistré dans l'annuaire, alors vous devrez passer par la procédure de transfert des droits administratifs vers la mention dans l'annuaire qui existait déjà. (cela arrive parfois lorsque, par exemple, ancien employé apporté des modifications au répertoire, puis quitter sans quitter les données). Par conséquent, il est conseillé à l'entreprise de toujours conserver une liste des comptes de marque enregistrés auprès de l'entreprise et de ne pas faire confiance aux artistes sur leur parole d'honneur.

Merci de me préciser :)
- De quel ouvrage de référence parlons-nous ? Si je me souviens bien, Google Business est individuel et n'est pas un catalogue/annuaire.
- Je pense que c'est logique, avant d'ajouter et de créer de nouveaux profils sur n'importe quelle ressource, cela vaut la peine de vérifier s'il est déjà là, et il n'y aura aucun problème) Mais dans le cas du profil Google Business - oui, si quelqu'un a déjà pris votre profil, puis bienvenue à ces .support et transfert de droits.

Moukhamed-Kanapia Jaksylyk

Eh bien, je ne sais pas, nous n’utilisons pas encore vraiment cet outil au Kazakhstan, mais pas moi. Personnellement, j'ai été très surpris lorsque le code de vérification nous est parvenu à Astana en une semaine et demie. Et donc mon entreprise a des bugs, par exemple des boutons dans les posts, le texte dans la recherche affiche parfois un texte différent de celui que j'ai spécifié

Titre de la page : Comment ajouter rapidement.... Qu'a-t-il de commun avec le matériel présenté, où il n'y a que des instructions banales et pas un seul conseil pour le faire vraiment rapidement !

Alexeï Tchernitsyne

)) que dois-je clarifier exactement ? Pourquoi ai-je appelé Google Business un « catalogue » et un « annuaire » ? Eh bien, parce que c’est vraiment le cas, en substance. Selon les résultats, Google, comme Yandex, produit (essaye de) produire des résultats personnalisés. Mais quand nous parlons de sur les requêtes de marque - ils émettent généralement toujours une carte Google Business.
Donc si vous ne voulez pas de « catalogue » et de « répertoire »)), ne l’appelez pas ainsi))
Et je suis d'accord qu'il faudrait vérifier avant d'ajouter. Et oui, personne n'a annulé le transfert des droits. Dans mon cas, il s'agissait simplement d'une négligence personnelle - j'ai reçu un lien vers le compte du client, mais je ne l'ai pas revérifié. Mais il s'est avéré que c'était déjà le deuxième qu'ils créaient, parce que... le premier n'a pas été atteint.

Bon ok) je pensais que peut-être quelque chose avait changé et ça m'a manqué)

Anatoly Shpits

DANS dernièrement les lettres ne vont pas du tout aux adresses de Moscou, mais elles vont aux adresses ukrainiennes, probablement à cause des astuces du Département d'État et d'une conspiration secrète ;)
Vous devez confirmer la page et l'adresse via l'e-mail du domaine (à la fin des tentatives d'envoi d'e-mails), et parfois cela ne fonctionne pas du premier coup =)

UN où viendra-t-il une lettre avec un numéro si seule la maison est indiquée ?

"Par courrier de domaine" Pouvez-vous être plus précis sur la façon dont cela fonctionne ?

Elena Vladimirovna Kraeva

Alexey, merci d'avoir clarifié le timing. Apparemment, Google ne parvient pas toujours à respecter les délais.

Elena Vladimirovna Kraeva

Ici vidéo officielle de Google Business sur la façon d'indiquer correctement l'adresse https://www.youtube.com/wat...

Elena Vladimirovna Kraeva

Voici un lien vers la vidéo officielle de Google for Business (Russie), qui décrit les moyens d'accélérer la réception de la confirmation, à savoir : écrire au support technique si la lettre n'est pas arrivée dans un délai de 1 à 2 semaines (voici un lien vers la page pour envoyer une demande au support technique
Pour certaines entreprises (pas toutes), en plus de la confirmation par courrier, des options de confirmation sont disponibles par téléphone ou e-mail. Voici un lien vers les instructions de Google pour confirmation par téléphone et par mail : https://support.google.com/... .
Lien vidéo

Bonjour à tous les lecteurs. Google Maps, ou en russe - Google Maps, est depuis longtemps devenu l'outil le plus populaire auprès de millions d'utilisateurs. Je ne vais pas énumérer maintenant tous les avantages de ce merveilleux projet. Vous le savez vous-même. Des cartes Google interactives sur des pages comme « À propos de nous » ou « Comment s'y rendre ? sont depuis longtemps devenus un attribut nécessaire sur tout site Web d'entreprise, ou plus encore, sur un site Web avec une boutique. Parlons de la façon d'insérer plus facilement ces cartes dans un site WordPress.

Vous pouvez obtenir n'importe quelle carte Google sur votre site Web en insertion manuelle code ou en utilisant des plugins appropriés. Examinons de plus près la première option.

Comment intégrer Google Maps à l'aide de l'insertion manuelle de code

Nous piétinons les cartes elles-mêmes de Google et trouvez la situation géographique dont vous avez besoin. Depuis quelque temps déjà, les cartes commencent à avoir une interface complètement minimaliste pour faciliter la visualisation. Nous avons besoin version classique. Cliquez sur le bouton en haut à droite du navigateur - « Aide et commentaires » puis - « Interface classique ».

Une sorte de barre latérale apparaîtra sur la gauche, où nous avons besoin d'un bouton « Lien ». Cliquez dessus et une fenêtre avec deux champs apparaît :

Short code (pour envoyer rapidement un lien vers votre carte).

Code HTML à ajouter au site Web

Ci-dessous, vous trouverez un autre lien - "Paramètres et aperçu carte intégrée. Cliquez dessus et vous serez redirigé vers une fenêtre pop-up. réglage fin présentation de notre carte. Ici, vous pouvez ajuster l'échelle d'affichage de la carte, la taille de la fenêtre d'affichage de la carte et copier code requis du champ inférieur à votre site Web. En même temps, si vous regardez attentivement, vous verrez comment les chiffres de ce champ changeront lorsque vous modifierez les paramètres d'affichage de la carte.

Accédez à votre site WordPress et collez le code dans vos articles, pages ou modèle. C'est tout. Il ne reste plus qu'à enregistrer votre article ou votre page et voir comment Google Maps « s'installe » sur votre site.

Comment intégrer Google Maps à l'aide d'un plugin

La première méthode est bonne si vous souhaitez simplement intégrer une carte Google à un seul endroit sur votre site WordPress. Mais si les cartes jouent un rôle important sur votre site et que dans le contenu principal, vous devez fréquemment ajouter des cartes dans vos publications, alors je vous recommande d'utiliser un plugin WordPress spécial - . Après l'installation et l'activation, accédez à l'un de vos messages et faites défiler jusqu'à la métabox MapPress. Ici, vous devez créer nouvelle carte — Nouvelle carte.

Entrez le nom de notre carte et sélectionnez la taille. Dans le champ Ajouter un POI : entrez des noms ou des coordonnées pour rechercher le bon endroit. À propos, vous pouvez ainsi ajouter plusieurs lieux à une seule carte. Dans une fenêtre séparée, saisissez vos descriptions. Enregistrez et cliquez sur Insett Into Post pour l'insérer dans la page.

Pour plus paramètres détaillés C'est en général un plugin assez puissant, allez dans le menu MapPress dans le panneau d'administration de votre site. Ici, vous êtes libre de modifier divers aspects du plugin par défaut en fonction de vos besoins. Par exemple, déterminez un emplacement pour l'affichage automatique des cartes dans les articles et les pages, modifiez l'interface de gestion des cartes et leur apparence, etc. Si vous le souhaitez, vous pouvez également l'étudier en utilisant le lien. instructions détaillées de l'auteur du plugin.

Google Maps dans vos widgets avec effet Lightbox

Un autre moyen très simple et efficace d’ajouter une carte Google à votre site Web consiste à utiliser un plugin. Après installation et activation, le plugin vous permettra d'utiliser nouveau widget avec le même nom.

Passons à nos widgets. Faites glisser le nouveau widget Google Maps vers « l’emplacement du widget » dont vous avez besoin. Par exemple, dans la barre latérale. Entrez le nom de la personne recherchée règlement et pays. Spécifiez le niveau de zoom. En plus d'afficher la carte dans la barre latérale, il est également possible d'agrandir la carte en cliquant grâce à l'effet. En conséquence, à l'intérieur du widget, il y a deux autres signets avec paramètres supplémentaires- pour la barre latérale et pour la vue développée.

Plugin Premium - 5 secondes Google Maps

Pour ceux qui préfèrent les plugins premium, veulent « tout en un » et sont habitués à toujours bénéficier d'un excellent support de la part de l'auteur, je peux recommander d'acheter le plugin populaire - .

Pour ses 10 dollars, le plugin peut faire ce qui suit :

• Aucune API requise, aucune installation, aucune modification de code
• Fonctionne dans la barre latérale, les publications, les pages et partout dès la sortie de la boîte
• Prise en charge plein écran.
• Le code par défaut, , peut être facilement modifié.
• Plusieurs cartes pour chaque article/page.
• 12 marqueurs/icônes prédéfinis
• Description HTML entièrement personnalisable
• Utilise le cache local pour le géocodage (cartographie des adresses latitude/GNL) pour une vitesse maximale
• Documentation complète avec des exemples

Et en conclusion, je ne peux m'empêcher de noter le fait que de nombreux thèmes premium modernes prennent, par défaut, en charge Google Maps sous une forme ou une autre. Ils sont généralement affichés à l'aide de . Parfois, ils ont un menu séparé avec des paramètres. De manière générale, reportez-vous à la documentation.

J'espère que cet article vous aidera à choisir la bonne option pour insérer les cartes Google Maps nécessaires dans votre site WordPress.

De l'auteur : Salutations, amis. Dans ce court article, vous apprendrez comment insérer une carte Google dans un site WordPress. Google map est une chose très pratique car elle permet de visualiser, par exemple, votre adresse sur la page contact ou simplement d'afficher un lieu sur la carte.

À propos, si au lieu de Google Maps, vous souhaitez utiliser les cartes Yandex, dans ce cas, vous pouvez lire l'article.

Commençons donc par l'installation et Paramètres Google Plan du site, c'est-à-dire Google Maps. Ici, nous examinerons deux manières d'ajouter une carte : une plus simple et une un peu plus compliquée. Commençons par l'option la plus simple, dont les résultats donneront une carte sous la forme d'une image statique. Pour le mettre en œuvre, nous n'avons même pas besoin de contacter Service Google Maps (Google Maps), il suffit d'apprendre et de mémoriser la technique d'ajout d'une carte.

Donc, pour ajouter une carte, nous avons besoin balise img avec un code comme celui-ci :

< img src = "//maps.googleapis.com/maps/api/staticmap?center=нужный +адрес&zoom=17&size=600x300 " alt = "" >

Comme vous pouvez le constater, l'image est issue du service Google Maps et plusieurs paramètres y sont ajoutés, notamment les suivants :

centre — adresse qui doit être indiquée sur la carte ;

zoom — valeur de grossissement (que plus grand nombre, le plus grand), valeur maximale — 22;

size – largeur et hauteur de la carte.

Essayons d'ajouter une carte à l'article. Pour ce faire, assurez-vous d'aller sur Mode HTML code (onglet Texte en haut de l’éditeur) et ajoutez le code requis.

Après cela, vous pourrez facilement revenir à l'onglet Visuel et, si tout est fait correctement, nous pourrons voir le lieu sélectionné dans l'image de la carte Google dans l'éditeur.

Assurons-nous également que la carte Google apparaisse sur le site WordPress.

Super! Maintenant, nous avons appris à additionner et à produire paramètres nécessaires Google maps sur le site. Veuillez noter que nous n'avons pas eu besoin d'installer de plugin ; tout peut être fait sans plugin en une minute seulement.

Cependant, cette méthode peut ne pas convenir à tout le monde. En conséquence, nous avons reçu une carte statique sur laquelle il est impossible de naviguer, c'est-à-dire nous avons une photo normale. Pour obtenir une carte dynamique, vous devrez contacter le service Google Maps.

Il ne reste plus qu'à coller le code obtenu dans l'article. Permettez-moi de vous rappeler que vous devez coller du code dans l'éditeur en mode Texte.

Enregistrons les modifications et vérifions si la carte Google apparaît sur le site WordPress.

Tout s'est bien passé. L'article contient une carte dynamique dans laquelle vous pouvez naviguer. Très pratique. En même temps cette méthode pas beaucoup plus difficile, il suffisait en plus de se tourner vers le service Google Maps pour trouver le lieu et obtenir le code de la carte.

Je le répète, pour en utilisant Google Nous n'avons même pas eu besoin de chercher Maps Plugin WordPress. À propos, si vous souhaitez apprendre à écrire des plugins permettant d'ajouter facilement n'importe quelle carte Google à votre site, consultez le nôtre.

C'est tout pour moi. Bonne chance!

carte satellite Terrain hybride

2,5 m 5 m 10 m 20 m 50 m 100 m 200 m 400 m 1 km 2 km 4 km 8 km 15 km 30 km 50 km 100 km 200 km 400 km 1000 km 2000 km

https://site/ru/ https://site/de/ https://embedgooglemaps..com/ru/ https://embedgooglemaps..com/en/ https://site/fr/

Créez votre propre code

Copié dans le presse-papiers

https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https ://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it

Code d'intégration de Google Map pour ajouter de la valeur à votre site

Si vous ajoutez un emplacement à votre site Web, il sera plus facile pour les visiteurs de se souvenir de l'emplacement et de s'y retrouver. Si vous ajoutez une carte à votre site, les visiteurs se souviendront certainement mieux de votre position et pourront vous atteindre plus facilement. De nombreux propriétaires de sites Web souhaitent savoir comment insérer Google Maps dans Joomla, ici guide rapide, qui vous aidera à ajouter une carte Google à votre site.

Vous trouverez ci-dessous les étapes qui vous aideront à ajouter très facilement et avec succès Google Maps à votre site Web avec notre générateur Google Maps :

• Sélectionnez l'adresse à laquelle vous souhaitez que les visiteurs vous trouvent et ajoutez une carte de localisation à votre site.
• Sélectionnez le type de carte : satellite, hybride ou terrain. Regardez attentivement pour voir quel type vous convient le mieux.
• Spécifiez la largeur et la hauteur pour l'adapter à votre site.
• Une fois ces paramétrages terminés, cliquez sur le bouton « Générer mon code » sous notre outil. De plus, vous pouvez choisir code complet en cliquant sur « >> Cliquez ici – Appuyez sur Ctrl + C