Obtenez les coordonnées du client avec l'API Google Maps en JavaScript (HMTL5, CSS3 et Bootstrap)

Qu'avons nous besoin?

à) Connaissances de base en html, css3, javascript et bootstrap (non limitatif).
b) Un éditeur de code (dans mon cas j'utiliserai Sublime text 3).
c) Un serveur local à tester (j'utiliserai le serveur Xampp)
Commençons …

Étape 1

On va dans le répertoire de notre serveur local, dans mon cas "C:/xampp/htdocs/" et nous allons créer un nouveau dossier que j'appellerai "Tutorial_geolocalizacion", à l'intérieur, nous ajouterons 2 autres appels "Css" Oui "Js".

AGRANDIR

Étape 2

Nous allons ouvrir notre éditeur de code nous allons "Fichier> Nouveau" et nous y écrivons une structure html5.

AGRANDIR

Ensuite, nous enregistrons ce nouveau fichier sous le nom "index.html" à la racine du dossier "tutorial_geolocalizacion".

Étape 3

Nous téléchargeons bootstrap à partir de sa page officielle et copions le fichier "Bootstrap.min.css" dans notre dossier css.

AGRANDIR

Étape 4

Nous revenons à notre éditeur et ajoutons la référence à ce fichier dans notre "Index.html".

AGRANDIR

Étape 5

Nous allons créer un nouveau fichier et l'appeler "Style.css" nous allons l'enregistrer dans le dossier css …

AGRANDIR

Étape 6

Nous ajouterons dans le index.html les références au fichier css créé à l'étape précédente. De plus, nous inclurons également un script en ligne qui contient les API JavaScript de Google Maps.

AGRANDIR

Étape 7

Nous devrons également créer un nouveau fichier .js où nous écrirons la fonction qui fera la géolocalisation et affichera la carte, nous l'enregistrerons dans le dossier "js", je l'appellerai "localiza.js". J'y ajouterai également une référence dans le fichier index.html

AGRANDIR

AGRANDIR

Nous allons maintenant terminer la mise en page de notre HTML, vous pouvez voir le code dans l'image suivante :

AGRANDIR

Étape 8

Alors que lui sera le cadre principal et le contiendra la carte alors nous devrons contrôler la taille et les caractéristiques qu'ils auront, pour cela nous écrirons dans notre fichier "Style.css" le code suivant.

AGRANDIR

Avec cela, nous disons au navigateur que le calque # map-canvas aura une marge automatique, une hauteur de 420 pixels, une position relative et une largeur de 100% du calque ou du div qui le contient, dans ce cas il est à l'intérieur d'un div avec la classe .container, que nous lui disons d'occuper 90% de l'écran de l'appareil et de l'afficher centré horizontalement.
Si nous le voyons dans notre navigateur, le résultat jusqu'à présent serait celui-ci …

AGRANDIR

Jusqu'à présent, nous n'avons que le design mais il nous manque le plus important, la carte, allons-y …

Étape 9

Dans le fichier "localiza.js" nous allons créer une nouvelle fonction qui obtiendra les coordonnées du navigateur du client et indiquera son emplacement approximatif sur la carte. Au cas où l'API ne fonctionnerait pas correctement sur le client, nous définirons des coordonnées par défaut et incluent également la possibilité pour le client de faire glisser l'espace réservé à son emplacement réel. J'explique pas à pas dans le code, voyons voir…

AGRANDIR

Puisque nous avons nos fichiers prêts, nous pouvons faire un test sur notre serveur local et le résultat serait le suivant.

AGRANDIR

Étape 10

Maintenant, nous allons rendre notre carte adaptable aux appareils mobiles, pour y parvenir, nous revenons à notre fichier "style.css" et nous allons ajouter de nouveaux sélecteurs appelés media query avec eux, nous définirons comment notre conception se comportera en fonction du la taille de l'écran où il se trouve est en train de visualiser … Allons-y.

AGRANDIR

Nous avons déjà tout ce dont nous avons besoin, voyons maintenant les résultats en émulant les appareils mobiles, pour cela nous pouvons utiliser "Google Chrome", après avoir ouvert notre application dans le navigateur, nous faisons un clic droit et allons à "Inspecter l'élément".

AGRANDIR

Une fenêtre comme celle ci-dessous va s'ouvrir et on va sélectionner l'outil en forme de téléphone portable en bas à gauche…

AGRANDIR

Vous verrez qu'en haut à gauche il y aura un sélecteur avec l'étiquette "Dispositif" si nous affichons où il est dit “” Nous pouvons voir une liste avec les noms des appareils mobiles dont les tailles d'écran sont les plus courantes, si nous sélectionnons chacun d'eux, nous pouvons voir comment notre conception se comportera sur les écrans de ces appareils, toute erreur que nous voyons peut être corrigée avec les médias requêtes que nous avons ajoutées dans notre fichier "Style.css", pour cela, nous n'aurions qu'à faire les ajustements nécessaires dans la requête média qui représente la taille de l'appareil dans lequel nous remarquons le problème …
Voyons à quoi ressemble notre design actuel sur certains mobiles …

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif