Monday, September 04, 2006

Saca Coordenas Geograficas con Google Maps
Map





¿Donde quieres ir?
Latitud:
Longitud:




Habilitar o desabilitar Marcas para extraer Coordenadas Geograficas al hacer click dentro del api de GoogleMap

Latitud:
Longitud:


Friday, August 25, 2006

Inserte un mapa satelital de google map en su pagina web
Insertando el api de google map

Primero ir a la siguiente pagina http://www.google.com/apis/maps/signup.html
Acepta los terminos, registra la direccion de tu pagina y luego Click en "Generate Api Key", te generara codigo html.

Extrae todo el codigo q esta entre los tag y y pegalo en el tag <> de tu pagina, lo mismo para lo que esta en y ponerlo entre los tag de tu pagina.
Guardas y recargas y listo.

Modifica la posicion geografica de inicio
Ubica el siguiente segmento en tu codigo:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Ahora modifica las coordenadas geograficas, lo que esta aqui
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
por las coordenadas q desees, x ejemplo ( 123.123 , 123.123 ), lo reemplazas y listo.
Para modificar el acercamiento de la vista mofica el valor de
map.setCenter(new GLatLng(37.4419, -122.1419), 13 ); 
por un valor entre 0 y 60, mientras mayor sea el numero, mas acercamiento obtendras.

Algunas recomendaciones son que agreges estas 2 lines a de codigo para mejor control y para que el mapa sea tipo satelital, (agrega solo lo que esta de color morado).

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);



Agrega una marca de informacion personal

Para agregar una marca personal a tu api de google map debes agregar el siguiente codigo (solo lo de morado):

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);

function createMarker(point, title, content) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("" + title + "" + content);
}); return marker;
}


map.addOverlay(createMarker( new GLatLng( 123.123, 123.123 ) , "Mi Casa", "Aqui pones tu mensaje :p"));

ahora cada vez que quieras agregar una marca pon el siguiente codigo(lo de morado, rojo y verde):


map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);
function createMarker(point, title, content) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("" + title + "" + content);
}); return marker;
}

map.addOverlay(createMarker( new GLatLng( 123.123, 123.123 ) , "Mi Casa", "Aqui pones tu mensaje :p"));

donde los numeros en rojo son las coordenadas y el texto en verde es el texto q quieres q se muestre.

Espero que no tengan problemas, cualquier duda envien sus comentarios y pueden recomendar esta pagina a sus amigos. :P

Thursday, August 17, 2006

Insertar código JavaScript en hi5


Al igual que en muchos blog, tal es el caso de blogger, y sitios donde nos permitan colocar código HTML (hi5, blog, algunas wiki, ...), nosotros podremos insertar DHTML, por ejemplo para cambiar el título de mi blog:




hi5 permite insertar código html, pero no permite insertar tags de tipo SCRIPT.
Al editar el profile de nuestro hi5, por ejemplo la sección Lifestyle, podemos insertar alguna descripción sobre nuestros interes, o una descripción sobre nosotros o nuestros gustos. Está permitido usar código HTML con CSS, pero JavaScript.
Pues podemos insertar código valiendonos de los eventos que tienen los Tags. por ejemplo:


<div onmouseover="alert('heyy!!!');">ALGUN TEXTO</div>


En el código anterior cada vez que pasen el mouse sobre ALGUN TEXTO
, se lanzará el mensaje heyy!!!.
Esto quizás suene demasiado básico a los que estamos acostumbrados a programar con HTML DINAMICO. Pero veamos el siguiente ejemplo, en el cuál cambio los anuncios Adsense que hace hi5, por anuncios míos:

<div id='id_mio' onmousemove='function mover(it){ var TopAd = document.getElementById("TopAd"); if(TopAd.src.indexOf("jneyra") != -1) return; TopAd.src = "http://host.handel-soft.com/~jneyra/google/adsense/index2.html "; document.getElementById("Hi5Medium").src="http://host.handel-soft.com/~jneyra/google/adsense/"; document.getElementById("nav_home").firstChild.innerHTML="Inicio"; var nav_c = document.getElementById("nav_community"); if(!nav_c) nav_c = document.getElementById("nav_community_select"); if(nav_c) nav_c.firstChild.innerHTML="Amigos"; } mover(this); '>

Aqui va el texo que desees...

<input type='button' value='Has click aqui para leer mas...' onclick='for(i = 13; i > 0; i--) { for (j = 10; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0);}} document.getElementById("id_mio").innerHTML = "Eso es todo, no hay mas que leer. :D";' />
</div>


Pueden copiar este código HTML en su hi5 para probarlo.

Fuente:
jneyra.blog