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

[wpshopgermany product=“15″]