Citar
django.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();
}
});
};
});
$.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>
<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>
<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
edit:
ya encontre donde se crea el map... XD lo marke en rojo
y esta es la funcion que necesito añadir
Citar
geocoder = 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);
}
});
}
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... :/