Transcription
1. API Google Maps API - Bienvenue: Bienvenue sur la chaîne de compétences créative de la génération Y Aujourd'hui, nous allons vous apprendre
à intégrer l'
API Google Maps à votre site Web. Je suis rejoint par un bon
ami à moi, Jacob, qui nous a
déjà appris à
coder un site Web à partir de zéro. Il est ingénieur logiciel, et aujourd'hui il
va suivre le cours. Je vais m'occuper de lui. Bonjour, les gars. Je m'appelle Jacob. Je suis diplômé en génie
logiciel. Et aujourd'hui, je vais vous expliquer
comment ajouter l'
intégration de
Google Maps à votre site Web. Cela est utile si
vous êtes affiché sur place ou sur votre site Web, et également si vous
utilisez des projets impliquant l'intégration de
cartes Vous pouvez créer des fonctionnalités
intéressantes avec Google Maps et rendre
votre projet plus intéressant. Nous allons donc utiliser
des scripts HTML, CSS et Java pour ajouter cette
intégration cartographique à votre projet. Je vais
maintenant mettre un exemple
à l'écran à quoi ressemblera le
projet final. Nous allons commencer par
afficher un emplacement sur la carte, puis ajouter des marqueurs, puis
ajouter
plusieurs marqueurs. Nous allons également déterminer comment personnaliser la carte
et ajouter du
code go afin que vous puissiez afficher
des emplacements spécifiques sur la carte. Il s'agit d'un outil extrêmement utile pour les codeurs, les propriétaires d'entreprise et tous ceux qui souhaitent ajouter une fonctionnalité interactive votre projet.
Allons-y.
2. Google Maps - The Configuration: Bienvenue dans la
première classe. Dans ce cours, nous allons parler logiciel dont nous avons
besoin pour pouvoir
commencer à utiliser l'
intégration de Google Maps dans le projet. Comme nous utilisons l'API JavaScript de
Google Maps, qui vous permet de personnaliser les
cartes avec votre propre contenu et vos propres images pour les afficher sur des
pages Web et des appareils mobiles, nous allons
utiliser Visual Studios, l'IDE qui permet de coder les fichiers HTML, CSS et JavaScript. Donc, ce que j'ai fait ici, c'est
créer trois fichiers simples, un fichier HML à points d'index,
un fichier JavaScript à points de carte Et un fichier de style CSS. Maintenant, pour
expliquer brièvement ces fichiers, le fichier d'index sera l'endroit où notre code HTML affichera la
mise en page de la page Web Le
fichier JavaScript de la carte sera l'endroit où notre code
JavaScript sera envoyé pour pouvoir gérer le chargement
réel des cartes Google Maps. Le style CSS contiendra le code permettant d'afficher l'
apparence du site Web. Donc, pour l'instant, cette classe
est intermédiaire, ce qui signifie que je
suppose que vous avez une compréhension de base des fichiers HML ,
CSS et JavaScript
et de leur signification Mais si vous n'êtes pas sûr, je veux une compréhension
plus approfondie J'ai une autre vidéo
sur cette chaîne expliquant comment créer
un site Web à partir de zéro. Donc, pour commencer
avec le fichier HML, j'ai inclus un document HML de
base qui contient un lien vers notre fichier CSS et également notre fichier JavaScript
contenant le code de la carte J'ai créé un en-tête simple
pour donner une touche de
design au site Web et j'ai également inclus un
div contenant la carte, qui sera stylisée ultérieurement À partir du CSS, nous avons style de
base juste pour donner un peu de style
au site Web. Nous avons donc le
corps qui aura la couleur d'arrière-plan, la largeur, et l'en-tête légèrement coloré et quelques marges, ainsi qu'une légère
bordure. Et en bas, nous
avons le style de carte, qui indique la
largeur de la carte et
la bordure de la carte afin que le modèle
Google Maps définir un modèle pour la largeur et la hauteur de
Google Maps. Nous avons également un fichier o script dans
lequel nous
ajouterons du code ultérieurement pour créer les fonctionnalités
de la carte et permettre personnalisation et toute modification des fonctionnalités de la carte. Nous avons donc maintenant une configuration des
fonctionnalités de base. Nous sommes maintenant prêts à
ajouter l' intégration de
Google Maps au site Web. Dans le cours suivant, nous
verrons comment intégrer réellement
l'intégration de Google
Maps
au l'intégration de Google
Maps projet afin
de pouvoir commencer à ajouter les cartes et
à commencer à les visualiser. Pour ce faire, nous
utiliserons l'
API Google Maps et nous montrerons comment vous
inscrire à l'API
et également installer la clé et le
code non pertinent dans le projet. Dans ce cours, nous
verrons comment
démarrer le
projet et définir
le code de base dont nous avions besoin
avant de commencer à
ajouter l'
intégration de Google Maps au projet.
3. Guide de console Google Maps API (KEY): Bienvenue en classe
2. Dans ce cours, nous allons
examiner les étapes à suivre pour
nous inscrire à Google Cloud Platform
afin d'obtenir
la clé API afin de pouvoir l'
ajouter à notre projet La première étape consiste à créer
un compte Google, à vous connecter Google Cloud Platform,
puis à accéder à la console. Vous devez également
activer les enchères sur
votre compte afin de
pouvoir utiliser Google Maps. Je ne vais pas
vous montrer comment effectuer cette étape, mais elle est très simple à réaliser et ne prend pas beaucoup de temps. L'étape suivante consiste à créer un projet sur la console
Google Clouds, que Google utilisera
pour que vous puissiez ajouter vos informations d'identification et vos
clés d'API au projet. Pour ce faire, sélectionnez
votre projet, cliquez sur Nouveau projet. Nommez votre
projet et appuyez sur Créer. Une fois cela fait, ouvrez les paramètres et accédez à
API et services. Cliquez sur Tableau de bord et
activez l'API et les services. Les deux API que nous allons utiliser
pour ce projet sont API JavaScript
des cartes pour
les fonctionnalités
de base de la carte, et également l'API de localisation
à ajouter ultérieurement à un emplacement de travail. Cela sera utilisé pour
convertir un emplacement en latitude et de
longitude afin que le marqueur puisse
être tracé sur la carte Cliquez donc sur Maps JavaScript
API et activez-la. J'ai déjà effectué cette
étape, mais vous devriez voir un bouton d'activation de l'API ici. Il en va de même pour l'API Places. Une fois que vous avez activé les API, vous pouvez créer des
informations d'identification et obtenir une clé d'accès afin
que les cartes Google puissent être utilisées dans votre projet. Cliquez, créez des
informations d'identification, une clé
d'API, qui générera
automatiquement qui générera
automatiquement une clé d'API à utiliser, qui pourra ensuite être
copiée et collée dans votre projet afin que les cartes puissent être implémentées
dans votre projet Je recommande de
restreindre la clé afin qu'elle ne soit accessible
qu'à vous et aux personnes à qui vous souhaitez y accéder afin de vous
assurer que personne n'utilise votre clé d'accès sans le savoir
et n'augmente vos factures Comme nous
créons un site Web, nous devons activer le protocole HTTP. Nous pouvons ensuite activer les
restrictions du site Web que
nous voulons utiliser. Activez ensuite l'URL
du site Web sur lequel vous
souhaitez utiliser Google Maps. Bien sûr, vous n'
avez pas besoin de restreindre la clé, mais je le
recommande vivement. Une fois cela fait, vous
pouvez copier votre clé d'API, qui peut ensuite être
insérée dans le projet. Une fois que Google Maps
est configuré en ligne, vous pouvez
ajouter le code dans votre projet pour
commencer à utiliser les cartes. Ainsi, dans votre fichier HML, ajoutez
simplement un court script, qui contient votre clé
à la fin de l'URL, ainsi qu'une fonction de rappel, qui définit la fonction
du fichier Javascript qui sera
utilisée pour configurer la carte en premier Pour parler brièvement de signification de ces symboles. La source est l'endroit d'où
la carte est chargée et contiendra la clé API
et la fonction de rappel, qui seront utilisées
pour
appeler la première fonction de la carte lors du chargement
du projet Le A permet au navigateur de
télécharger et d'exécuter le script même temps qu'il
charge le code HTML Lorsque le script est
chargé, il appelle la fonction spécifiée dans
la fonction de rappel Merci donc d'avoir
suivi ce cours. Dans ce cours, nous avons examiné comment s'inscrire à la plateforme
Google Cow, activer les API
pertinentes, obtenir notre clé d'accès et obtenir notre clé d'
API d'accès tout en restreignant afin de garantir qu' elle n'est utilisée qu'
aux bonnes fins. Dans le cours suivant,
nous verrons comment définir la fonction qui
est appelée pour la première fois lors du chargement du fichier HTML qui est utilisée pour
afficher la carte.
4. Comment afficher Google Maps et trouver des lieux !: Bienvenue en classe
3. Dans ce cours, nous examinerons
le code
pertinent à ajouter au
fichier Driscriptfile, afin de pouvoir afficher notre premier
emplacement Donc, comme nous en avons
parlé précédemment, nous avons ici un script
lié au fichier map point JS. Notre fonction de rappel indique
au fichier HML quelle fonction doit être
accessible en premier lorsque la page est chargée dans le fichier
map point JS Nous l'avons appelé Init Map. Dans le fichier S, nous avons défini la fonction
appelée Init Map Nous obtenons l'ID
de la carte à partir du fichier HML et définissons le centre de
la carte à afficher Pour ce faire, Google Maps utilise coordonnées de
longitude et de
latitude pour tracer l'emplacement sur la carte. Nous avons défini le
centre de la carte comme étant l'emplacement de Big Ben. Nous pouvons également définir le niveau de zoom
que nous voulons donner à la carte. Huit, c'est à peu près le milieu. Plus votre zoom est
élevé, plus il
sera zoomé, moins vous en aurez, plus
la carte sera zoomée En ouvrant le fichier HML à
l'aide de Google Chrome, nous pouvons maintenant voir ce que
nous avons codé Les cartes Google sont
clairement affichées à l'écran, Big Ben
étant au centre de la carte. l'instant, nous n'avons pas
ajouté de marqueurs, mais cela fera partie
du prochain cours. Je vais
augmenter le zoom pour une meilleure idée de
ce que montre la carte. Maintenant que je l'ai fait
, vous pouvez voir qu'au milieu de
la carte se trouve Big Ben. La carte est interactive et
vous pouvez la faire glisser, effectuer un zoom arrière pour voir une vue satellite. Et faites également glisser un marqueur sur l'emplacement actuel
et faites défiler la page. L'avantage du script dra
réside dans le fait que la carte est interactive, ce qui nous permet d'interagir avec elle, la
faire défiler et de personnaliser les
caractéristiques de conception de la carte. Nous verrons plus tard
comment personnaliser les marqueurs de la carte Merci donc d'avoir
suivi ce cours. Nous avons examiné le code
pertinent
à saisir dans notre fichier de
script dra afin de pouvoir afficher
clairement l'emplacement
sur la carte et également
comment zoomer et dézoomer sur la
carte et interagir avec elle. Dans le cours suivant,
nous verrons comment ajouter des marqueurs
à la carte afin de pouvoir tracer
clairement les coordonnées de l'emplacement sur la carte.
5. Ajouter des marqueurs de lieux à votre carte !: Bienvenue dans la classe
4. Dans ce cours, nous allons voir
comment
ajouter un marqueur sur la carte afin que les coordonnées spécifiques de
l' emplacement puissent être
visualisées sur la carte. Donc, pour ajouter le marqueur
au projet, il suffit de modifier
le fichier maps JS, sorte que l'index en HTML et le style en CSS
puissent rester les mêmes J'ai apporté quelques légères
modifications au code. J'ai utilisé une variable pour stocker les codes de localisation du point que nous voulons tracer sur la carte. J'ai ensuite placé le centre de la carte sur ces coordonnées de
localisation. L'élément important est
mis en évidence ici. Nous voulons créer un
marqueur pour la carte. L'API Google Map dispose d'une fonction
intégrée pour ce faire. Nous définissons simplement la
position de la carte selon les coordonnées de localisation
que nous voulons tracer, puis nous définissons la carte sur laquelle vous souhaitez tracer les coordonnées. Dans notre cas, nous l'
appelons simplement carte parce que c'est ainsi que nous l'avons
définie. Une fois cela fait,
vous pouvez voir l'emplacement de Big Ben à
tracer sur la carte à l'aide de
ce marqueur rouge ici Bien sûr, il n'est
pas nécessaire que ce soit Big Ben. Vous pouvez simplement modifier
n'importe laquelle des
coordonnées de position pour tracer l'
emplacement spécifique que vous souhaitez. Merci d'avoir
suivi ce cours. Nous avons appris quel
code doit être ajouté à notre fichier de script Java
afin de tracer le marqueur de l'emplacement que nous
voulons afficher sur la carte. Dans le prochain cours,
nous examinerons personnalisation de
base des cartes et
la façon dont nous pouvons modifier le marqueur de carte pour qu'il soit
une image de ce que nous voulons.
6. Comment ajouter plusieurs marqueurs à la carte ! (KEY !): Bienvenue en classe
6. Dans ce cours, nous allons
voir comment
ajouter plusieurs marqueurs à ajouter plusieurs marqueurs la carte afin que vous puissiez visualiser différentes propriétés
en même temps. Encore une fois, nous
allons simplement modifier le fichier maps do JavaScript, qui sera largement construit à partir du même code que la dernière classe. Dans notre tableau des allocations, j'ai ajouté d'autres coordonnées afin que nous puissions tracer différents
marqueurs sur la carte. Dans ce cas, Big Ben, Londres et
le palais de Buchanan figurent
dans un tableau d'allocation Nous pourrons
donc
avoir trois marqueurs sur la carte. Mais
c'est illimité. Vous pouvez avoir autant de
marqueurs que vous le souhaitez. Je viens d'ajouter les coordonnées de latitude
et
de longitude de chacun de ces points de repère
dans le tableau de position. J'ai également défini le type sur info, afin qu'il affiche
un marqueur d'information. Mais encore une fois, cela peut être
réglé à votre guise. Pour changer cela,
il vous suffit de définir le tableau d'icônes et d'
ajouter une nouvelle icône. Pour pouvoir dessiner
plusieurs marqueurs, nous avons besoin d'une
boucle à quatre boucles pour parcourir le tableau des emplacements et ajouter
chaque emplacement à la carte. Comme vous pouvez le voir, j'ai
ajouté une boucle
à quatre boucles correspondant à la
longueur des emplacements. Dans notre cas, nous
avons trois emplacements, donc ça va tourner trois
fois en boucle et dessiner trois
marqueurs sur la carte. Je vais tracer la position
du premier emplacement avant de passer au deuxième
puis au troisième Et pour chacun de
ces marqueurs, nous pouvons avoir la même animation
et le même logo, et ils seront tous
dessinés sur la même carte. Comme vous pouvez le voir,
lorsque je charge la page, nous pouvons voir les trois marqueurs sur la carte à trois endroits
différents. Comme vous pouvez le voir sur la carte, nous avons trois emplacements, qui sont trois points
que nous avons tracés La boucle à quatre boucles
a donc fait
trois tours pour chaque emplacement de notre tableau de localisation et a tracé ces points en utilisant la longitude
et la latitude sur la carte Comme vous pouvez le constater, lorsque
nous actualisons la page, les logos rebondissent de haut en
bas en utilisant également l'animation
que nous avons codée Merci d'avoir
suivi ce cours. Nous avons appris comment
ajouter plusieurs marqueurs sur la carte et nous avons découvert la possibilité d'en ajouter d'autres
et de modifier les icônes. Dans le cours suivant,
nous verrons comment géocoder un emplacement afin ne pas avoir à connaître
la latitude et la longitude de chaque
point que nous traçons. Nous pouvons simplement
avoir l'emplacement, qui devrait ensuite être converti
par l'API Google Map en longitude et latitude pour nous afin que nous n'ayons pas
à nous en soucier.
7. Comment personnaliser votre carte ! (Size, animation, logo et plus !): Bon retour à ce prix, nous allons examiner légères personnalisations
que nous pouvons apporter à la carte, et nous allons voir
comment nous pouvons modifier l'icône du marqueur et
ajouter des animations intéressantes
au projet Encore une fois, nous modifions uniquement
le fichier maps dot JS. J'ai apporté quelques légères
variations au code ici. Tout d'abord, nous avons défini la base d'icônes pour obtenir l'image de
la carte à partir de la bibliothèque d'exemples
JavaScript de Google, puis nous avons défini l'icône pour qu'elle soit l'image
Info maps de la bibliothèque. Je l'ai utilisé comme exemple, mais vous n'êtes pas
obligé d'utiliser cette bibliothèque. Vous pouvez utiliser n'importe quelle image, littéralement n'importe quelle image, condition de définir l'icône
que vous souhaitez utiliser. Donc, par exemple,
ayez des icônes ici, le point de repère PNG, si je voulais définir ce marqueur comme marqueur
de Google Maps. Tout ce que nous avons à faire est de le
supprimer et de simplement définir le titre comme Mark PNG. Vous devrez peut-être modifier
la largeur et la hauteur de ce marqueur si l'
image est trop grande. Mais pour l'instant, j'utilise bibliothèque JavaScript de
Google comme exemple. Dans cette section, j'ai créé
un tableau appelé locations,
qui contiendra tous
les emplacements qui contiendra tous
les que je
souhaite tracer sur la carte. Maintenant, je veux juste tracer
Big Ben sur la carte. J'ai donc défini la position
de Google Maps ainsi que
la longitude et les latitudes par
rapport à l'emplacement de Big Ben. J'ai également défini le type de
marqueur sur Info, ce qui fera référence
à cette base d'icônes ici. J'ai ensuite créé les marqueurs, qui sont en grande partie
les mêmes qu'avant. Cependant, j'ai inclus
la position
du tableau
de positions comme étant Big Ben. Et aussi le tableau
d'icônes qui sera l'icône d'information, qui nous donnera
un marqueur d'information. J'ai également ajouté
une animation sympa ici pour montrer le
marqueur tombant sur Google Maps afin de
donner un effet cool et de rendre la carte un
peu plus attrayante. Comme vous pouvez le constater, l'
icône de la carte prend désormais la forme d'un œil. Comme je l'ai déjà dit, il n'
est pas
nécessaire que ce soit un logo d'information. Il peut s'agir de n'importe quel marqueur. Ce qui est cool, c'est que j'ai
ajouté l'animation. Lorsque j'actualise la page, vous verrez le marqueur rebondir, ce qui donne un effet
visuel sympa Dans ce cours,
nous avons appris à personnaliser le
logo du marqueur et à ajouter une
animation sympa pour donner un bel effet visuel
au marqueur lorsqu'il
tombe sur la carte. Dans le cours suivant,
nous verrons comment ajouter plusieurs
marqueurs sur la carte afin d'afficher
plusieurs emplacements même temps sur la carte.
8. GéoCoder Emplacement de cartes de géo (USEL !): Bienvenue donc dans notre dernier
cours de septième année. Dans ce cours, nous allons
voir comment prendre un emplacement
et le convertir
à l'
aide de l' API Geocode en coordonnées de
longitude et de
latitude afin que celles-ci puissent ensuite
être tracées sur le graphique Cela nous permet de tracer des
points sur la carte, des applications dont nous ne
connaissons pas les coordonnées. C'est très utile
lorsque vous souhaitez tracer un emplacement sur la carte et que vous
ne connaissez pas les coordonnées. Au lieu d'
essayer de déterminer une longitude et une latitude, vous pouvez utiliser l'API Geocode pour convertir l'emplacement
en coordonnées, qui peuvent ensuite être
tracées sur la carte Dans le fichier Map St JS, j'ai largement utilisé
les mêmes codes traçant
simplement un
marqueur unique sur la carte J'ai défini ici un code postal
au moins deux ND. Mais vous pouvez définir cet emplacement comme
bon vous semble. L'API Geocode permettra de mieux
déterminer cet emplacement, convertir afin qu'il puisse
être tracé sur la carte L'API Geocode est une autre
API distincte de l'API cartographique. Mais comme indiqué dans le cours deux, nous l'avons déjà activé
sur la console Google, il ne devrait
donc pas y
avoir de problème ici. Ainsi, une fois que nous avons défini
la variable de localisation, nous devons définir la variable de
géocode l'aide du géocode de Google Maps Nous appelons ensuite une fonction ici, qui définit l'adresse en fonction
de l'emplacement, qui appelle cette fonction ici, qui calcule l'adresse de la carte. J'ai mis une instruction if
ici afin que si l'API Geocode ne l'
adresse de chargement, elle
n'écrasera pas le site Web Au lieu de cela, il enregistrera
simplement l'erreur. En cas de succès, la
latitude sera calculée pour l'emplacement et stockée dans la variable, de même que
pour la longitude. Ces variables
seront ensuite utilisées comme
coordonnées de localisation à utiliser pour
le centre de la carte. J'ai ensuite dessiné un marqueur
dont la position
correspond à la longitude et à la
latitude des coordonnées. Cela peut ensuite être
tracé sur le graphique. Bien que nous n'utilisions qu'
un simple exemple ici,
celui-ci peut être
utilisé pour de nombreuses fonctions, telles que la saisie d'une l'utilisateur pour une adresse
qu'il souhaite obtenir, la
convertir, puis la
tracer sur la carte En utilisant une technique similaire
à celle de notre dernier cours, nous pouvons également utiliser une boucle ici pour pouvoir dessiner plusieurs
marqueurs sur la carte. Il n'est pas nécessaire
que le lieu soit un code postal. Il peut s'agir d'un nom de rue, d'une ville ou d'un nom de rue et d'une ville et d'un code postal pour donner
une adresse spécifique. Il s'agit de la même technologie que celle utilisée lorsque vous recherchez destination sur Google
Maps, et elle laisse tomber une épingle. Comme vous pouvez le constater, lorsque
j'actualise la page, elle trace le code postal
défini dans un lieu et trace un marqueur sur la carte
pour ce code postal. Merci donc d'avoir
regardé Class Seven. Dans ce dernier cours,
nous avons appris à prendre n'importe quel endroit et
à tracer sur le
graphique sans connaître les coordonnées de latitude et de
longitude. Cela peut être utilisé pour
n'importe quel emplacement et peut être étendu pour prendre des
emplacements à partir d'une base de données, à partir des entrées utilisateur, et même dessinant plusieurs marqueurs
en même temps.
9. Le projet de cours !: Bienvenue dans le projet de classe. Pour cela, je veux que vous
utilisiez ce que vous avez appris dans le cours d'aujourd'hui pour
mettre la carte sur votre site Web et la
personnaliser en ajoutant plusieurs marqueurs,
exactement comme nous l'avons fait
dans le cours d'aujourd'hui. Tout le code du cours d'aujourd'hui
a été mis sur GitHub. Donc, si vous êtes bloqué,
jetez un œil
au code et n'hésitez pas à
poser vos questions ci-dessous. À la fin de
ce projet de classe, vous devez donc ajouter la carte sur votre site Web, puis
ajouter plusieurs marqueurs pour indiquer
les différents emplacements aux différentes personnes
qui visitent votre site Web. Alors allez-y et
si vous êtes bloqué, n'oubliez pas d'utiliser un hub git ou de poser une question ci-dessous.
10. Recap&Conclusion - Merci: Merci à tous d'
avoir suivi ce cours. J'espère que vous avez beaucoup appris
et que vous pourrez
utiliser ces outils au profit de votre propre site Web. Pour conclure, je
vous ai enseigné
aujourd'hui comment intégrer
Google Maps à
votre site Web en utilisant le
HTML, le CSS et le JavaScript Je vous ai montré comment afficher les
emplacements à l'aide de marqueurs, comment personnaliser les cartes et comment utiliser Google Geocoder pour indiquer les
emplacements des clients sur la carte Veuillez donc donner le
projet de classe à suivre et consultez mon autre cours dans
la chaîne où je vous ai montré comment créer
un site Web à partir de zéro, en utilisant le CSS et le HTML. Et
merci d'avoir regardé.
Millennial Creatives ✅, Learn Skills from the Future
