✅ Få klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 och Bootstrap)

Innehållsförteckning

Vad behöver vi?
Steg 1
Steg 2
Steg 3
Steg 4
Steg 5
Steg 6
Steg 7
Steg 8
Steg 9
Steg 10

Vad behöver vi?

till) Grundläggande kunskaper i html, css3, javascript och bootstrap (icke-begränsande).
b) En kodredigerare (I mitt fall använder jag Sublime text 3).
c) En lokal server att testa (jag använder Xampp -server)
Låt oss börja …

Steg 1

Vi går till katalogen för vår lokala server, i mitt fall "C: / xampp / htdocs /" och vi kommer att skapa en ny mapp som jag kommer att ringa "Tutorial_geolocalizacion", inuti detta kommer vi att lägga till ytterligare 2 samtal "Css" Y "Js".

FÖRSTORA

Steg 2

Vi kommer att öppna vår kodredigerare "Arkiv> Ny" och vi skriver en html5 -struktur i den.

FÖRSTORA

Sedan sparar vi den här nya filen som "index.html" i roten i mappen "tutorial_geolocalizacion".

Steg 3

Vi laddar ner bootstrap från dess officiella sida och kopierar filen "Bootstrap.min.css" i vår css -mapp.

FÖRSTORA

Steg 4

Vi går tillbaka till vår redaktör och lägger till referensen till den här filen i vår "Index.html".

FÖRSTORA

Steg 5

Vi kommer att skapa en ny fil och kalla den "Style.css" vi sparar det i css -mappen …

FÖRSTORA

Steg 6

Vi lägger till i index.html referenserna till css -filen som skapades i föregående steg. Dessutom kommer vi också att inkludera ett onlineskript som innehåller Google Maps JavaScript API.

FÖRSTORA

Steg 7

Vi kommer också att behöva skapa en ny .js -fil där vi kommer att skriva funktionen som kommer att göra geografisk plats och visa kartan, vi kommer att spara den i "js" -mappen, jag kommer att kalla den "localiza.js". Jag kommer också att lägga till en referens till den i index.html

FÖRSTORA

Nu kommer vi att slutföra layouten för vår HTML, du kan se koden i följande bild:

FÖRSTORA

Steg 8

Sedan blir huvudramen och kommer att innehålla kartan så måste vi kontrollera storleken och egenskaperna som de kommer att ha, för detta kommer vi att skriva i vår fil "Style.css" följande kod.

FÖRSTORA

Med detta berättar vi för webbläsaren att lagret # map-canvas kommer att ha en automatisk marginal, en höjd av 420 pixlar, relativ position och en bredd på 100% av lagret eller div som innehåller det, i det här fallet är det inuti en div med .container -klassen, som vi säger att den ska uppta 90% av enhetens skärm och visa den centrerad horisontellt.
Om vi ser det i vår webbläsare skulle resultatet hittills vara detta …

FÖRSTORA

Hittills har vi bara design men vi saknar det viktigaste, kartan, låt oss komma till det …

Steg 9

I filen "localiza.js" kommer vi att skapa en ny funktion som hämtar koordinaterna för klientens webbläsare och anger dess ungefärliga plats på kartan. Om API: et inte fungerar korrekt på klienten definierar vi några standardkoordinater och inkludera även förmågan för kunden att dra platshållaren till sin faktiska plats. Jag förklarar steg för steg i koden, låt oss se …

FÖRSTORA

Eftersom vi har våra filer redo kan vi göra ett test på vår lokala server och resultatet blir följande.

FÖRSTORA

Steg 10

Nu ska vi göra vår karta anpassningsbar för mobila enheter, för att uppnå detta går vi tillbaka till vår fil "style.css" och vi kommer att lägga till några nya väljare som kallas mediefrågor med dem, vi kommer att definiera hur vår design kommer att bete sig enligt skärmstorlek där den är visualiserar … Låt oss komma till det.

FÖRSTORA

Vi har redan allt vi behöver, låt oss nu se resultaten som efterliknar mobila enheter, för detta kan vi använda "Google Chrome"Med vår applikation öppen i webbläsaren högerklickar vi och går till "Inspektera elementet".

FÖRSTORA

Ett fönster som det här nedan öppnas och vi väljer verktyget i form av en mobiltelefon längst ner till vänster …

FÖRSTORA

Du kommer att se att längst upp till vänster kommer det att finnas en väljare med etiketten "Enhet" om vi visar var det står “” Vi kan se en lista med namnen på mobila enheter vars skärmstorlekar är vanligare, om vi väljer var och en av dem kan vi se hur vår design kommer att bete sig på skärmarna på dessa enheter, alla fel som vi ser kan korrigeras med media frågor som vi har lagt till i vår fil "Style.css", för detta skulle vi bara behöva göra de nödvändiga justeringarna inom mediefrågan som representerar storleken på enheten där vi märker problemet …
Låt oss se hur vår nuvarande design ser ut på vissa mobiler …