Desarrollo web no image

Published on febrero 20th, 2012 | by Miguel Angel Berlanga Alvarez

8

Tutorial Google Maps I

Cómo incluir un mapa de google en tu web.

En este mini “Tutorial Google Maps” vamos a utilizar el API de Google Maps para incluir un mapa en tu aplicación web. La versión que utilizaremos será la última que en el momento de la creación de este tutorial es la versión V3.

En esta versión “V3″ ya no es necesario utilizar una Key, solo será necesario si quieres obtener algunas ventajas o menos limitaciones. No obstante dejo los parrafos siguientes en azul que describen como obtener tu Key por si necesitas crear una para tu aplicación web.

Antes de nada tenemos que tener una cuenta en Google, una vez que hayamos hecho login con nuestra cuenta podemos acceder a la consola del API, aquí es dónde vamos a generar el Token o Key que nos permité usar Google Maps en nuestras aplicaciones, una vez que estemos logeados nos dirigimos a esta dirección:

https://code.google.com/apis/console/

El navegador nos llevará a una página en la que podemos ver todos los servicios de Google en los que estamos dados de alta, tenemos un ítem en el menú de la izquierda en el que pone API Access, desde ahí podemos obtener el Key necesario para utilizarlo en nuestra aplicación, podemos generar otro borrando el anterior si queremos eliminar el antiguo, además si solo vamos a utilizar el Key desde una aplicación web debemos escribir la URL desde la que Google permitirá la utilización de la Key, así impediremos que otros usuarios reutilicen nuestra Key ya que diariamente tiene un uso máximo (aunque este es de 25.000 veces).

Este es el código que tiene Google en su documentación, solo nos hace falta introducir el Key por la que has obtenido antes y cambiar las coordenadas que quieres que muestre tu mapa, en este ejemplo mostraré una isla de Tailandia (Ko Chang) que es dónde debería estar y no aquí haciendo este mini-tutorial.

El código tiene algunas ligeras modificaciones, pero principalmente es así, la Key no es necesaria a no ser que vayas a quieres saltarte algunas limitaciones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<--! Tutorial google Maps -->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(12.570648483963033, 101.44157409667969),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:60%; height:60%"></div>
  </body>
</html>

Para obtener las coordenadas que necesitas introducir en el código de la aplicación, puedes escribir la dirección en Google Maps, por ejemplo “Ko Chang” y cuando lo muestre pegar este código JavaScript en la barra del navegador, sin las comillas “ javascript:void(prompt(”,gApplication.getMap().getCenter())); “, después presionamos intro y el navegador te mostrará un prompt con las coordenadas del centro del mapa.

Si lo prefieres puedes utilizar algún diseñador de mapas que te muestre las coordenadas, tipo QuickMaps.

Este es el resultado:

Ejemplo Tutorial Google Maps

Tags: , , , , , ,


About the Author



8 Responses to Tutorial Google Maps I

  1. Anselmo says:

    Gracias por los tutoriales, son muy buenos!

    Tengo una duda, espero me puedas orientar. En el código, veo que la latitud y la longitud son estáticas. ¿Cómo le podría hacer para que estos parámetros fueran dinámicos?

    Algo más o menos así: Al presionar sobre un link, que este le mande ambos parámetros y que el mapa se despliegue.

    Gracias.

  2. admin says:

    Hola,

    Lo que quieres hacer no parece complicado, prueba esto:
    Modifica la función initialize para que le puedas pasar dos parametros
    initialize(lat, long) y en el objeto new google.maps.Lat….. escribe las dos variables que le has pasado anteriormente.
    Luego tendrás que llamar a la función desde el link que quieras y en teoria mostrará el mapa en la posición que le has pasado.
    La duda que tengo es si cuando haces click en otro link (si es que hubiese varios) volverá a cambiar la posición, me temo que esto no lo hará.

    Un saludo.

  3. Anselmo says:

    Gracias por la respuesta, hoy voy a intentar modificar el código. De hecho tengo una lista con muchos links, cada uno tiene sus latitudes y longitudes, al presionar sobre un link dentro de cada fila se tiene que ir a otra página y mostrar el mapa.

    Déjame intentar para ver cómo me va, muchas gracias.

  4. admin says:

    Ok, prueba.

    No obstante, si no lo consigues muestrame o envíame el código y te echo una mano.

    Suerte!

  5. José Felipe Sánchez Díaz says:

    Buenos díaz soy estudiante de la ing. sistemas computacionales, actualmente tengo un proyecto en que tengo que graficar unos puntos en google maps, pero estas coordenadas tengo que obtenerlas desde un archivo XML previamnte elavorado con mas información de dichos puntos (coordenadas) e informacion de las lineas que unen un punto con otro, mi pregunta es como hacer como ago para sacar esas coordenadas definidad en mi XML y grafico en google maps? agradeceria su ayuda cualquier dato que pueda ayudarme mi correo es: —Editado—

  6. samo says:

    quiero saber como realizar la animacion de las rutas de un mapa es decir k se vaya dibujanto el mapa

  7. Pingback: Dibujar rutas en Google Maps v3 *** Codigojavaoracle.com

Deja un comentario

Tu dirección de correo electrónico no será publicada.


9 + = diecisiete

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