Insertar mapa de google en un sitio web

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.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	  function initialize() {
	    var latlng = new google.maps.LatLng(-34.577605,-58.409552);
	    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
	    };
	    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	    var contentString = 
	    '<h2 id="firstHeading" class="firstHeading">Alpina Motors</h2>'+
	    '<div id="bodyContent">'+
	    '<p>Dirección del lugar<br>'+
	    '(01) 1234-5678<br>'+
		'Palermo<br>'+
		'Ciudad de Buenos Aires<br>'+
		'Argentina</p>'+
	    '</div>';
 
		var infowindow = new google.maps.InfoWindow({
		    content: contentString
		});		
 
		var marker = new google.maps.Marker({
	      position: latlng, 
	      map: map, 
	      title:"Título del Globo"
		});
 
		infowindow.open(map,marker);
 
		<!--	
		google.maps.event.addListener(marker, 'click', function() {
		  infowindow.open(map,marker);
		});
		-->
	  }
	</script>

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:

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7
8
9

var contentString = 
	    '<h2 id="firstHeading" class="firstHeading">Titulo del Globo</h2>'+
	    '<div id="bodyContent">'+
	    '<p>Dirección del lugar<br>'+
	    'Telefono (01) 1234 - 5678<br>'+
		'Palermo<br>'+
		'Ciudad de Buenos Aires<br>'+
		'Argentina</p>'+
	    '</div>';

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

1

<body onload="initialize()">

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:

1

<div id="map_canvas"></div>

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?