Conseils utiles

Google map

Pin
Send
Share
Send
Send


Bonjour tout le monde! Aujourd’hui, nous allons apprendre non seulement à installer Google Maps sur votre site (toute page html), mais aussi à styliser Google Maps - modifier les couleurs d’une carte, ajouter une description à un marqueur sur Google Maps, modifier le type (image) d’un marqueur et ajouter le nôtre. description Allons-y!)

Note importante Nous ferons toutes nos expériences localement. Pour utiliser Google Maps sur votre site, vous devez obtenir une clé d’authentification spéciale. Rendez-le facile. Nous omettrons sa réception et nous ne l'examinerons pas.

1. Insertion de Google Maps

Commençons par créer une page HTML et y insérer une carte Google Maps. Nous ferons cela en utilisant l'API Google Maps. C'est, allons de la manière avancée. Il convient de noter que Google dispose d'une bonne documentation et d'instructions en russe et en anglais sur l'utilisation de Google Maps. Les programmeurs peuvent donc y aller immédiatement. Si vous voulez avoir une leçon claire et détaillée, restez.

Je vais maintenant décrire les actions à effectuer, puis donner le code de la page avec des commentaires. Commencez par créer une page HTML. Puis:

    Créer un élément sur la page

Voici le code de 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 telle carte, mais il n’ya pas assez de marqueur pour indiquer le lieu.
Vous demanderez également comment indiquer sur la carte l'adresse dont nous avons besoin.

2.1 déterminer le centre de la carte

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

Nous devons obtenir de telles coordonnées pour notre place. Pour ce faire, accédez à la version standard de Google Maps et cliquez avec le bouton droit de la souris sur l'emplacement qui nous intéresse. Cliquez sur "Qu'est-ce qui est ici" et obtenez les coordonnées du lieu. (55,760186, 37,618711). En même temps, je changerai l'échelle en la réglant sur 18: zoom: 18.

Comment ajouter un événement en cliquant sur une carte ou un marqueur dans Google Maps

Vous pouvez également ajouter votre événement en cliquant sur le marqueur. Nous ne ferons pas cela dans le code final de la page. Mais cela se fait comme ceci:

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

Pour plus de détails sur le marqueur et les possibilités d'utilisation, je vous recommande de consulter la documentation.

3. Définissez vos propres styles pour la carte Google Maps

Il est temps de colorier notre carte. Donnez-lui un look spécial et unique. Pour ce faire, nous utiliserons le service Snazzy Maps, qui propose un grand nombre de thèmes pour Google Maps. Et cela vous permet de créer de telles cartes:

J'ai choisi un style de carte appelé Blue water. Sur la page de ce style, vous pouvez trouver le code de la conception et télécharger un fichier avec un exemple - appliquant ce style à Google Maps.

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

Voici l'extrait de code complet:

Maintenant, notre carte ressemble à ceci:

4. Fenêtres d'information

La carte peut être encore améliorée en ajoutant une fenêtre d’information en cliquant sur notre marqueur. La documentation pour eux se trouve ici. En bref, pour ajouter une fenêtre d’information, vous devez:

  1. Crée la fenêtre elle-même et son contenu
  2. Faites-le apparaître en cliquant sur le marqueur.

Tout cela se passe dans la fonction initMap ()

4.3 Nous faisons en sorte qu'en cliquant sur le marqueur - une fenêtre d'information apparaisse

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

Vous pouvez également supprimer les contrôles standard de la carte, activer / désactiver les éléments nécessaires et inutiles et même créer les vôtres. Vous trouverez une description de tout cela dans la documentation.

Regarde la vidéo: 10 CHOSES INCROYABLES TROUVÉES SUR GOOGLE MAPS. Lama Faché (Octobre 2020).

Pin
Send
Share
Send
Send