Google sigue actualizando sus APIs para permitir a los desarrolladores incorporar las diferentes herramientas en los sitios o aplicaciones web. En este caso les voy a mostrar lo fácil que es incororar los mapas de google en tu propio sitio para señalara una dirección.

Mapa de Google en tu web

A continuación el código necesario para insertar un mapa, y mas abajo lo explico linea por linea.

	
	

Este código se inserta entre las etiquetas HEAD. El primer script llama a la API de Google y en el segundo es donde se definen todas ls caracteristicas visuales del mapa y del globo de información.

Es muy importante la línea:
var latlng = new google.maps.LatLng(-34.577605,-58.409552);
Los valores entre parentesis, son las coordenadas del mapa, Latitud y Longitud, el punto exacto donde aparecerá la chiche. Estos valores se obtienen del sitio de GoogleMaps. Al buscar una dirección las coordenadas aparecen en la barra de direcciones.

En el grupo:

var myOptions = {
	      zoom: 15,
	      center: latlng,
        	mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      		navigationControl: true,
      		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    };

Es donde definimos las diferentes opciones de presentacion del mapa:
Zoom: el valor que representa la distancia a la que aparece el mapa.
Center: latlng. Para que el mapa haga centro en las coordenadas.
mapTypeControlOptions: Define las los controles que se mostraran en el mapa.
navigationControl: Si se muestra o no el control de navegación.
navigationControlOptions: En caso de mostrar el control de navegacion, se define el tamaño.
mapTypeId: Tipo de Mapa. Puede ser de calles, satelite, hibrido o relieve.

Los diferentes posibles valores para cada una de estas variables los encontramos en la pagina de Ejemplos de GoogleMap.

Luego, la linea:
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
Define el nombre con el que vamos a referirnos al mapa en nuestra pagina y le pasa como parametros las opciones definidas mas arriba.

Y finalmente, el contenido del globo:

var contentString = 
	    '

Titulo del Globo

'+ '
'+ '

Dirección del lugar
'+ 'Telefono (01) 1234 - 5678
'+ 'Palermo
'+ 'Ciudad de Buenos Aires
'+ 'Argentina

'+ '
';

En el código HTML solamente hay que modificar la etiqueta BODY para que quede de la siguiente forma:


Para que ejecute la funcion definida en el script y llame al mapa.

Y finalmente, donde queremos que aparezca el mapa lo indicamos de la siguiente forma:

No es tan complicado, no?
Alguno de ustedes ya lo tiene implementado en algún sitio? Le encontraron otras caracteristicas que no esten comentadas en este post?