google maps añadiendo campo de busqueda..

Iniciado por Kase, 12 Agosto 2012, 12:55 PM

0 Miembros y 1 Visitante están viendo este tema.

Kase

tengo este codigo jquery

Citardjango.jQuery(function($){
   $.fn.gmapAdmin = function(options){
      var defaults = {   
         'zoom':8,   
         'lat':'53.311',
         'lng':'-6.24',
         'map_elem' : '#id_map',
         'delete_elem' : '#id_delete',
      };
      
      var options = $.extend(defaults, options);
      var value = null;
      var marker = null;
      var map = null;
      var latlng = null;
      var that = this;
      
      var set_field = function(latlng){
          if(marker){
              $(that).val(latlng.lat()+","+latlng.lng());
         }
      };
      
      var get_field = function(){
          if($(that).val()){
            return $(that).val().split(",");
         }else{
            return "";
         }
      };
      
      var remove_field = function(){
          if(marker!==""){
            $(that).removeAttr("value");
         }
      };
      
      var remove_marker = function(){
          marker.setMap(null);
         marker = null;
      };
      
      var set_marker = function(latlng){
          if(!marker){
              marker = new google.maps.Marker({
               map:map,
               draggable:true,
               position: latlng,
            });
            google.maps.event.addListener(marker, 'click', function(new_location) {
                map.setZoom(13);
               map.setCenter(new_location.latLng);
            });
            google.maps.event.addListener(marker, 'dragend', function(new_location) {
               set_field(new_location.latLng);
            });
         }else{
             marker.setPosition(latlng)
         }
      };   
      
      latlng = new google.maps.LatLng(options.lat,options.lng);
       map = new google.maps.Map(document.getElementById($(options.map_elem).attr('id')),{
         zoom: options.zoom,
         center : latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
      });

      // If there is a value in the field, load it onto the map
      if(get_field()!==""){
         set_marker(new google.maps.LatLng(get_field()[0],get_field()[1]));
      }
      /* Listeners */
      google.maps.event.addListener(map, 'rightclick', function(new_location) {
          set_marker(new_location.latLng);
         set_field(new_location.latLng);
      });
      $(options.delete_elem).click(function(){
         if(marker!==""){
            remove_marker();
            remove_field();
         }
      });
      
   };
});


y este html y script que ejecutan el mapa
Citar
               <input type="hidden" name="geolocation" id="id_geolocation" />
               <div class="map_canvas_wrapper" style="display:inline-block;">
                  <div id="map_id_geolocation" style="width:800px;height:500px"></div>
                  <script>
                     django.jQuery(function($) {
                        $("#id_geolocation").gmapAdmin({
                              'zoom': 5,
                              'lat': '22.213709',
                              'lng': '-98.381109',
                              'map_elem': '#map_id_geolocation',
                              'delete_elem': '#map_delete_id_geolocation',
                        });
                     });
                  </script>
               </div>

lo que me gustaria hacer es añadir una funcion:


Citar<input type="text" id="address" value=""/>
<a href='javascript:search();'>buscar</a>

donde search  recargue el mapa buscando la direccion pasada...

tengo 2 problemas, el primero es que dependo forzosamente de ese jquery que puse al principio
y el segundo es que no se leerlo.. XD

creo que me quede en la v2 de google maps.. donde esta el geocoder.geocode()?  x__x  no identifico donde se esta cargando el mapa ¬¬  olvidenlo, geocoder es para otra cosa.. XD


edit:
ya encontre donde se crea el map... XD lo marke en rojo

y esta es la funcion que necesito añadir

Citargeocoder = new google.maps.Geocoder();

  function codeAddress() {
    //In this case it gets the address from an element on the page, but obviously you  could just pass it to the method instead
    var address = document.getElementById("address").value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //In this case it creates a marker, but you can get the lat and lng from the location.LatLng
        map.setCenter(results[0].geometry.location);  //con esto centro el mapa
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

pero no se cual es el problema.. segun yo, map deberia ser global... :/

Kase

solucionado...  pase horas para darme cuenta que la variable map  era local y no global...
a quien se le ocurre setear un objeto como local cuando este no es recuperable.. y por lo normal es necesario extenderse y usarse ¬¬