Añadiendo Google Maps a tu sitio web

Posted Mié, 01/06/2010 - 17:56 by admin

Los mapas se suelen insertar en un sitio web de una determinada compañía, para ayudar a los posibles clientes a encontrar su ubicación. Para esta tarea Google Maps es excelente, pero no sería recomendable para ayudar a sus futuros clientes, además, añadir en el mapa el logotipo de su empresa, aparcamientos cercanos, estaciones de tren.... etc, es muy simple, y en este artículo voy a tratar de explicarte cómo hacerlo.

Antes de empezar, echa un vistazo a lo que vamos a crear:



Ver mapa más grande

API de Google Maps

La API de Google Maps te permite insertar los mapas directamente en tu sitio web. Todo lo que necesitas es un poco de JavaScript, y para embellecerlo un poco de CSS. La versión 3 de la API de Google Maps acaba de ser publicada, y es la que vamos a utilizar. Si quieres puedes leer toda la documentación en Google Labs, al mismo tiempo necesitaras obtener una clave para la API.

Obtener las coordenadas

Como no espero que conozcas las coordenadas exactas de tu ubicación, voy a explicar de una manera muy rápida la solución propuesta por Google para obtenerlas. Conociendo la dirección exacta, forma la url siguiente :

http: //maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

Al introducirlo obtendremos lo siguiente:


Estas coordenadas pertenecen a la sede de Apple en Cupertino

El primer número es el código de estado y 200 significa está bien.El segundo número es la precisión de la dirección, en este caso el número es de 8, estaría bien. Los dos últimos números son la latitud y la longitud, que realmente son los números que necesitamos.

Agregar el Mapa a tu Web

Vamos a añadir el mapa a tu sitio web. Abre tu editor de HTML favorito y crea un archivo HTML con codificación UTF-8. En primer lugar, tenemos que crear el visor en html para el codigo JavaScript de Google Code. Agrega estas líneas entre el <head> y </head>

< meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
< script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">< /script>

Después de la URL, te darás cuenta de que sensor=false. Como no usamos ningún sensor ( aparato ), como un GPS, para localizar la ubicación, el valor tiene que ser false.

Justo debajo de lo que acabamos de escribir, insertar lo siguiente:

< script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(57.0442, 9.9116);
		var settings = {
			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
    };

Vamos a explicar esto un poco. En la línea 2 se crea la función initialize(). Dentro de esta función, es donde vamos a definir la configuración básica del mapa. En la línea 3 creamos una nueva variable, latlng,latlng para la latitud y longitud. La variable contiene las coordenadas que vamos a utilizar como centro de nuestro mapa.
Después de eso, creamos la variable settings. Aquí tienes unas cuantas opciones:

  • zoom hay que jugar con el valor para conseguir que el mapa se adapte a su ubicación.
  • center especifica nuestro centro. Al escribir latlng nos referimos a la variable que hemos creado antes, y dentro de las coordenadas que se utilizarán.
  • mapTypeId: google.maps.MapTypeId.ROADMAP define que nuestro mapa debe ser del tipo ROADMAP - se puede cambiar para SATELLITE HYBRID o TERRAIN

A continuación del código anterior, escribe lo siguiente:

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Este código crea la variable map, y define que el mapa debe utilizar la configuración que acabamos de crear.

Escribir :

}
< /script>

Para terminar la función, y en el < body> y escribir lo siguiente:

< body onload="initialize()">
  < div id="map_canvas" style="width:800px; height:500px">
< /body>

De esta manera estamos diciendo que se puede cargar la página initialize() , e insertar una < div> con el tamaño en que queremos visualizar nuestro mapa.

Adición de marcadores

Ahora tenemos que añadir algunos marcadores. Empecemos por crear un marcador.

Justo debajo de :

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

insertar el siguiente código:

var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title"
  });

Actualiza la página, y observa los cambios. Entonces, ¿qué hemos hecho?

En primer lugar, vamos a crear la variable companyPos, donde se especifique la posición del marcador. A continuación, vamos a crear el mismo marcador con la variable companyMarker. Puedes agregar más de estos ajustes, pero nos pondremos con ello más adelante. Estos ajustes son bastante lógicos, así que no voy a entrar en más profundidad con ellos.

Personalización de los marcadores

Aunque esto podría ser suficiente para mostrar a tu cliente como encontrarte, todavía podemos hacerlo mucho más agradable. Crea una imagen con tu editor favorito, de 100 × 50 píxeles, algo similar a esto:

A continuación, crear una sombra de la imagen:

Para agregar estas imágenes como un marcador en lugar del marcador estándar, cambia el código del marcador a este:

 var companyLogo = new google.maps.MarkerImage('images/logo.png',
	new google.maps.Size(100,50),
	new google.maps.Point(0,0),
	new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
	new google.maps.Size(130,50),
	new google.maps.Point(0,0),
	new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyLogo,
	shadow: companyShadow,
	title:"Company Title"
});

Agregar InfoBoxes

Para añadir una descripción de su empresa cuando el usuario hace clic en el logo se puede añadir un infobox.

Pega este código justo después de la variable map

contentString var = '< div id="content">' +
    '< div id="siteNotice">' + '< div id="siteNotice">' +
    '< /div>' + '' +
    '< h1 id="firstHeading" class="firstHeading">Høgenhaug' + '< h1 id="firstHeading" class="firstHeading"> Høgenhaug ' +
    '< div id="bodyContent">' + '< div id="bodyContent">' +
    '
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
' + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  '+
    '< /div>' + '' +
    '< /div>' ; '';

var infowindow = new google. maps . InfoWindow ( { InfoWindow var = google nuevo. mapas. InfoWindow ((
    content : contentString Contenido: contentString
} ) ; ));

Para hacer aparecer la Ficha cuando se hace clic en tu logotipo, sólo tienes que añadir este código justo antes de la } en la función initialize() :

google.maps.event.addListener(companyMarker, 'click', function() {
  infowindow.open(map,companyMarker);
});

Para hacer el InfoBox un poco más bonito, solo hay que modificar tu hoja de estilos con el archivo :

body (
	font-family : Helvetica , Arial , sans-serif ; font-family: Helvetica, Arial, sans-serif;
	font-size : 10pt ; font-size: 10pt;
} )

Y ahí lo tienes. Una manera para incluir Google Maps en tu página web, tu blog de viajes, etc.

Este texto es una traducción, por lo que puede contener errores, el articulo original lo puedes encontar en :
http://stiern.com/

Nota: En el codigo de este articulo. he empleado algunos espacios para una mejor visualización, el la página del autor puedes descargar un fichero .zip con todo el codigo.