Permalink
Browse files

Initial commit

  • Loading branch information...
rjshade committed Mar 30, 2012
0 parents commit 6bfcaa6a18842987841a10f497721da689bd66cc
No changes.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,6 @@
+
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-left, .ui-corner-bottom{ border-radius:0px;}
+.ui-state-active,.ui-tabs-selected { border-radius:0px;}
+.ui-tabs-selected { border-radius:0px;}
+.ui-tabs .ui-tabs-nav li{ filter:none;}
+.ui-tabs .ui-tabs-nav li a { border-radius:0px; }
@@ -0,0 +1,89 @@
+html {
+ margin:0;
+ padding:0;
+ border:0;
+}
+
+body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, code,
+del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+body {
+ color: #333;
+ margin: 50px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px;
+}
+
+#gmaps-canvas {
+ height: 400px;
+
+ border: 1px solid #999;
+ -moz-box-shadow: 0px 0px 5px #ccc;
+ -webkit-box-shadow: 0px 0px 5px #ccc;
+ box-shadow: 0px 0px 5px #ccc;
+}
+
+#gmaps-error {
+ color: #cc0000;
+}
+
+h1 {
+ font-weight: bold;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+p {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+hr {
+ border: none;
+ padding: 5px;
+ border-bottom: 1px solid #efefef;
+}
+
+#container {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 30px;
+ padding: 25px;
+ border: 1px solid #999;
+ -moz-box-shadow: 0px 0px 15px #ccc;
+ -webkit-box-shadow: 0px 0px 15px #ccc;
+ box-shadow: 0px 0px 15px #ccc;
+}
+
+input {
+ width: 500px;
+}
+
+#results {
+ color: #555;
+ padding-top: 10px;
+}
+
+#input {
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: #ccc;
+}
+#input #latitude, #input #longitude {
+ color: green;
+}
+
+
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Google Maps and jqueryUI</title>
+ <link type="text/css" href="css/main.css" rel="stylesheet" />
+ <link type="text/css" href="css/jquery-ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
+
+ <!-- google maps -->
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+
+ <!-- jquery -->
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
+ <!-- jquery UI -->
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+
+ <!-- our javascript -->
+ <script type="text/javascript" src="js/gmaps.js"></script>
+ </head>
+ <body>
+ <div id='container'>
+ <div id='instructions'>
+ <h1>Geocoding with Google Maps and jQuery UI</h1>
+ <p>This page shows how you can use the <a href="http://jqueryui.com/demos/autocomplete/">autocomplete widget</a> from <a href="http://jqueryui.com/">jQuery UI</a> in conjunction with the <a href="https://developers.google.com/maps/documentation/javascript/reference">Google Maps geocoding API</a> .
+ </p>
+ <p>
+ Start typing a in the search box to trigger the drop-down autocomplete menu. Reverse lookup is also implemented: click the map (or drag an existing marker) and the search box will be populated with the closest address Google can find.
+ </p>
+ </div>
+
+ <hr/>
+
+ <div id='input'>
+ <input id='address' placeholder='Start typing a place name...' type='text' />
+ <br/>
+ <br/>
+ Latitude: <span id='latitude'></span>
+ <br/>
+ Longitude: <span id='longitude'></span>
+ <br/>
+
+ <div id='gmaps-error'></div>
+ </div>
+
+ <div id='gmaps-canvas'></div>
+ </div>
+ </div>
+</body>
@@ -0,0 +1,151 @@
+var geocoder;
+var map;
+var marker;
+
+// initialise the google maps objects, and add listeners
+function gmaps_init(){
+
+ // center of the universe
+ var latlng = new google.maps.LatLng(51.751724,-1.255284);
+
+ var options = {
+ zoom: 2,
+ center: latlng,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+
+ // create our map object
+ map = new google.maps.Map(document.getElementById("gmaps-canvas"), options);
+
+ // the geocoder object allows us to do latlng lookup based on address
+ geocoder = new google.maps.Geocoder();
+
+ // the marker shows us the position of the latest address
+ marker = new google.maps.Marker({
+ map: map,
+ draggable: true
+ });
+
+ // event triggered when marker is dragged and dropped
+ google.maps.event.addListener(marker, 'dragend', function() {
+ geocode_lookup( 'latLng', marker.getPosition() );
+ });
+
+ // event triggered when map is clicked
+ google.maps.event.addListener(map, 'click', function(event) {
+ marker.setPosition(event.latLng)
+ geocode_lookup( 'latLng', event.latLng );
+ });
+}
+
+// move the marker to a new position, and center the map on it
+function update_map( geometry ) {
+ map.fitBounds( geometry.viewport )
+ marker.setPosition( geometry.location )
+}
+
+// fill in the UI elements with new position data
+function update_ui( address, latLng ) {
+ $('#address').autocomplete("close");
+ $('#address').val(address);
+ $('#latitude').html(latLng.lat());
+ $('#longitude').html(latLng.lng());
+}
+
+// Query the Google geocode object
+//
+// type: 'address' for search by address
+// 'latLng' for search by latLng (reverse lookup)
+//
+// value: search query
+//
+// update: should we update the map (center map and position marker)?
+function geocode_lookup( type, value, update ) {
+ // default value: update = false
+ update = typeof update !== 'undefined' ? update : false;
+
+ request = {};
+ request[type] = value;
+
+ geocoder.geocode(request, function(results, status) {
+ $('#gmaps-error').html('');
+ if (status == google.maps.GeocoderStatus.OK) {
+ // Google geocoding has succeeded!
+ if (results[0]) {
+ // Always update the UI elements with new location data
+ update_ui( results[0].formatted_address,
+ results[0].geometry.location )
+
+ // Only update the map (position marker and center map) if requested
+ if( update ) { update_map( results[0].geometry ) }
+ } else {
+ // Geocoder status ok but no results!?
+ $('#gmaps-error').html("Sorry, something went wrong. Try again!");
+ }
+ } else {
+ // Google Geocoding has failed. Two common reasons:
+ // * Address not recognised (e.g. search for 'zxxzcxczxcx')
+ // * Location doesn't map to address (e.g. click in middle of Atlantic)
+
+ if( type == 'address' ) {
+ // User has typed in an address which we can't geocode to a location
+ $('#gmaps-error').html("Sorry! We couldn't find " + value + ". Try a different search term, or click the map." );
+ } else {
+ // User has clicked or dragged marker to somewhere that Google can't do a reverse lookup for
+ // In this case we display a warning, clear the address box, but fill in LatLng
+ $('#gmaps-error').html("Woah... that's pretty remote! You're going to have to manually enter a place name." );
+ update_ui('', value)
+ }
+ };
+ });
+};
+
+// initialise the jqueryUI autocomplete element
+function autocomplete_init() {
+ $("#address").autocomplete({
+
+ // source is the list of input options shown in the autocomplete dropdown.
+ // see documentation: http://jqueryui.com/demos/autocomplete/
+ source: function(request,response) {
+
+ // the geocode method takes an address or LatLng to search for
+ // and a callback function which should process the results into
+ // a format accepted by jqueryUI autocomplete
+ geocoder.geocode( {'address': request.term }, function(results, status) {
+ response($.map(results, function(item) {
+ return {
+ label: item.formatted_address, // appears in dropdown box
+ value: item.formatted_address, // inserted into input element when selected
+ geocode: item // all geocode data: used in select callback event
+ }
+ }));
+ })
+ },
+
+ // event triggered when drop-down option selected
+ select: function(event,ui){
+ update_ui( ui.item.value, ui.item.geocode.geometry.location )
+ update_map( ui.item.geocode.geometry )
+ }
+ });
+
+ // triggered when user presses a key in the address box
+ $("#address").bind('keydown', function(event) {
+ if(event.keyCode == 13) {
+ geocode_lookup( 'address', $('#address').val(), true );
+
+ // ensures dropdown disappears when enter is pressed
+ $('#address').autocomplete("disable")
+ } else {
+ // re-enable if previously disabled above
+ $('#address').autocomplete("enable")
+ }
+ });
+}; // autocomplete_init
+
+$(document).ready(function() {
+ if( $('#gmaps-canvas').length ) {
+ gmaps_init();
+ autocomplete_init();
+ };
+});

0 comments on commit 6bfcaa6

Please sign in to comment.