Hauptmenü

Werkzeuge

Kategorien

Archiv

jLocator – Positions- und Adressbestimmung mittels GPS, Google Maps und jQuery

Mittels jLocator ist es einfach möglich Formulare mit den Adressdaten des aktuellen Standortes zu füllen.

Demo Seite zur Adressermittlung anhand des Standortes

Funktionsumfang:

  • jQuery Plugin welches Längen und Breitengrade über HTML5 Geolocation ermittelt.
  • Die Längen/Breitengrade werden mittels der Google Maps API in Adressdaten übersetzt und damit entsprechende Formularfelder gefüllt.
  • CSS für Bootstrap und FontAwesome vorbereitet (Siehe Demo)
  • Ersetzung von einzelnen Formularfeldern oder ganzen Formularen mittels CSS Selektoren
  • Optionale Abfrage wenn Formularfelder überschrieben werden sollten
  • Folgende Adressfelder können gefüllt werden: Straße, Hausnummer, Stadt, Postleitzahl, Bundesland, Land, Landkreis
  • einfache Anwendung

Voraussetzungen:

  • jQuery Bibliothek muss geladen sein
  • HTML5 Kompatibler Browser / GPS Positionierung muss vom User freigegeben und unterstützt werden
  • Google Maps API Key

Anwendung:

  • jQuery einbinden (wenn noch nicht geladen)
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  • Google Maps einbinden (wenn noch nicht geladen)
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBM1tPAwDacmpbVjPZFX4Sasl999oJQXAU" async defer></script>
  • jLocator jQuery Plugin laden
    <script src="js/jLocator.js"></script>
  • Bootstrap Beispiel:
    <input type="text" class="form-control loadAdress_bs" name="street" placeholder="Straße" value="" />
    <input type="text" class="form-control loadAdress_bs" name="hnr" placeholder="Hausnummer" value="" />
    <input type="text" class="form-control loadAdress_bs" name="city" placeholder="Stadt" value="" />
    <input type="text" class="form-control loadAdress_bs" name="zip" placeholder="Postleitzahl" value="" />
    <input type="text" class="form-control loadAdress_bs" name="district" placeholder="Landkreis" value="" />
    <input type="text" class="form-control loadAdress_bs" name="state" placeholder="Bundesland" value="" />
    <input type="text" class="form-control loadAdress_bs" name="country" placeholder="Land" value="" />
    <script type="text/javascript">/* Bootstrap Version */
    jQuery('.loadAdress_bs').jLocator( {
    'framework': 'bs',
    'link_class': '',
    'link_text': '',
    'custom': {
    'link_class': '',
    'link_class_loading': ''
    },
    'overwrite': 'always',
    'allFields': true,
    'fields': {
    'street': 'input.loadAdress_bs[name="street"]',
    'city': 'input.loadAdress_bs[name="city"]',
    'street_number': 'input.loadAdress_bs[name="hnr"]',
    'zip': 'input.loadAdress_bs[name="zip"]',
    'district': 'input.loadAdress_bs[name="district"]',
    'state': 'input.loadAdress_bs[name="state"]',
    'country': 'input.loadAdress_bs[name="country"]'
    }
    } );</script>

Demo Seite

Demo Seite Contact Form 7 Integration

jLocator - Positionsbestimmung mit GPS, jQuery und der Google Maps API

Stückpreis: 15,00 EUR

jQuery Plugin zur Bestimmung von Straße, Hausnummer, Stadt, Postleitzahl, Landkreis, Bundesland und Land anhand der geografischen Position (GPS) des Benutzers.

Längen/Breitengrade werden dabei über den Browser bestimmt und die Adressdaten werden daraus mittels der Google MAP API ermittelt.