¿cómo Introducir Google Maps En Nuestro Sitio? Parte I

#1 (**permalink**) 24/07/2006, 04:31

Hola amigos, vereis he estado trasteando con la api de google maps y la verdad es que quería compartir mis experiencias con los demás usuarios, he escogido esta parte del foro para poner este "artículo" pero no sé si es la más adecuada.

La cuestión es que he colgado el artículo en mi blog ( http://www.instruccionesymanuales.com/blog.asp?id=126 ) pero allí no se si lo verá mucha gente y como le veo realmente interesante para la gente que quiera poner google maps en su sitio pues lo copio aquí. Hay va:

¿CÓMO INTRODUCIR GOOGLE MAPS EN NUESTRO SITIO? PARTE I
Hola amiguetes pues nada como siempre por necesidad he tenido que empezar a estudiarme el API de google maps para no quedarme atrás. (Joder valla pareado, jejeje)

Bueno pues os voy a indicar cómo introducir una capa en vuestro sitio con google maps y la dirección que vosotros querais.

Lo primero que ha que hacer es conseguir un número o apikey para poder acceder a googlemaps desde vuestro sitio. Para ello hemos de entrar en http://www.google.com/apis/maps/signup.html he introducir para qué sitio vamos a usar nuestra apikey. Yo os aconsejo que saqueis una apikey para "localhost" para poder trabajar en local primero y luego una para vuestro sitio.

Bueno vamos a tema:

Una vez que tengáis vuestra apikey lo primiero que vamos a hacer es poner un código como este
Código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Bueno pues como podeis ver os sale un mapita de USA. Hasta aquí todo fácil verdad? Pues os vais a cagar, jajajaja, es broma

Ahora vamos a analizar lo importante de este código para ir entendiéndolo:

Código:

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>

Fijaos donde pone key=abcdefg pues hay teneis que poner vuestra apikey que hemos conseguido para localhost anteriormente.

Ahora vamos más abajo:

Código:

<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>

Aquí está la madre del codero, haber, la funcion Load() lógicamente se ejecuta cuando ser carga la web. Fijaos lo que hace, en primer lugar con el condicional está diciendo que si el buscador no es compatible con la api de google maps no haga nada. Pero valla, conoces a alguien que no tenga un buscador compatible?? YO nO.

Seguimos, a continuación crea la variable "map" que es el mapa en sí y lo asocia a la capa con id "map" que está dentro de Body.

Ahora vamos a decirle qué parte del mundo queremos ver con la línea

Código:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Donde 37.4419, -122.1419 es el punto del mundo (supongo que latitud y longitud, jejeje, supongo ehhh) y el 13 es el nivel de zoom que queremos darle.

Okis, pues fácil verdad. Pero ahora la pregunta del millón.
¿Cómo cojones hago para sacar los números que necesito para que salga el mapa de donde yo quiera?
¿Hay algún sitio donde yo ponga "Valdepeñas" y me diga "87.0212151,-6.21545"?

Pues sí, el mismo google maps. Fijaos, entramos a www.maps.google.es
y ahora hacemos una búsqueda, por ejemplo una dirección de mi pueblo. Me voy arriba y pongo,"Calle marconi 5, fuengirola" y automáticamente me sale en el mapa, pero ¿dónde están los números? pues fácil, pinchamos en "Enlazar con esta Página" que está a la derecha justo encima del mapa.

Cuando pinchamos, automáticamente la dirección de la web cambia en el explorador, ahora pone algo así

Código:

http://maps.google.es/maps?f=q&hl=es&q=Calle+marconi+5,+fuengirola&ie=UTF8&ll=36.53801,-4.624826&spn=0.003802,0.010815&om=1

Pues nada, nos fijamos bien u la variable ll contiene los dos valores que busco: "36.53801,-4.624826"

Ahora me voy al código de antes y sustituyo los dos valores por estos nuevos, quedando algo así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.53801,-4.624826), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Así ya tenemos nuestro mapita de google maps apuntando hacia donde nosotros queramos.

Bueno, en el siguiente artículo explicaré cómo poner puntos en el mapa y mensajes estilo bocadillo.

Hasta luegoooo

Si os a molado puedo seguir escribiendo sobre esto porque tengo que hacer varios trabajos con google maps y no me queda más remedio que seguir estudiando sobre el tema

cga · #2 (**permalink**) 28/07/2006, 09:02

Cita:

Iniciado por perrogrun

