✅ Krijg klantcoördinaten met Google Maps API in JavaScript (HMTL5, CSS3 en Bootstrap)

Inhoudsopgave

Wat hebben we nodig?
Stap 1
Stap 2
Stap 3
Stap 4
Stap 5
Stap 6
Stap 7
Stap 8
Stap 9
Stap 10

Wat hebben we nodig?

tot) Basiskennis in html, css3, javascript en bootstrap (niet beperkend).
B) Een code-editor (in mijn geval gebruik ik Sublime text 3).
C) Een lokale server om te testen (ik gebruik de Xampp-server)
Laten we beginnen …

Stap 1

We gaan naar de directory van onze lokale server, in mijn geval "C: / xampp / htdocs /" en we zullen een nieuwe map maken die ik zal noemen "Tutorial_geolocalizacion", hierin zullen we nog 2 oproepen toevoegen "CS" Y "J's".

VERGROTEN

Stap 2

We zullen onze code-editor openen, we zullen "Bestand> Nieuw" en we schrijven er een html5-structuur in.

VERGROTEN

Vervolgens slaan we dit nieuwe bestand op als "index.html" in de hoofdmap van de map "tutorial_geolocalizacion".

Stap 3

We downloaden bootstrap van de officiële pagina en kopiëren het bestand "Bootstrap.min.css" in onze css-map.

VERGROTEN

Stap 4

We gaan terug naar onze editor en voegen de verwijzing naar dit bestand toe in onze "Index.html".

VERGROTEN

Stap 5

We zullen een nieuw bestand maken en het noemen "Stijl.css" we slaan het op in de css-map …

VERGROTEN

Stap 6

We zullen toevoegen in de index.html de verwijzingen naar het css-bestand dat in de vorige stap is gemaakt. Daarnaast zullen we ook een online script opnemen waarin de Google Maps JavaScript-API.

VERGROTEN

Stap 7

We zullen ook een nieuw .js-bestand moeten maken waarin we de functie zullen schrijven die de geolocatie zal doen en de kaart zal tonen, we zullen het opslaan in de "js" -map, ik zal het "localiza.js" noemen. Ik zal er ook een verwijzing naar toevoegen in de index.html

VERGROTEN

Nu zullen we de lay-out van onze HTML voltooien, je kunt de code in de volgende afbeelding zien:

VERGROTEN

Stap 8

sinds de zal het hoofdframe zijn en de zal de kaart bevatten, dan zullen we de grootte en kenmerken die ze zullen hebben moeten regelen, hiervoor zullen we in ons bestand schrijven "Stijl.css" de volgende code.

VERGROTEN

Hiermee vertellen we de browser dat de laag # map-canvas een automatische marge zal hebben, een hoogte van 420 pixels, relatieve positie en een breedte van 100% van de laag of div die het bevat, in dit geval is het binnen een div met de klasse .container, waarvan we zeggen dat het 90% van het scherm van het apparaat moet beslaan en het horizontaal gecentreerd laat zien.
Als we het in onze browser zien, zou het resultaat tot nu toe dit zijn …

VERGROTEN

Tot nu toe hebben we alleen ontwerp, maar we missen het belangrijkste, de kaart, laten we ernaartoe gaan …

Stap 9

In het bestand "localiza.js" zullen we een nieuwe functie maken die de coördinaten van de browser van de klant verkrijgt en de geschatte locatie op de kaart aangeeft. In het geval dat de API niet correct werkt op de klant, zullen we enkele standaardcoördinaten definiëren en ook de mogelijkheid voor de klant om de tijdelijke aanduiding naar de werkelijke locatie te slepen. Ik leg het stap voor stap uit in de code, laten we eens kijken …

VERGROTEN

Omdat we onze bestanden gereed hebben, kunnen we een test doen op onze lokale server en het resultaat zou het volgende zijn.

VERGROTEN

Stap 10

Nu zullen we onze kaart aanpasbaar maken aan mobiele apparaten, om dit te bereiken gaan we terug naar ons bestand "style.css" en we gaan enkele nieuwe selectors toevoegen, mediaquery's genaamd, met hen zullen we definiëren hoe ons ontwerp zich zal gedragen volgens de schermgrootte waar het is visualiseren … Laten we ernaartoe gaan.

VERGROTEN

We hebben al alles wat we nodig hebben, laten we nu eens kijken naar de resultaten die mobiele apparaten emuleren, hiervoor kunnen we gebruiken "Google-Chrome", als we onze applicatie in de browser openen, klikken we met de rechtermuisknop en gaan we naar "Inspecteer element".

VERGROTEN

Een venster zoals hieronder wordt geopend en we selecteren linksonder de tool in de vorm van een mobiele telefoon …

VERGROTEN

Je zult zien dat er in de linkerbovenhoek een selector is met het label "Apparaat" als we laten zien waar het staat “” We kunnen een lijst zien met de namen van mobiele apparaten waarvan de schermformaten vaker voorkomen, als we ze allemaal selecteren, kunnen we zien hoe ons ontwerp zich zal gedragen op de schermen van die apparaten, elke fout die we zien kan worden gecorrigeerd met de media vragen die we in ons bestand hebben toegevoegd "Stijl.css", hiervoor zouden we alleen de nodige aanpassingen moeten doen binnen de mediaquery die de grootte van het apparaat vertegenwoordigt waarin we het probleem opmerken …
Laten we eens kijken hoe ons huidige ontwerp eruitziet op sommige mobiele telefoons …