Home Portfolios Blog Contacto
Buscar artículo:


Ajax
ASP
Asp.net
Blogosfera
Cosas Útiles
Css
Delphi
Flash
Foros
Gmail
Google Maps
Internet
Javascript
Office
Otros
php
Programando
Ruby on Rails
Swish-Max
Windows

- Google Maps

¿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:


<!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
Autor:
2006-07-24 12:20:45


Realiza tu comentario acerca del artículo
Usuario
Email
Comentario

* Para escribir código usa las etiquetas [code] tu código [/code]