 | Este Mod les dará acceso a Google Maps API, en su ultima versión. Lo podrán hacer localizando a un usuario, probando su ubicación al editar su perfil o insertando una ubicación en un post. El MOD utiliza Mydialog, excepto a la hora de insertar un mapa en un post, para su mayor comodidad. Espero que les guste y les sirva a todos. |
 | Caracteristicas Generales |
- Google API v3
- MyDialog
- Sistema de localización multiple (mediante la conversión de ubicaciones)
- Ubicación de un usuario desde: Perfil, Post o al editar el perfil.
- Inserción de mapas en posts.
- Metodos de localización: explicita y mediante extracción de ID.
| Capturas |
En el Perfil
Mapa abierto
En el Display
Cuando editamos nuestro pefil o el de otro
| Instalación usando el Paquete |
Sube el paquete a la adminsitración y ejecutalo.
Si tenías instalado el Mydialog se debe haber duplicado el código en el
acciones-sp.js. Simplemente borralo y listo!
Si no lo tenías instalado, agrega esto al css:
/* My Dialog*/
#mydialog #cuerpo {
position: relative;
}
#mydialog #procesando {
display: none;
background: white;
opacity: 0.9;
filter: alpha(opacity=90);
z-index:102;
position:absolute;
height: 100%;
width: 100%;
}
#mydialog #procesando #mensaje {
color:#222;
position:relative;
height: 100%;
}
#mydialog #procesando #mensaje img {
left:44%;
margin-right:10px;
position:absolute;
top:29%;
vertical-align:middle;
width:25px;
}
#mydialog #procesando #mensaje div {
font-size:20px;
font-weight:bold;
margin-left:-25px;
margin-top:25px;
text-align:center;
}
#mydialog #buttons {
padding: 15px 0;
text-align: center;
width: 100%;
}
#mydialog .guardarBtn {
background: #b0de27;
border: #607f08 1px solid;
padding: 5px 15px;
font-weight: normal;
font-size: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
color: #222222;
}
#mydialog .guardarBtn.disabled{
opacity: 0.2;
filter: alpha(opacity=20);
background: #CCC;
border: 1px solid #333;
}
#mydialog .cancelarBtn {
background: #d8d8d8;
border: #c4c4c4 1px solid;
padding: 5px 15px;
font-size: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
color: #222222;
}
#mask {
position:absolute;
z-index:100;
left:0px;
top:0px;
}
#mask {
background: #111;
opacity: 0.6;
filter: alpha(opacity=60);
}
#mydialog #dialog {
text-align: left;
border: 3px solid #b5af9f;
display:none;
z-index:101;
-moz-box-shadow: #333 0px 0px 25px;
-webkit-box-shadow: #333 0px 0px 25px;
}
#mydialog #cuerpo {
background: #f4f1e9;
}
#mydialog #dialog #title {
text-align: left;
text-shadow: 0 1px 0 #003851;
border-bottom: 1px solid #003A74;
border-right: 0;
border-left: 0;
border-top:0;
color: #FFF;
font-size: 14px;
font-weight: bold;
padding: 8px;
border: 1px solid #003a74;
background:#2e8af5 url('images/btnRainbow.gif') top left repeat-x;
}
#modalBody label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
#modalBody input {
margin-bottom: 10px;
border: 1px solid #c4c2b9;
background: #FFF;
padding:6px 4px;
}
#recaptcha_image img {
}
.close_dialog {
position: absolute;
right:8px;
top:8px;
cursor: pointer;
}
Luego sube la imagen adjunta a
images/icons de tu theme.
| Instalación Manual |
1 - Index.template.phpBusquen:
</head>
<body>
Reemplazen por:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body><div id="mask"></div>
<div id="mydialog" style="z-index: 999999; position: absolute; width: 305px; top: 50px; left: 524px;">
<div id="dialog" style="position: absolute; width: 305px; top: 20px; left: 524px;"></div></div>
2 - Estilos-sp-cssAgreguen al final:
/* My Dialog*/
#mydialog #cuerpo {
position: relative;
}
#mydialog #procesando {
display: none;
background: white;
opacity: 0.9;
filter: alpha(opacity=90);
z-index:102;
position:absolute;
height: 100%;
width: 100%;
}
#mydialog #procesando #mensaje {
color:#222;
position:relative;
height: 100%;
}
#mydialog #procesando #mensaje img {
left:44%;
margin-right:10px;
position:absolute;
top:29%;
vertical-align:middle;
width:25px;
}
#mydialog #procesando #mensaje div {
font-size:20px;
font-weight:bold;
margin-left:-25px;
margin-top:25px;
text-align:center;
}
#mydialog #buttons {
padding: 15px 0;
text-align: center;
width: 100%;
}
#mydialog .guardarBtn {
background: #b0de27;
border: #607f08 1px solid;
padding: 5px 15px;
font-weight: normal;
font-size: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
color: #222222;
}
#mydialog .guardarBtn.disabled{
opacity: 0.2;
filter: alpha(opacity=20);
background: #CCC;
border: 1px solid #333;
}
#mydialog .cancelarBtn {
background: #d8d8d8;
border: #c4c4c4 1px solid;
padding: 5px 15px;
font-size: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
color: #222222;
}
#mask {
position:absolute;
z-index:100;
left:0px;
top:0px;
}
#mask {
background: #111;
opacity: 0.6;
filter: alpha(opacity=60);
}
#mydialog #dialog {
text-align: left;
border: 3px solid #b5af9f;
display:none;
z-index:101;
-moz-box-shadow: #333 0px 0px 25px;
-webkit-box-shadow: #333 0px 0px 25px;
}
#mydialog #cuerpo {
background: #f4f1e9;
}
#mydialog #dialog #title {
text-align: left;
text-shadow: 0 1px 0 #003851;
border-bottom: 1px solid #003A74;
border-right: 0;
border-left: 0;
border-top:0;
color: #FFF;
font-size: 14px;
font-weight: bold;
padding: 8px;
border: 1px solid #003a74;
background:#2e8af5 url('images/btnRainbow.gif') top left repeat-x;
}
#modalBody label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
#modalBody input {
margin-bottom: 10px;
border: 1px solid #c4c2b9;
background: #FFF;
padding:6px 4px;
}
#recaptcha_image img {
}
.close_dialog {
position: absolute;
right:8px;
top:8px;
cursor: pointer;
}
3 - Acciones-sp-1.1.jsSi no tenés el mydialog instalado, agrega esto:
/* MyDialog */
var mydialog = {
is_show: false,
class_aux: '',
mask_close: true,
close_button: false,
show: function(class_aux){
if(this.is_show)
return;
else
this.is_show = true;
$('#mydialog').html('<div id="dialog"><div id="title"></div><div id="cuerpo"><div id="procesando"><div id="mensaje"></div></div><div id="modalBody"></div><div id="buttons"></div></div></div>');
if(class_aux==true)
$('#mydialog').addClass(this.class_aux);
else if(this.class_aux != ''){
$('#mydialog').removeClass(this.class_aux);
this.class_aux = '';
}
if(this.mask_close)
$('#mask').click(function(){ mydialog.close() });
else
$('#mask').unbind('click');
if(this.close_button)
$('#mydialog #dialog').append('<img class="close_dialog" src="images/close.gif" onclick="mydialog.close()" />');
else
$('#mydialog #dialog .close_dialog').remove();
$('#mask').css({'width':$(document).width(),'height':$(document).height(),'display':'block'});
if(jQuery.browser.msie && jQuery.browser.version<7) //Fix IE<7 <- fack you
$('#mydialog #dialog').css('position', 'absolute');
else
$('#mydialog #dialog').css('position', 'absolute');
$('#mydialog #dialog').fadeIn('fast');
},
close: function(){
//Vuelve todos los parametros por default
this.class_aux = '';
this.mask_close = true;
this.close_button = false;
this.is_show = false;
$('#mask').css('display', 'none');
$('#mydialog #dialog').fadeOut('fast', function(){ $(this).remove() });
this.procesando_fin();
},
center: function(){
},
title: function(title){
$('#mydialog #title').html(title);
},
body: function(body, width, height){
if(!width && (jQuery.browser.opera || (jQuery.browser.msie && jQuery.browser.version<7)))
width = '400px';
$('#mydialog #dialog').width(width?width:'').height(height?height:'');
$('#mydialog #modalBody').html(body);
},
buttons: function(display_all, btn1_display, btn1_val, btn1_action, btn1_enabled, btn1_focus, btn2_display, btn2_val, btn2_action, btn2_enabled, btn2_focus){
if(!display_all){
$('#mydialog #buttons').css('display', 'none').html('');
return;
}
if(btn1_action=='close')
btn1_action='mydialog.close()';
if(btn2_action=='close' || !btn2_val)
btn2_action='mydialog.close()';
if(!btn2_val){
btn2_val = 'Cancelar';
btn2_enabled = true;
}
var html = '';
if(btn1_display)
html += '<input type="button" class="mBtn btnOk'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn1_display?'inline-block':'none')+'"'+(btn1_display?' value="'+btn1_val+'"':'')+(btn1_display?' onclick="'+btn1_action+'"':'')+(btn1_enabled?'':' disabled')+' />';
if(btn2_display)
html += ' <input type="button" class="mBtn btnCancel'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn2_display?'inline-block':'none')+'"'+(btn2_display?' value="'+btn2_val+'"':'')+(btn2_display?' onclick="'+btn2_action+'"':'')+(btn2_enabled?'':' disabled')+' />';
$('#mydialog #buttons').html(html).css('display', 'inline-block');
if(btn1_focus)
$('#mydialog #buttons .mBtn.btnOk').focus();
else if(btn2_focus)
$('#mydialog #buttons .mBtn.btnCancel').focus();
},
buttons_enabled: function(btn1_enabled, btn2_enabled){
if($('#mydialog #buttons .mBtn.btnOk'))
if(btn1_enabled)
$('#mydialog #buttons .mBtn.btnOk').removeClass('disabled').removeAttr('disabled');
else
$('#mydialog #buttons .mBtn.btnOk').addClass('disabled').attr('disabled', 'disabled');
if($('#mydialog #buttons .mBtn.btnCancel'))
if(btn2_enabled)
$('#mydialog #buttons .mBtn.btnCancel').removeClass('disabled').removeAttr('disabled');
else
$('#mydialog #buttons .mBtn.btnCancel').addClass('disabled').attr('disabled', 'disabled');
},
alert: function(title, body, reload){
this.show();
this.title(title);
this.body(body);
this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : 'close'), true, true, false);
this.center();
},
error_500: function(fun_reintentar){
mydialog.procesando_fin();
this.show();
this.title('Error');
this.body(lang['error procesar']);
this.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
this.center();
},
procesando_inicio: function(value, title){
if(!this.is_show){
this.show();
this.title(title);
this.body('');
this.buttons(false, false);
this.center();
}
$('#mydialog #procesando #mensaje').html('<img src="images/loading_form.gif" />');
$('#mydialog #procesando').fadeIn('fast');
},
procesando_fin: function(){
$('#mydialog #procesando').fadeOut('fast');
}
};
Luego agrega esto:
/* GEOLOCATOR BY SANTYYX (El creador de la jona face, entre otros exitos) para Spirate.net - Con mucho cariño :P */
function geolocate(location, tipo){
if(tipo==1){
var address = location
}
if(tipo==2){
var address = document.getElementById(location).value;
}
/* ACÁ ES DONDE GOOGLE APARECE :D ----------------------------- */
mydialog.show();
mydialog.title('GeoLocalizador Spirate - Google Maps');
mydialog.body('<div id="map_canvas" style="width: 550px; height: 480px;"></div><br><center><b>Ciudad localizada:</b> '+address+'</center><br>');
mydialog.center();
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*Y ACÁ LA MAGIA GENTE, ESTO MUESTRA LA LOCALIZACION DEL USUARIO EN EL MAPA ---------------------*/
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("No hemos podido encontrar al usuario. Su ubicacion no es valida, puede no haberla especificado o su ubicacion puede no existir");
}
});
}
/* UCIEL ACA TENES EL HUEVO DORADO XD */
}
4 - Profile.template.phpBusquen:
//ubicacion
if ($context['member']['location'])
echo'<br><b class="size11"> ', $txt[227], ':</b> <span class="size11">', $context['member']['location'], '</span>';
Reemplazen por:
//Ubicación + GeoLocator by Santyyx
if ($context['member']['location'])
echo'<br><b class="size11"> ', $txt[227], ':</b> <span class="size11">', $context['member']['location'], '</span><a href="#" onclick="geolocate(\'', $context['member']['location'], '\', 1); return false;"><img src="', $settings['images_url'] ,'/icons/mappin.png"></a>';
Busquen:
<td width="40%"><b class="size11">', $txt[227], ': </b></td>
<td><input type="text" name="location" size="50" value="', $context['member']['location'], '" /></td>
Reemplazen por:
<td width="40%"><b class="size11">', $txt[227], ': </b></td>
<td><div id="locuser" value="'.$context['user']['location'].'"></div><input type="text" id="ciudad" name="location" size="50" value="', $context['member']['location'], '" /><a onclick="geolocate(\'ciudad\', 2);">Ver en mapa</a></td>
5 - Display.template.phpBusquen:
echo '<div class="fondoavatar" style="overflow: auto; width: 130px;" align="center"><a href="',$scripturl,'?action=profile;u=', $message['member']['id'], '" title="Ver Perfil"><img src="'.$no_avatar.'" border="0" alt="Sin Avatar" /></a><br />', $message['member']['blurb'], '</div>';
Reemplazen por:
echo'<div align="left"><b><a href="',$scripturl,'?action=profile;u=', $message['member']['id'], '"><span class="size12"><font face="verdana">', $message['member']['name'], '</a></font></span></b>';if($context['user']['is_logged'])echo'<a href="#" onclick="geolocate(\'', $message['member']['location'], '\', 1); return false;"><img src="', $settings['images_url'] ,'/icons/mappin.png"></a>'; echo'<br />';
Por ultimo suban la imagen adjunta a images/icons de su theme actual. | Utilizarlo en otra parte |
Este MOD está hecho para que lo puedas usar donde quieras. La función a utilizar es muy simple:
geolocate(
DIRECCIÓN: en caso de que el tipo sea 1:el nombre del lugar a buscar; en caso de que el tipo sea 2: la id del input que tiene en su VALUE la dirección a buscar.
TIPO: 1, cuando se pone la dirección de manera directa, 2, cuando se tiene que buscar el value del input que tiene la id especificada.
Ejemplo 1: geolocate(Buenos aires, 1)
Ejemplo 2: geolocate(mi-div-id, 2)
Asegurense de que haya un objeto con id= map_canvas, en ese div aparecerá el mapa.
Bueno gente, no pude darle más trabajo a este mod por falta de tiempo, ando con muchos examenes y cosas que hacer. Más adelante prometo sacarle mas jugo.
¡Saludos!
Tema: [MOD] GeoLocator by Santyyx (Leído 1501 veces)
