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