Como añadir Google Map a tu pagina Web

Publicado por Estefania Morán

Aqui encontre algunas de las funciones que me sirven para el desarrollo de la tarea.
Fuente: http://www.maestrosdelweb.com/editorial/trabajando-con-el-api-de-google-maps/

Trabajando con el API de Google Maps

Mediante el API que nos ofrecen Google Maps los desarrolladores del servicio podremos hacer uso de sus bondades. En este artículo pretendemos explicar los aspectos más relevantes de este API.
Google Maps es un servicio gratuito que nos ofrece Google con mapas desplazables del mundo entero, fotos satelitales, la ruta más corta entre diferentes ubicaciones y muchas características interesantes. Es semejante a Google Earth; una aplicación para Windows, Mac y Linux; pero con la diferencia que Google Maps es fácilmente integrable a cualquier sitio web.

¿Cómo integro un mapa de Google Maps a mi web?

Insertar un mapa en nuestro sitio web es muy simple haciendo uso de la API de Google Maps. Lo primero es solicitar nuestra API Key, debemos especificar en qué URL vamos a utilizar nuestro mapa.
Aunque es recomendable solicitar una para la dirección http://localhost con esta hagamos los ajustes necesarios y una vez que nuestro código esté listo cambiar la API Key por la de nuestro sitio en Internet para publicar la página.
Aquí tenemos una muestra del código que nos proporciona Google Maps para que utilicemos. Es importante destacar que debemos remplazar el texto resaltado en el código: COLOCAR_AQUI_NUESTRA_KEY por nuestro API Key, para que funcione correctamente.

A continuación utilizaremos este código para explorar algunas, de las múltiples características que podemos explotar con el API de Google Maps.

¿Cómo iniciar el mapa en coordenadas específicas?

En el código que nos ofrece Google Maps para utilizar en nuestra web está predeterminada la ubicación de Palo Alto en Estados Unidos; pero podemos cambiarla estableciendo nuevas coordenadas. En el código siguiente establecimos la ubicación del mapa en la isla Madagascar, al sur de África:

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

Hasta ahí todo está muy bien, pero cómo obtenemos las coordenadas de la ubicación que deseamos. Para esto entremos a www.maps.google.es y posicionémonos donde queremos que aparezca nuestro mapa, luego copiemos el vínculo que aparece en la parte superior derecha del mapa con el texto: “Enlazar con esta página”, que sería algo como esto:

http://maps.google.es/?ie=UTF8&ll=-19.435514,48.603516&spn=17.554213,29.882813&z=5&om=1

En el parámetro ll se almacena la latitud y longitud, respectivamente, de la ubicación que estamos observando. Copiamos esos números, los pegamos en la parte del código del API que explicaba anteriormente y hemos logrado cambiar las coordenadas iniciales de nuestro mapa.

¿Cómo establecemos el nivel de Zoom inicial?

También podemos especificar el nivel de zoom que deseamos que tenga nuestro mapa al mostrarse. Logramos esto variando el segundo parámetro del método setCenter. Por defecto está establecido en 13, pero en el código que mostramos a continuación lo hemos establecido en 5. Mientras más pequeño sea el número más cerca estaremos del mapa.

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
      }
}

¿Cómo añadir controles?

Quizás nos interese que nuestro mapa tenga controles de zoom o navegación. Pues a continuación explicaremos cómo insertarlos. Simplemente agregaremos una línea dentro de nuestra instrucción IF, con el método addControl de nuestro objeto map, especificando qué tipo de control queremos insertar, como se muestra en el código:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
      }
    }

En el ejemplo anterior hemos agregado a nuestro mapa un selector del tipo de mapa (GMapTypeControl), un control de desplazamiento con una barra de zoom (GLargeMapControl), la escala del mapa (GScaleContro) y un mini-mapa en una esquina que nos indica la región que estamos visualizando (GOverviewMapControl). Para mayor información sobre los controles que podemos incluir vea la ayuda de la API.

¿Cómo cambiar el tipo de mapa?

Con el control para seleccionar el tipo de mapa que agregamos podemos seleccionar entre: Mapa, Satélite e Híbrido; pero podemos especificar con cuál queremos que se muestre inicialmente nuestro mapa utilizando el método setMapType del objeto map, que puede tomar los valores: G_MAP_TYPE (Mapa), G_SATELLITE_TYPE (Satélite) y G_HYBRID_TYPE (Híbrido).
En nuestro código de ejemplo insertamos una línea para especificar que nuestro mapa inicie en modo Híbrido.

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_TYPE);
      }
    }

¿Cómo insertar marcas a nuestro mapa?

Las marcas son muy útiles para resaltar ubicaciones. Con la función GMarker() podremos crear una marca en el punto que le pasamos como parámetro y la función addOverlay() nos sirve para adicionar la marca al mapa.
En el código siguiente hemos agregado una marca en la posición -19.000514, 46.603516. Aproximadamente el centro de la isla Madagascar.

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(-19.435514, 48.603516), 5);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_TYPE);
        var point = new GLatLng(-19.000514,46.603516);
        map.addOverlay(new GMarker(point));
      }

En el código anterior hemos utilizado la función GLatLng() para declarar un punto en la ubicación que deseamos poner la marca, luego hemos creado una marca con GMarker() y la hemos agregado a nuestro mapa haciendo uso de addOverlay().