- use google geocode to locate city on maps

2 files changed, 37 insertions, 6 deletions

diff --git a/root/html/includes/host_information.tt b/root/html/includes/host_information.tt
index fd6123c..94fa7e3 100644
--- a/root/html/includes/host_information.tt
+++ b/root/html/includes/host_information.tt
@@ -14,7 +14,7 @@
 [% IF NOT edit %]
 [% c.model('Mirrors').country_info(host.country).name | html %]
 [% ELSE %]
-<select name="country">
+<select name="country" id="country">
 <option value=""></option>
 [% FOREACH country = c.model('Mirrors').country_list %]
 <option value="[% country.code %]" [% "selected=select" IF country.code == host.country %]>[% country.name | html %]</option>
@@ -27,12 +27,18 @@
 <tr><th>City</th>
 <td>
 [% IF edit %]
-<input type="text" name="city" value="[% host.city | html %]">
+<input type="text" id="city" name="city" value="[% host.city | html %]">
+<a href="#" onClick="codeAddress()">
+    <img src="[% c.uri_for('/static', 'images', 'page-zoom.png') %]" style="height: 1.5em">
+</a>
 [% ELSE %]
 [% host.city | html %]
 [% END %]
 </td>
 </tr>
+[% IF edit %]
+<tr><td colspan=2>Click on the map to update latitude and longitude</td></tr>
+[% END %]
 <tr><th>Latitude</th>
 <td>
 [% IF edit %]
@@ -51,9 +57,6 @@
 [% END %]
 </td>
 </tr>
-[% IF edit %]
-<tr><td colspan=2>Click on the map to update latitude and longitude</td></tr>
-[% END %]
 
 <tr><th>Synchronized from</th>
 <td>
@@ -120,17 +123,23 @@ your update request.<br>
     src="http://maps.google.com/maps/api/js?sensor=false">
 </script>
 <script type="text/javascript">
+    var map;
+
     function initialize() {
     var latlng = new google.maps.LatLng(
         [% host.latitude || 0 %],
         [% host.longitude || 0 %]
     );
     var myOptions = {
+[% IF edit %]
+      zoom: 5,
+[% ELSE %]
       zoom: 4,
+[% END %]
       center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
-    var map = new google.maps.Map(document.getElementById("map_canvas"),
+    map = new google.maps.Map(document.getElementById("map_canvas"),
         myOptions);
 
 [% IF edit %] 
@@ -152,6 +161,28 @@ your update request.<br>
 [% END %]
     }
 
+[% IF edit %]
+  function codeAddress() {
+    var address = 
+        document.getElementById("city").value + ',' +
+        document.getElementById("country").value;
+    var geocoder = new google.maps.Geocoder();
+    geocoder.geocode( { 'address': address}, function(results, status) {
+      if (status == google.maps.GeocoderStatus.OK) {
+        map.setCenter(results[0].geometry.location);
+        if (document.getElementById("city").value) {
+            map.setZoom(12);
+        } else {
+            map.setZoom(5);
+        }
+      } else {
+        alert("Geocode was not successful for the following reason: " + status);
+      }
+    });
+  }
+
+[% END %]
+
 </script>
 
 <div id="map_canvas" style="float: left; width:40%; height:300px"></div>
diff --git a/root/static/images/page-zoom.png b/root/static/images/page-zoom.png
new file mode 100644
index 0000000..bbd3624
--- /dev/null
+++ b/root/static/images/page-zoom.png