[COLOR="Blue"][I]Hola amigos, vereis he estado trasteando con la api de google maps y la verdad es que quería compartir mis experiencias con los demás usuarios, he escogido esta parte del foro para poner este "artículo" pero no sé si es la más adecuada.

quiero instalar google maps en joomla

donde tengo que modificar el codigo en el index del template o en alguna pagina del componente google maps gracias

evola · #3 (**permalink**) 06/07/2007, 05:13

Editado por duplicación del post

evola · #4 (**permalink**) 06/07/2007, 05:17

Perrogun, hasta donde has esplicado es lo facil. Mi problema biene cuando intento modificar o añadir algún dato que no sea la latitud, aquí teneis el codigo que he modificao:

Código:

body><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[KEY]"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		
        map.setMapType(G_HYBRID_TYPE);
		
        map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());

// Create the marker and corresponding information window
function createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } );
return marker;
}

var point = new GPoint(28142880367148,937758922576904);
var address = 'Tudi-Turismo Rural y Diversión<br/>Central<br />Pza. Ignacio Mª Alava 8-2ºA - Huelva<br />Tlef: 959821726-647151598';
var marker = createInfoMarker(point, address);
map.addOverlay(marker); 


        map.setCenter(new GLatLng(37.7018259411675,-6.77262612406668), 8);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

<

PD: Con este código me aparece el recuadro pero en gris y sin el mapa en el fondo. ¿Alguién sabe porqué ocurre eso?

SI TAN SOLO TUVIERA · #5 (**permalink**) 29/08/2007, 19:22

Muy bueno, estare esperando la parte II!!

#6 (**permalink**) 30/08/2007, 02:10

Hola amigos, bueno pues el problema es que no tengo tiempo para escribir, pero os prometo que en cuanto tenga un rato os prometo que seguiré explicando un poco:

Cómo hacer makers
Cómo señalar áreas
Cómo hacer líneas de ruta
Cómo geolocalizar a partir de una dirección
Cómo utilizar otros sistemas de mapas como Livemasp de Microsoft o el Yahoo maps
Cómo utilizar la vista de pájaro de Livemaps
Cómo calcular distancias.
Y miles de cosas más que se pueden hacer con la apis de estos magníficos mapas

En cuanto tenga un rato.

Por cierto evola, tu problema seguramente está aquí:
var point = new GPoint(28142880367148,937758922576904);

Estos dos puntos no son coordenadas válidas y te muestra una zona inexistente en el mapa.

CorpseOfSteel · #7 (**permalink**) 27/09/2007, 09:03

hay mas partes? es un tema que me interesa

#8 (**permalink**) 15/07/2008, 00:39

Bueno señores, ante todo pedir disculpas por no seguir con el tema pero es que he tenido muchísimo trabajo y me ha sido completamente imposible, si os parce bien seguímos por cómo poner marcas encima del mapa en la pocisión que queramos y con el icono y sombra que queramos.

Vamos a empezar definiendo el objeto icono:

Código:

var icon = new GIcon();
icon.image = "http://www.panoramio.com/img/panoramio-marker.png";
icon.shadow = "http://www.panoramio.com/img/panoramio-shadow.png";
icon.iconSize = new GSize(18, 18);
icon.shadowSize = new GSize(22, 22);
icon.iconAnchor = new GPoint(9, 9);
icon.infoWindowAnchor = new GPoint(9, 0);

Creo que los parámetros que definen el objeto están bien claros, la imagen, la sombra, el tamaño del icono, el tamaño de la sombra, la desviación del icono con respecto a las coordenadas y el lugar donde se abren las ventanas de información del icono.

Por cierto para usar vuestros propios iconos hay una página donde automáticamente se crea la sombra del mismo yo la uso frecuentemente: http://www.cycloloco.com/shadowmaker...hadowmaker.htm

Ahora vamos a ver una funcioncita muy útil y que os aconsejo que la useis para poner iconos en el mapa ya que te evitará muchos problemas a la hora de meter muchos icos o cuanto tenemos que plasmar muchos datos en el mapa:

Código:

function createMarker(lat,lng,icono) {
	var point = new GLatLng(lat,lng);
	var marker = new GMarker(point,icono);

	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("Hola esto es un bocadillo de información");
	});
	return marker;
	}

Vale ya tenemos la función que crea en el mapa nuestros icos, lo que hacemos es primeramente definir el punto donde se va a mostrar muestro icono en point, luego le decimos que en variable marker está definido el punto y el icono a usar mediante la función Gmarker. A continuación le ponemos al icono un "escuchador" que estará pendiente de cuando el usuario hace "click" en marker para mostrar un openInfoWindowHtml, osea, un bocadillo sobre el icono, con el texto que hay entre las comillas dentro de los paréntesis, finalmente retornamos el propio marker.

