Abrufen von Kundenkoordinaten mit Google Maps API in JavaScript (HMTL5, CSS3 und Bootstrap)

Was brauchen wir?

zu) Grundkenntnisse in html, css3, Javascript und Bootstrap (unbeschränkt).
B) Ein Code-Editor (In meinem Fall verwende ich Sublime Text 3).
C) Ein lokaler Server zum Testen (ich werde den Xampp-Server verwenden)
Lass uns anfangen …

Schritt 1

Wir gehen in meinem Fall in das Verzeichnis unseres lokalen Servers "C: / xampp / htdocs /" und wir werden einen neuen Ordner erstellen, den ich anrufen werde "Tutorial_geocalizacion", darin werden wir weitere 2 Anrufe hinzufügen "CSS" Ja "Js".

VERGRÖSSERN

Schritt 2

Wir werden unseren Code-Editor öffnen, wir werden "Datei > Neu" und wir schreiben eine html5-Struktur hinein.

VERGRÖSSERN

Dann speichern wir diese neue Datei als "index.html" im Stammverzeichnis des Ordners "tutorial_geolocalizacion".

Schritt 3

Wir laden Bootstrap von seiner offiziellen Seite herunter und kopieren die Datei "Bootstrap.min.css" in unserem CSS-Ordner.

VERGRÖSSERN

Schritt 4

Wir gehen zurück zu unserem Editor und fügen den Verweis auf diese Datei in unserem "Index.html".

VERGRÖSSERN

Schritt 5

Wir erstellen eine neue Datei und rufen sie auf "Stil.css" Wir werden es im CSS-Ordner speichern …

VERGRÖSSERN

Schritt 6

Wir werden in der hinzufügen index.html die Verweise auf die im vorherigen Schritt erstellte CSS-Datei. Darüber hinaus werden wir auch ein Online-Skript einfügen, das die JavaScript-API von Google Maps.

VERGRÖSSERN

Schritt 7

Wir müssen auch eine neue .js-Datei erstellen, in der wir die Funktion schreiben, die die Geolokalisierung durchführt und die Karte anzeigt. Wir speichern sie im Ordner "js", ich nenne sie "localiza.js". Ich werde auch einen Verweis darauf in der index.html hinzufügen

VERGRÖSSERN

VERGRÖSSERN

Jetzt vervollständigen wir das Layout unseres HTML, Sie können den Code in der folgenden Abbildung sehen:

VERGRÖSSERN

Schritt 8

Seit der wird der Hauptrahmen sein und die enthält die Karte, dann müssen wir die Größe und die Eigenschaften kontrollieren, die sie haben werden, dafür werden wir in unsere Datei schreiben "Stil.css" der folgende Code.

VERGRÖSSERN

Damit teilen wir dem Browser mit, dass die Ebene # map-canvas einen automatischen Rand, eine Höhe von 420 Pixeln, eine relative Position und eine Breite von 100% der Ebene oder des Div, die sie enthält, haben wird, in diesem Fall befindet sie sich in einem Div mit der .container-Klasse, von der wir sagen, dass sie 90% des Bildschirms des Geräts einnehmen und horizontal zentriert anzeigen soll.
Wenn wir es in unserem Browser sehen, wäre das Ergebnis bisher dieses …

VERGRÖSSERN

Bisher haben wir nur Design, aber uns fehlt das Wichtigste, die Karte, kommen wir dazu …

Schritt 9

In der Datei "localiza.js" erstellen wir eine neue Funktion, die die Koordinaten des Browsers des Clients erhält und seine ungefähre Position auf der Karte anzeigt. Falls die API auf dem Client nicht richtig funktioniert, werden wir einige Standardkoordinaten definieren und auch die Möglichkeit für den Kunden einschließen, den Platzhalter an seine tatsächliche Position zu ziehen. Ich erkläre Schritt für Schritt im Code, mal sehen…

VERGRÖSSERN

Da wir unsere Dateien bereit haben, können wir einen Test auf unserem lokalen Server durchführen und das Ergebnis wäre das folgende.

VERGRÖSSERN

Schritt 10

Jetzt werden wir unsere Karte an mobile Geräte anpassen, um dies zu erreichen, gehen wir zurück zu unserer Datei "style.css" und fügen einige neue Selektoren namens Media Querys hinzu Bildschirmgröße, wo es visualisiert wird … Kommen wir dazu.

VERGRÖSSERN

Wir haben bereits alles, was wir brauchen, jetzt sehen wir uns die Ergebnisse an, die mobile Geräte emulieren, dafür können wir verwenden "Google Chrome", wenn unsere Anwendung im Browser geöffnet ist, klicken wir mit der rechten Maustaste und gehen zu "Element prüfen".

VERGRÖSSERN

Es öffnet sich ein Fenster wie das untenstehende und wir wählen das Werkzeug in Form eines Mobiltelefons unten links aus …

VERGRÖSSERN

Sie sehen, dass sich oben links ein Selektor mit der Beschriftung . befindet "Gerät" wenn wir anzeigen, wo es steht “” Wir können eine Liste mit den Namen von Mobilgeräten sehen, deren Bildschirmgrößen häufiger sind. Wenn wir jedes von ihnen auswählen, können wir sehen, wie sich unser Design auf den Bildschirmen dieser Geräte verhält. Jeder Fehler, den wir sehen, kann mit den Medien korrigiert werden Abfragen, die wir in unserer Datei hinzugefügt haben "Stil.css", dazu müssten wir nur die nötigen Anpassungen innerhalb der Medienabfrage vornehmen, die die Größe des Geräts darstellt, bei dem wir das Problem bemerken …
Mal sehen, wie unser aktuelles Design auf einigen Handys aussieht …

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben