Está en: Recursos web Google - Google maps en tu web.

Google maps en tu web, mapas y cálculo de rutas:




En este tutorial os vamos a ayudar a implantar el sistema de google maps en vuestra web.
Google maps nos permite mostrar mapas de zonas determinadas, marcar puntos personalizados, crear rutas entre dos puntos y muchas funciones más.

Nosotros vamos a realizar dos ejemplos de como utilizar google maps para una web: Mapa de una zona (Ver Ejemplo) y cálculo de rutas (Ver Ejemplo).

Comenzamos, primero obtenemos la clave que nos permitirá utilizar google maps con todas sus funciones en nuestras webs:

Obtener Api Key
, esta clave que nos proporciona google deberemos insertarla en todas las páginas donde vayamos a utilizar google maps, entre las etiquetas <head></head> de la siguiente forma:

<script src="http://maps.google.com/maps?file=api&amp;v=2&oe=ISO-8859-1;&amp;key=ABQIAAAAXf
yLOV-DBHsmkpuY-LUUzBRvMuQNe3bCQ9tCDXjXwHZUjgdNBhQG32AJg5mKqo03Qmq9WX7GTGdmvw"
type="text/javascript"></script>


en key="insertamos la clave que nos ha proporcionado google para nuestra web"

También añadiremos este código: &oe=ISO-8859-1, esto servirá para que muestre los carácteres en castellano y solucionar el problema con las tildes y demás carácteres (Satélite, híbrido, etc...).

1. Mapa de una zona geográfica:

Creamos una div llamada "mapa" y le damos unas dimensiones para mostrar el mapa de una forma clara.
A continuación insertamos el script que lo mostrará con los controles que creamos convenientes.
Lo situaremos en el body de nuestro documento de la siguiente forma:

<body>

<div id="mapa" style="width: 710px; height: 300px; border: 4px solid #FF6600;"></div>

<script type="text/javascript">

var map = new GMap(document.getElementById("mapa")); map.addControl(new GLargeMapControl());

map.centerAndZoom(new GPoint(-8.4419, 43.2819), 8);
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_NORMAL_MAP);

</script>

</body>


Explicamos los controles, podemos añadir los que creamos convenientes:

- map.addControl(new GMapTypeControl()); muestra los controles de zoom y movimiento del mapa.
- map.addControl(new GScaleControl()); muestra una barra para informarnos sobre la escala que estamos visualizando.
- map.addControl(new GOverviewMapControl()); muestra un pequeño mapa en la parte inferior derecha para facilitar la navegación.
- map.setMapType(G_HYBRID_MAP); aquí le indicamos el tipo de mapa que queremos que aparezca por defecto:
Normal: G_NORMAL_MAP
Satélite: G_SATELITE_MAP
Híbrido: G_HYBRID_MAP
Si no insertamos este control, G_NORMAL_MAP es el valor por defecto.

Finalmente le indicamos las coordenadas y el zoom que queremos visualizar:
- map.centerAndZoom(new GPoint(-8.4419, 43.2819), 8);

Mapa de una zona geográfica determinada.
Navegadores que soportan la visualización del mapa: IE 6.0+, Firefox 0.8+, Safari 1.2.4+, Netscape 7.1+, Mozilla 1.4+, Opera 8.02+


2. Cálculo de rutas:

En este ejemplo crearemos una aplicación para calcular la ruta entre dos direcciones concretas.
Necesitamos dos divs una para mostrar el mapa ("mapa_ruta") y otra para mostrar el texto de la ruta ("direcciones").
Después entre las etiquetas <head></head> de nuestro documento insertamos el siguiente script:

<script type="text/javascript">

var map;
var gdir;
var geocoder = null;
var addressMarker;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapa_ruta"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
gdir = new GDirections(map, document.getElementById("direcciones"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);

setDirections("Huesca", "Madrid", "es");

}
}

function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });
}

function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("Dirección no disponible.\nError code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
else alert("An unknown error occurred.");
}

function onGDirectionsLoad(){
}

</script>


Después creamos las divs en el body para mostrar el mapa y la ruta:

<div id="mapa_ruta" style="width: 710px; height: 300px; border: 4px solid #FF6600;"></div>

<div id="direcciones" style="width: 710px"></div>

Finalmente creamos un formulario con 2 campos de texto uno para el origen ("fromAddress") y otro para el destino ("toAddress"), y un menú desplegable para el idioma ("locale"):

<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false" name="form">

Origen: <input type="text" size="25" id="fromAddress" name="from"/>

Destino: <input name="to" type="text" id="toAddress" size="25"/><br>

Idioma: <select id="locale" name="locale">
<option value="es" selected>Castellano</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
</select>

<input type="submit" name="Submit" value="Calcular Ruta"/>

</form>


en setDirections("Huesca", "Madrid", "es"); indicaremos la ruta por defecto que se cargará cuando accedamos a la página.

Para concluir llamamos a la función en el evento onload del cuerpo:

<body onload="initialize()" onunload="GUnload()">


Veamos el ejemplo:

Origen: Destino:

Idioma:

Ruta por defecto: Huesca - Madrid
Navegadores que soportan la visualización del mapa: IE 6.0+, Firefox 0.8+, Safari 1.2.4+, Netscape 7.1+, Mozilla 1.4+, Opera 8.02+


Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com