geocoder.js

{% block extrastyle %}
<style type="text/css">
  #{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; }
  #{{ id }}_map .aligned label { float:inherit; }
  #{{ id }}_admin_map { position: relative; vertical-align: top; float: {{ LANGUAGE_BIDI|yesno:"right,left" }}; }
  {% if not display_wkt %}#{{ id }} { display: none; }{% endif %}
  .olControlEditingToolbar .olControlModifyFeatureItemActive {
     background-image: url("{{ ADMIN_MEDIA_PREFIX }}img/gis/move_vertex_on.png");
     background-repeat: no-repeat;
  }
  .olControlEditingToolbar .olControlModifyFeatureItemInactive {
     background-image: url("{{ ADMIN_MEDIA_PREFIX }}img/gis/move_vertex_off.png");
     background-repeat: no-repeat;
  }
</style>
<!--[if IE]>
<style type="text/css">
  /* This fixes the mouse offset issues in IE. */
  #{{ id }}_admin_map { position: static; vertical-align: top; }
  /* `font-size: 0` fixes the 1px border between tiles, but borks LayerSwitcher.
      Thus, this is disabled until a better fix is found.
  #{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; font-size: 0; } */
</style>
<![endif]-->
{% endblock %}

<span id="{{ id }}_admin_map">
<script type="text/javascript">
//<![CDATA[
{% block openlayers %}{% include "gis/admin/openlayers.js" %}{% endblock %}
//]]>
var geoCodeURL = "http://nominatim.openstreetmap.org/search";
var zoomToPlace = function() {
   var address = document.getElementsByName("geocoder")[0].value;
   if (!address)
      alert("Please type an address or location!");
   else {

//begin geocoder (https://gist.github.com/836127)
   // Pass user input to nominatim
   $("#address").autocomplete({
       source: function ( request, response ) {
           $.ajax({
                  url: geoCodeURL,
                  data: {
                      format: "json",
                      q: request.term
                  },
                  //Receive result including lat, lon
                  success: function ( data ) {
                      response ( $.map( data, function( item ) {
                          return  {
                              label: item.display_name,
                              value: item.display_name,
                              lat: item.lat,
                              lon: item.lon
                          }}));

                      }
                  })
        },
        minLength: 2,
        delay: 200,
        select: function ( event, ui ) {
                //transform results and reset map center
            map.setCenter(
               new OpenLayers.LonLat( ui.item.lon, ui.item.lat).transform(
                  new OpenLayers.Projection("EPSG:4326"),
                  // or new OpenLayers.Projection("EPSG:900913")
                  map.getProjectionObject()
               ), 13);

        },
       // open: function () {
       //     $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
       // },
       // close: function () {
       //     $( this ).removeClass( "ui-corner-top").addClass("ui-corner-all");
       // }
     });
    });
//end inserted code (https://gist.github.com/836127)
  }
}
</script>
<p>Zoom to Address:
<input id="{{ id }}_geocoder" name="geocoder" value="" onchange="zoomToPlace()">
<button type="button" onclick="zoomToPlace()" >Go!</button>
</p>
<div id="{{ id }}_map"{% if LANGUAGE_BIDI %} dir="ltr"{% endif %}></div>
<a href="javascript:{{ module }}.clearFeatures()">Delete all Features</a>
{% if display_wkt %}<p> WKT debugging window:</p>{% endif %}
<textarea id="{{ id }}" class="vWKTField required" cols="150" rows="10" name="{{ name }}">{{ wkt }}</textarea>
<script type="text/javascript">{% block init_function %}{{ module }}.init();{% endblock %}</script>
</span>