initial commit

timwis · Nov 8, 2014 · 9312eaa · 9312eaa
commit 9312eaa
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# GeoPicker
+Sometimes the default geocode isn't good enough. This utility allows you to fine tune the latitude/longitude fields after your geocode independent of the address. Try it by typing in an address, then moving the marker after it zooms to it.
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>GeoPicker</title>
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+ <div class="container">
+
+ <div class="jumbotron">
+ <h1>GeoPicker</h1>
+ <p>Sometimes the default geocode isn't good enough. This utility allows you to fine tune the latitude/longitude fields after your geocode independent of the address. Try it by typing in an address, then moving the marker after it zooms to it.</p>
+ </div>
+
+ <div class="row">
+ <div class="col-md-3">
+ <div class="kn-input kn-input-short_text" id="kn-input-field_3"> 
+ <label for="field_3" class="knack-input-label">
+ <span class="kn-input-label">Address</span>
+ <span class="kn-required">*</span>
+ </label>
+ <div class="input">
+ <input id="field_3" class="form-control" name="field_3" type="text" value="1234 Market St">
+ </div>
+ <p class="kn-instructions" style="display: none;"></p>
+ </div>
+
+ <div class="kn-input kn-input-short_text" id="kn-input-field_4"> 
+ <label for="field_4" class="knack-input-label">
+ <span class="kn-input-label">Latitude</span>
+ <span class="kn-required">*</span>
+ </label>
+ <div class="input">
+ <input id="field_4" class="form-control" name="field_4" type="text" value="39.9516592">
+ </div>
+ <p class="kn-instructions" style="display: none;"></p>
+ </div>
+
+ <div class="kn-input kn-input-short_text" id="kn-input-field_5"> 
+ <label for="field_5" class="knack-input-label">
+ <span class="kn-input-label">Longitude</span>
+ <span class="kn-required">*</span>
+ </label>
+ <div class="input">
+ <input id="field_5" class="form-control" name="field_5" type="text" value="-75.1609250">
+ </div>
+ <p class="kn-instructions" style="display: none;"></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+ <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnEn106D9TdzSlIssESUmBI_akyuH3ZzM"></script>
+ <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,64 @@
+$(document).ready(function() {
+//$(document).on('knack-view-render.any', function (event, page) {
+
+ // Detect if address, lat, and lng textboxes exist (find their labels)
+ var addressLabel = $('.kn-input-label:contains("Address")'),
+ latLabel = $('.kn-input-label:contains("Latitude")'),
+ lngLabel = $('.kn-input-label:contains("Longitude")');
+ if(addressLabel.length && latLabel.length && lngLabel.length) {
+
+ // Get the textboxes themselves
+ var addressInput = $('#' + addressLabel.parent('label').attr('for'));
+ latInput = $('#' + latLabel.parent('label').attr('for')),
+ lngInput = $('#' + lngLabel.parent('label').attr('for')),
+ defaultMapOptions = {
+ center: {lat: 39.9500, lng: -75.1667},
+ zoom: 14
+ };
+
+ // Disable lat & lng textboxes
+ latInput.attr('disabled', 'disabled');
+ lngInput.attr('disabled', 'disabled');
+
+ // Create a map underneath the address box
+ var mapContainer = $('<div/>').addClass('geopicker').insertAfter(addressInput),
+ map = new google.maps.Map(mapContainer.get(0), defaultMapOptions),
+ geocoder = new google.maps.Geocoder(),
+ marker = new google.maps.Marker({map: map, draggable: true});
+
+ // If lat & lng already have a value, zoom to it and put the marker on it
+ if(latInput.val() && lngInput.val()) {
+ var latLng = {lat: parseFloat(latInput.val()), lng: parseFloat(lngInput.val())};
+ map.setCenter(latLng);
+ map.setZoom(18);
+ marker.setPosition(latLng);
+ }
+
+ // When the address changes, geocode it and zoom to it
+ addressInput.change(function() {
+ var input = $(this).val();
+
+ if(input) {
+ // todo: enable loading indicator
+ geocoder.geocode({'address': input, 'componentRestrictions': {'locality': 'Philadelphia'}}, function(results, status) {
+ // todo: disable loading indicator
+ if(status == google.maps.GeocoderStatus.OK) {
+ map.setCenter(results[0].geometry.location);
+ map.setZoom(18);
+ marker.setPosition(results[0].geometry.location);
+ latInput.val(results[0].geometry.location.lat());
+ lngInput.val(results[0].geometry.location.lng());
+ } else {
+ // todo: display error
+ }
+ });
+ }
+ });
+
+ // When the user drags the marker, update the lat/lng
+ google.maps.event.addListener(marker, 'dragend', function(e) {
+ latInput.val(e.latLng.lat());
+ lngInput.val(e.latLng.lng());
+ });
+ }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1 @@
+.geopicker { width: 100%; height: 200px; }