Cómo llamamos a la función? pues fácil más o menos asi:

Código:

createMarker(34.501,-4.25,icon);

Y nos pondrá un magnífico icono en esa latitud y longitud, mostrando el icono de panoramio y cuando pinchemos encima nos aparecerá un bocadillo con la frase "Hola esto es un bocadillo de información"

Espero vuestros comentarios, un saludo a todos.

mactintosh · #9 (**permalink**) 27/07/2008, 07:56

Hola.... he colocado el mapa de google en una web, pero....

Para ampliar hay que hacer doble click con el botón izquierdo del ratón y para restaurar (en función de lo que hallamos ampliado) hay que hacer doble click con el botón derecho del ratón.

Mi pregunta es.... ¿Como puedo hacer para introducir también los objetos de zoom del mismo google maps o algo parecido?

Gracias

Cita:

Iniciado por perrogrun

Bueno señores, ante todo pedir disculpas por no seguir con el tema pero es que he tenido muchísimo trabajo y me ha sido completamente imposible, si os parce bien seguímos por cómo poner marcas encima del mapa en la pocisión que queramos y con el icono y sombra que queramos.

Vamos a empezar definiendo el objeto icono:

Código:

var icon = new GIcon();
icon.image = "http://www.panoramio.com/img/panoramio-marker.png";
icon.shadow = "http://www.panoramio.com/img/panoramio-shadow.png";
icon.iconSize = new GSize(18, 18);
icon.shadowSize = new GSize(22, 22);
icon.iconAnchor = new GPoint(9, 9);
icon.infoWindowAnchor = new GPoint(9, 0);

Creo que los parámetros que definen el objeto están bien claros, la imagen, la sombra, el tamaño del icono, el tamaño de la sombra, la desviación del icono con respecto a las coordenadas y el lugar donde se abren las ventanas de información del icono.

Por cierto para usar vuestros propios iconos hay una página donde automáticamente se crea la sombra del mismo yo la uso frecuentemente: http://www.cycloloco.com/shadowmaker...hadowmaker.htm

Ahora vamos a ver una funcioncita muy útil y que os aconsejo que la useis para poner iconos en el mapa ya que te evitará muchos problemas a la hora de meter muchos icos o cuanto tenemos que plasmar muchos datos en el mapa:

Código:

function createMarker(lat,lng,icono) {
	var point = new GLatLng(lat,lng);
	var marker = new GMarker(point,icono);

	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("Hola esto es un bocadillo de información");
	});
	return marker;
	}

Vale ya tenemos la función que crea en el mapa nuestros icos, lo que hacemos es primeramente definir el punto donde se va a mostrar muestro icono en point, luego le decimos que en variable marker está definido el punto y el icono a usar mediante la función Gmarker. A continuación le ponemos al icono un "escuchador" que estará pendiente de cuando el usuario hace "click" en marker para mostrar un openInfoWindowHtml, osea, un bocadillo sobre el icono, con el texto que hay entre las comillas dentro de los paréntesis, finalmente retornamos el propio marker.

Cómo llamamos a la función? pues fácil más o menos asi:

Código:

createMarker(34.501,-4.25,icon);

Y nos pondrá un magnífico icono en esa latitud y longitud, mostrando el icono de panoramio y cuando pinchemos encima nos aparecerá un bocadillo con la frase "Hola esto es un bocadillo de información"

Espero vuestros comentarios, un saludo a todos.

#10 (**permalink**) 28/07/2008, 03:05

Si te refieres a que se muestren los controles de zoom puedes poner esta línea de código:

Código PHP:

      map.addControl(new GLargeMapControl());

Así te saldrán los controles grandes del Gmaps

mactintosh · #11 (**permalink**) 28/07/2008, 05:05

Hola muchas gracias por contestar.... el caso es que el codigo lo tengo en html.
Hay alguna forma de hacerl con html?

Gracias...

Cita:

Iniciado por perrogrun

Si te refieres a que se muestren los controles de zoom puedes poner esta línea de código:

Código PHP:

      map.addControl(new GLargeMapControl());

Así te saldrán los controles grandes del Gmaps

desendoll · #12 (**permalink**) 28/07/2008, 05:49

O te se han adelantado o yo navego mas que tu, pero hay un manual exactamente igual a como lo planteas aqui

Saludos